Servidor MCP de Excalidraw: potente API de dibujo para la integración con LLM

Un servidor integral de Protocolo de Contexto de Modelo (MCP) que permite una interacción fluida con diagramas y dibujos de Excalidraw. Este servidor proporciona a los LLM (Grandes Modelos de Lenguaje) la capacidad de crear, modificar, consultar y manipular dibujos de Excalidraw mediante una API estructurada y fácil de usar para desarrolladores.

Características

• Control completo de elementos de Excalidraw
  Cree, actualice, elimine y consulte cualquier elemento de Excalidraw (rectángulo, elipse, diamante, texto, flecha, etc.), incluido soporte para:

  • posición ( x , y )

  • dimensiones ( width , height )

  • estilo ( backgroundColor , strokeColor , strokeWidth , roughness , opacity )

  • texto ( text , fontSize , fontFamily )

  • geometría de línea ( points )

  • bloqueo (bandera locked )

• Manipulación avanzada de elementos
  Agrupar, desagrupar, alinear, distribuir, bloquear y desbloquear elementos.

• Gestión de escenas y estados de aplicaciones

  • Realizar un seguimiento y modificar el estado a nivel de escena: theme , viewBackgroundColor , viewport (desplazamiento y zoom), selectedElements , groups .

  • Recupere la biblioteca de todos los elementos o propiedades de escena individuales.

• Guardar escena
  Exporta la escena actual (elementos + appState) a un archivo .excalidraw en el disco.

• Gestión de recursos
  Acceda y modifique la información de la escena, la biblioteca de elementos, el tema y los datos de elementos sin procesar.

• Fácil integración
  Compatible con Claude Desktop, Cursor y cualquier otra plataforma LLM que admita MCP.

• Soporte de Docker
  Implementación en contenedores simple para instalaciones sin dependencias.

Related MCP server: Excalidraw MCP Server

Referencia de herramientas API

Creación y modificación de elementos

create_element

Crea un nuevo elemento Excalidraw.

• Aporte

  {
    "type": "<element type>",
    "x": <number>,
    "y": <number>,
    "width": <number, optional>,
    "height": <number, optional>,
    "points": [{"x":<number>,"y":<number>}…],
    "backgroundColor": "<hex>",
    "strokeColor": "<hex>",
    "strokeWidth": <number>,
    "roughness": <number>,
    "opacity": <0–1>,
    "text": "<string>",
    "fontSize": <number>,
    "fontFamily": "<string>",
    "locked": <boolean>
  }

• Producción

  { "id": "<generated‑id>", "type": "<element type>", "created": true }

update_element

Actualizar las propiedades de un elemento existente.

• Aporte

  {
    "id": "<element id>",
  }

• Producción

  { "id": "<element id>", "updated": true, "version": <new‑version‑number> }

delete_element

Eliminar un elemento de la escena.

• Aporte

  { "id": "<element id>" }

• Producción

  { "id": "<element id>", "deleted": true }

query_elements

Lista de elementos que coinciden con filtros opcionales.

• Aporte

  {
    "type": "<element type>",        
    "filter": { "<prop>": <value> }  
  }

• Producción

  [ { /* element objects */ } … ]

Gestión de recursos

get_resource

Recuperar información de la escena o de la biblioteca.

• Aporte

  { "resource": "scene"|"library"|"theme"|"elements" }

• Producción

  • escena → { theme, viewport: {x,y,zoom}, selectedElements: […] }

  • biblioteca / elementos → { elements: [ … ] }

  • tema → { theme: "light"|"dark" }

Organización de elementos

group_elements / ungroup_elements

Agrupar o desagrupar colecciones de elementos.

• Aporte

  { "elementIds": ["id1","id2",…] }
  { "groupId": "<group id>" }

• Producción

  { "groupId": "<new‑id>", "elementIds": […], "ungrouped": true? }

align_elements

Alinear varios elementos al borde o centro especificado.

• Aporte

  { "elementIds": […], "alignment": "left"|"center"|"right"|"top"|"middle"|"bottom" }

• Producción
  { aligned: true, elementIds: […], alignment: "<alignment>" }

distribute_elements

Distribuya los elementos de manera uniforme, ya sea horizontal o vertical.

• Aporte

  { "elementIds": […], "direction": "horizontal"|"vertical" }

• Producción
  { distributed: true, elementIds: […], direction: "<direction>" }

lock_elements / unlock_elements

Impedir o permitir la edición de elementos.

• Aporte

  { "elementIds": [… ] }

• Producción
  { locked: true|false, elementIds: […] }

Gestión de escenas

save_scene

Exportar la escena actual (elementos + appState) a un archivo .excalidraw .

• Aporte

  { "filename": "<optional, must end with .excalidraw>" }

• Producción
  Scene saved successfully to <filename> o mensaje de error.

Ejemplos de integración

Escritorio de Claude

"mcpServers": {
  "excalidraw": {
    "command": "node",
    "args": ["src/index.js"],
    "env": {
      "LOG_LEVEL": "info",
      "DEBUG": "false"
    }
  }
}

Cursor

Crear .cursor/mcp.json :

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/absolute/path/to/mcp_excalidraw/src/index.js"],
      "env": { "LOG_LEVEL": "info", "DEBUG": "false" }
    }
  }
}

Estibador

docker run -i --rm mcp/excalidraw

O en la configuración de MCP:

"mcpServers": {
  "excalidraw": {
    "command": "docker",
    "args": ["run", "-i", "--rm", "mcp/excalidraw"],
    "env": { "LOG_LEVEL": "info", "DEBUG": "false" }
  }
}

Guía de instalación

# Install dependencies
npm install

# Run development server
npm start

Estibador

docker build -t mcp/excalidraw .
docker run -i --rm mcp/excalidraw

Opciones de configuración

Establezca a través de variables de entorno en .env o su contenedor:

• LOG_LEVEL — nivel de registro (predeterminado: "info" )

• DEBUG — modo de depuración ( "true" / "false" , predeterminado: "false" )

• DEFAULT_THEME — tema de interfaz de usuario predeterminado ( "light" / "dark" , predeterminado: "light" )

Ejemplos de uso

Crear y bloquear un rectángulo

{"type":"rectangle","x":50,"y":50,"width":100,"height":80,"backgroundColor":"#f3f3f3","strokeColor":"#333","locked":true}

{ "id":"abc123","type":"rectangle","created":true }

{"elementIds":["abc123"]}

Guardar escena en archivo

{"filename":"my_drawing.excalidraw"}

"Scene saved successfully to my_drawing.excalidraw"