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.
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
- 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
- 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"