Excalidraw MCP

excalidraw-mcp

Genera más de 25 tipos de hermosos diagramas dibujados a mano con IA — diagramas de flujo, de secuencia, de arquitectura, mapas mentales, ER, de clases, de estados, líneas de tiempo, gráficos circulares/de barras/de líneas/radar, kanban, wireframes, árboles de decisión y más — con disposición jerárquica de Sugiyama, soporte CJK y curva de aprendizaje cero.

Por Maaker.AI

Showcase

Cada imagen a continuación fue generada por una única llamada a la herramienta — sin coordenadas, sin disposición manual. Los archivos fuente .excalidraw se encuentran en docs/showcase/; arrastra cualquiera de ellos a excalidraw.com para seguir editando.

Diagrama de flujo (ramas + ciclo + CJK)	Arquitectura en capas

Instalación

Claude Code (recomendado)

claude mcp add excalidraw -- uvx maaker-excalidraw-mcp

Claude Desktop

Añade a tu configuración de MCP (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "excalidraw": {
      "command": "uvx",
      "args": ["maaker-excalidraw-mcp"]
    }
  }
}

opencode / Cursor / cualquier cliente MCP

{
  "mcp": {
    "excalidraw": {
      "type": "local",
      "command": ["uvx", "maaker-excalidraw-mcp"],
      "enabled": true
    }
  }
}

(se muestra opencode; Cursor y otros clientes usan el mismo comando uvx maaker-excalidraw-mcp en su formato de configuración MCP.)

pip

pip install maaker-excalidraw-mcp

Herramientas

Herramienta	Descripción
create_flowchart	Diagramas de flujo con disposición de Sugiyama — ramas, uniones, ciclos, grupos
create_architecture_diagram	Diagramas de arquitectura en capas con conexiones
create_sequence_diagram	Diagramas de secuencia UML con líneas de vida y mensajes
create_class_diagram	Diagramas de clases UML con atributos, métodos, relaciones
create_state_diagram	Máquinas de estado UML con estados iniciales/finales
create_er_diagram	Diagramas Entidad-Relación con cardinalidad
create_mindmap	Mapas mentales en forma de árbol con ramas de colores automáticos
create_timeline	Gráficos de línea de tiempo/Gantt con manejo de eventos superpuestos
create_pie_chart	Gráficos circulares con porciones etiquetadas y porcentajes
create_kanban_board	Tableros Kanban con columnas y tarjetas
create_network_diagram	Topología de red con nodos tipados (servidor, BD, etc.)
create_quadrant_chart	Matrices 2x2 de prioridad/posicionamiento
create_user_journey	Mapas de viaje del usuario con indicadores de emoción
create_wireframe	Maquetas wireframe de UI con marcos de dispositivos
create_org_chart	Organigramas (jerarquía de arriba hacia abajo)
create_swot_analysis	Matrices 2x2 de análisis FODA codificadas por color
create_table	Tablas de cuadrícula con columnas de tamaño automático y colores de fila alternados
create_bar_chart	Gráficos de barras verticales con barras y etiquetas de escala automática
create_line_chart	Gráficos de líneas con soporte de múltiples series
create_radar_chart	Gráficos de radar/telaraña con superposición de múltiples series
create_decision_tree	Árboles de decisión con decisiones en diamante y resultados rectangulares
import_mermaid	Importar sintaxis de Mermaid (diagrama de flujo, secuencia, clase, estado)
list_diagram_types	Listar todos los tipos de diagramas disponibles
modify_diagram	Añadir/eliminar nodos y conexiones en diagramas existentes
read_diagram	Analizar archivos .excalidraw existentes
export_diagram	Exportar diagramas a formato SVG

Ejemplos rápidos

Diagrama de flujo

Solo dile a tu asistente de IA:

"Crea un diagrama de flujo: Solicitud de usuario → Balanceador de carga → Servidor API → Base de datos"

La IA llamará a create_flowchart con datos estructurados, y obtendrás un archivo .excalidraw con:

• Disposición jerárquica de Sugiyama — manejo adecuado de ramas, uniones, ciclos y subgrafos desconectados
• Tamaños de caja calculados automáticamente según el contenido del texto
• Texto perfectamente centrado (incluidos caracteres chinos/CJK)
• Enrutamiento inteligente de flechas con enlace de bordes adecuado
• Estilo dibujado a mano que se ve genial en documentos y presentaciones
• 4 direcciones: LR (izquierda a derecha), RL, TB (arriba a abajo), BT

Diagrama de arquitectura

"Crea un diagrama de arquitectura con capas de Frontend (React, Next.js), Backend (Servidor API, Servicio de autenticación) y Base de datos (PostgreSQL, Redis)"

Genera un diagrama en capas con componentes organizados por nivel, tamaño automático y conexiones entre capas.

Leer y modificar

"Lee el diagrama en ./my-system.excalidraw y añade un nodo 'Cache' conectado al Servidor API"

Funciona con archivos .excalidraw existentes — lee su estructura, añade/elimina nodos, añade conexiones.

¿Por qué excalidraw-mcp?

vs MCP oficial de Excalidraw (excalidraw/excalidraw-mcp)

Característica	MCP oficial	excalidraw-mcp
Enfoque	JSON crudo — la IA coloca manualmente cada elemento	Entrada estructurada — di lo que quieres, obtén un diagrama
Disposición	La IA calcula coordenadas	Auto-disposición jerárquica de Sugiyama
Ramas/Uniones	La IA debe resolver el posicionamiento	Automático — manejado por el motor de disposición
Texto CJK	Sin estimación de ancho	Cálculo preciso del ancho CJK/escritura mixta
Centrado de texto	La IA debe calcular desplazamientos x/y	Centrado automático en contenedores
Enlace de flechas	La IA debe gestionar los enlaces	Enlace automático fixedPoint + orbit
Archivos locales	No puede leer/escribir archivos locales	Soporte completo de lectura, modificación y guardado
Distribución	URL remota / .mcpb	uvx / pip (Python estándar)
Uso de tokens	Necesita una llamada read_me para aprender el formato	Conocimiento del formato integrado

vs herramientas basadas en Mermaid

• Disposición libre: No limitado por las restricciones de sintaxis de Mermaid
• Estilo dibujado a mano: Aspecto nativo de Excalidraw, no bloques de código renderizados
• Salida editable: Arrastra el archivo .excalidraw a excalidraw.com para continuar editando

Referencia de herramientas

create_flowchart

Input:
  nodes: [{label: "Step 1", color?: "blue", shape?: "rectangle"}]
  edges: [{from: "Step 1", to: "Step 2", label?: "next"}]
  direction?: "LR" | "RL" | "TB" | "BT"  (default: "LR")
  title?: "My Flowchart"
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

Colores: azul, verde, morado, amarillo, rojo, gris, naranja, rosa

Formas: rectángulo (predeterminado), diamante (decisiones), elipse (inicio/fin)

create_architecture_diagram

Input:
  layers: [{
    name: "Frontend",
    color?: "blue",
    components: [{label: "React"}, {label: "Next.js"}]
  }]
  connections?: [{from: "React", to: "API Server"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

modify_diagram

Input:
  file_path: "/path/to/existing.excalidraw"
  add_nodes?: [{label: "New Node", color?: "green", x?: 100, y?: 100}]
  remove_labels?: ["Old Node"]
  add_connections?: [{from: "A", to: "B"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to modified file

read_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"

Output: Structured description (shapes, connections, colors)

export_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"
  format: "svg"

Output: Path to exported SVG file

Detalles técnicos

Disposición jerárquica de Sugiyama

Utiliza la biblioteca grandalf para una disposición adecuada de grafos dirigidos:

• Asignación de capas: Nodos colocados en capas según la topología del grafo
• Minimización de cruces: Optimización de múltiples pasadas para reducir cruces de bordes
• Asignación de coordenadas: Posicionamiento equilibrado dentro de las capas
• Manejo de ciclos: Detección de bordes de retroalimentación para grafos cíclicos
• Subgrafos desconectados: Colocación automática lado a lado

Estimación de ancho CJK

Cálculo preciso del ancho de texto para texto mixto chino/inglés:

Tipo de carácter	Ancho (a fontSize=20)
Caracteres CJK	~22px por carácter
Letras/dígitos ASCII	~11px por carácter
Espacios	~5px

Enlace de flechas

Utiliza el enlace moderno fixedPoint + orbit de Excalidraw (no el formato obsoleto focus/gap):

{
  "startBinding": {
    "elementId": "box1",
    "fixedPoint": [1.0, 0.5001],
    "mode": "orbit"
  }
}

Las flechas se conectan automáticamente en el borde correcto según las posiciones relativas.

Desarrollo

git clone https://github.com/maaker-ai/excalidraw-mcp.git
cd excalidraw-mcp
uv sync --dev
uv run pytest

Licencia

MIT