Excalidraw Architect MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Layout automático — sin posicionamiento manual
Swimlanes, clusters, flujos estilo secuencia
Genera .json de Excalidraw (editable) y PNG (con cairo opcional)
Multiplicador de resolución configurable para PNGs nítidos
Local — sin SaaS, sin telemetría

Demo en vivo

Cómo se ve en la práctica

excalidraw-architect-mcp.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Excalidraw Architect MCP

Generar un diagrama de arquitectura para un design doc

👤 Ingenieros escribiendo design docs ⏱ ~10 min beginner

Cuándo usarlo: Tu design doc necesita un diagrama del sistema y no quieres pasar una hora en Excalidraw.

Requisitos previos

Excalidraw (web o desktop) — excalidraw.com — pega el output .json

Flujo

Describir

Genera un diagrama de Excalidraw: API gateway → servicio auth → servicio usuarios y servicio pedidos → Postgres. Añade una caché Redis entre la API y el servicio usuarios.✓ Copiado

→ .json de Excalidraw devuelto
Refinar

Añade un agente de logging sidecar en cada servicio. Agrupa los servicios en un cluster 'core'.✓ Copiado

→ Diagrama actualizado con cluster + sidecars
Exportar

Renderiza a PNG a 3x y guarda en /docs/arch.png.✓ Copiado

→ PNG escrito

Resultado: Diagrama listo para el doc en 2 minutos en lugar de 30.

Errores comunes

Demasiados nodos — el diagrama se vuelve ilegible — Pide primero clusters y un nivel de abstracción mayor

Combinar con: filesystem

Visualizar el flujo de llamadas a través de una base de código

👤 Ingenieros revisando código desconocido ⏱ ~5 min beginner

Cuándo usarlo: Recorriste una petición — ahora quieres una imagen.

Flujo

Describir lo que viste

Diagrama un flujo de petición: handler HTTP → validador → servicio → repo → BD. Muestra la ruta de error de validación como bifurcación.✓ Copiado

→ Diagrama estilo secuencia

Resultado: Una imagen que vale 200 palabras en la descripción de tu PR.

Errores comunes

Confusión entre diagrama de secuencia y diagrama de componentes — Sé explícito — 'diagrama de secuencia' o 'diagrama de componentes'

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

excalidraw-architect-mcp + filesystem

Guardar diagramas versionados junto a los design docs

Guarda el .excalidraw.json junto al doc y vuelve a renderizar en /docs/arch.png.✓ Copiado

excalidraw-architect-mcp + github

Adjuntar diagramas a descripciones de PRs

Genera el diagrama e inserta el PNG en la descripción del PR #1234.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
generate_diagram	description, layout?	Diagrama inicial desde un prompt	free
modify_diagram	json, instruction	Ediciones iterativas	free
to_png	json, scale?	Insertar en un doc	free

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Local — ninguna
Tokens por llamada: 300–2000
Monetario: Gratis
Consejo: Itera con modify_diagram en lugar de regenerar desde cero

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: Local file write

Almacenamiento de credenciales: Ninguno

Salida de datos: Ninguno — completamente local

Resolución de problemas

Errores comunes y soluciones

La exportación a PNG falla

Instala la dependencia cairo opcional: pip install excalidraw-architect-mcp[png]

El layout se ve apretado

Pide agrupación en clusters o un conjunto de nodos más pequeño

Excalidraw rechaza la importación

El schema JSON puede estar ligeramente desactualizado; pide a Claude que lo valide contra el schema más reciente de Excalidraw

Alternativas

Excalidraw Architect MCP vs otros

Alternativa	Cuándo usarla	Contrapartida
Mermaid via MCPs de Mermaid	Quieres diagramas en texto primero, controlados por versiones	Menos personalizable visualmente
Dibujado a mano en Excalidraw	Te gusta y tienes tiempo	Lento

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills