Excalidraw MCP
Crea y manipula diagramas con IA — flowcharts, wireframes y bocetos de arquitectura
design Node.js Principiante Auto-hospedable Sin API key
⭐ 200 stars 📅 Actualizado: hace 1m
Descripción
Servidor MCP que permite a los asistentes de IA crear y editar diagramas de Excalidraw de forma programática. Genera flowcharts, diagramas de arquitectura, wireframes y bocetos con estilo dibujado a mano mediante descripciones en lenguaje natural. Añade, modifica y organiza elementos en el canvas, conecta formas con flechas y exporta los resultados como PNG, SVG o formato nativo de Excalidraw. Perfecto para desarrolladores que quieren visualizar ideas rápidamente, documentar arquitecturas de sistemas o crear wireframes de UI sin cambiar a una herramienta de dibujo separada — simplemente describe lo que necesitas y la IA construye el diagrama por ti.
✅ Ideal para
Desarrolladores que quieren crear diagramas y wireframes rápidamente desde asistentes de IA sin salir de su editor
⏭️ No recomendado si
Necesitas control de diseño preciso a nivel de píxel o prototipos interactivos complejos
💡 Casos de uso
- Generar diagramas de arquitectura y flowcharts de sistemas a partir de descripciones
- Crear wireframes de UI y mockups mediante lenguaje natural
- Construir diagramas de secuencia y flujos de proceso para documentación
- Exportar diagramas como PNG o SVG para presentaciones y documentación
👍 Ventajas
- ✓ No requiere API key — funciona localmente sin configuración
- ✓ Produce diagramas con el estilo distintivo dibujado a mano de Excalidraw
- ✓ Múltiples formatos de exportación (PNG, SVG, nativo de Excalidraw)
- ✓ Instalación simple vía npx para uso inmediato
👎 Desventajas
- ✗ Diagramas complejos pueden necesitar refinamiento manual en el editor de Excalidraw
- ✗ Limitado a tipos de diagramas 2D — sin 3D ni gráficos avanzados
- ✗ La calidad del resultado depende de qué tan precisamente describas el diagrama
🔧 Herramientas expuestas (5 herramientas)
| Tool | Categoría | Descripción |
|---|---|---|
| create_diagram | creation | Crear un nuevo diagrama Excalidraw a partir de una descripción |
| create_flowchart | creation | Generar un flowchart a partir de una descripción estructurada de pasos y conexiones |
| add_element | editing | Añadir formas, texto, flechas u otros elementos al canvas |
| modify_element | editing | Actualizar propiedades de elementos existentes (posición, tamaño, color, texto) |
| export_image | export | Exportar el diagrama como PNG, SVG o formato Excalidraw |
⚡ Instalación
Requisitos previos:
- • Node.js v18+
Consulta la documentación de Claude Code para configurar este MCP server.
💡 Consejos y trucos
Sé específico sobre la dirección del layout (arriba-abajo, izquierda-derecha) al crear flowcharts. Usa create_flowchart para patrones de diagramas comunes y create_diagram para layouts libres.
🔄 Alternativas
Info rápida
- Autor
- pinkpixel-dev
- Licencia
- MIT
- Runtime
- Node.js 18+
- Transporte
- stdio
- Categoría
- design
- Dificultad
- Principiante
- Auto-hospedable
- ✅
- Auth
- —
- Docker
- —
- Versión
- latest
- Actualizado
- 28 feb 2026
Compatibilidad con clientes
- ✅ Claude Code
- ✅ Cursor
- ✅ VS Code Copilot
- ❓ Gemini CLI
- ✅ Windsurf
- ✅ Cline
- ❓ JetBrains AI
- ❓ Warp
Plataformas
🍎 macOS 🐧 Linux 🪟 Windows