Esta página se muestra en inglés. Una traducción al español está en curso.
MCP ConfigsMay 7, 2026·4 min de lectura

Excalidraw MCP — Generate Diagrams from Claude Code

Excalidraw MCP exposes the Excalidraw scene API as MCP server. Claude Code / Cursor draw architecture diagrams, ERDs, flowcharts to a .excalidraw file.

Listo para agents

Staging seguro para este activo

Este activo primero queda en staging. El prompt copiado pide inspeccionar los archivos staged antes de activar scripts, config MCP o config global.

Stage only · 17/100Política: staging
Superficie agent
Cualquier agent MCP/CLI
Tipo
Mcp Config
Instalación
Stage only
Confianza
Confianza: Community
Entrada
Asset
Comando de staging seguro
npx -y tokrepo@latest install fb4ffcf1-7fb2-40fb-9a7e-4b55dc3f694f --target codex

Primero deja archivos en staging; la activación requiere revisar el README y el plan staged.

Introducción

Excalidraw MCP wraps the Excalidraw scene API as a Model Context Protocol server. Claude Code / Cursor / Codex CLI can call excalidraw_create_scene, excalidraw_add_shape, excalidraw_add_arrow to generate architecture diagrams, ERDs, and flowcharts directly into a .excalidraw file. Best for: agents documenting code with diagrams without copy-paste from a separate diagram tool. Works with: Excalidraw 0.17+, any MCP host. Setup time: 3 minutes.


MCP config

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"],
      "env": {
        "EXCALIDRAW_OUTPUT_DIR": "./diagrams"
      }
    }
  }
}

Tools exposed

Tool Behavior
excalidraw_create_scene Start a new .excalidraw file
excalidraw_add_rectangle Box (x, y, w, h, text, color)
excalidraw_add_ellipse Circle/ellipse
excalidraw_add_arrow Arrow connecting two shape IDs
excalidraw_add_text Free text label
excalidraw_export_png Render to PNG (with custom theme)

Example prompt to Claude Code

> Read the architecture from src/. Generate an Excalidraw diagram showing:
  - Frontend (Nuxt) at top
  - API gateway
  - 3 microservices (auth, payments, notifications)
  - Postgres + Redis at bottom
  - Arrows showing typical request flow
  Save to docs/architecture.excalidraw and export PNG.

Claude Code calls the MCP tools step by step, lays out shapes with sensible spacing, and saves both the editable .excalidraw and a .png preview.

Open in Excalidraw

open https://excalidraw.com  # then drag-and-drop the file
# or
excalidraw open ./docs/architecture.excalidraw  # if Excalidraw desktop installed

Use as a CI artifact

Diagrams generated by the MCP server in CI can be attached to PRs as architecture documentation that updates automatically with code changes.


FAQ

Q: Is Excalidraw MCP official? A: Excalidraw the editor is official (excalidraw/excalidraw on GitHub, ~95K stars). The MCP server wrappers are community-built — multiple implementations exist (excalidraw-mcp, excalidraw-mcp-server). They use the official Excalidraw scene format.

Q: Will the diagram be editable in Excalidraw afterwards? A: Yes — the output is a standard .excalidraw JSON file. Open it in Excalidraw web (excalidraw.com) or desktop, edit, save. The agent-generated layout is just a starting point.

Q: Can it draw on top of an existing diagram? A: Yes — pass the existing .excalidraw file and use excalidraw_load_scene first. The agent appends or modifies. Useful for incremental architecture docs.


Quick Use

  1. Add the JSON snippet below to your MCP config (Claude Code: ~/.claude/mcp.json)
  2. Restart your MCP host
  3. Ask the agent to draw a diagram — it calls the Excalidraw MCP tools

Intro

Excalidraw MCP wraps the Excalidraw scene API as a Model Context Protocol server. Claude Code / Cursor / Codex CLI can call excalidraw_create_scene, excalidraw_add_shape, excalidraw_add_arrow to generate architecture diagrams, ERDs, and flowcharts directly into a .excalidraw file. Best for: agents documenting code with diagrams without copy-paste from a separate diagram tool. Works with: Excalidraw 0.17+, any MCP host. Setup time: 3 minutes.


MCP config

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"],
      "env": {
        "EXCALIDRAW_OUTPUT_DIR": "./diagrams"
      }
    }
  }
}

Tools exposed

Tool Behavior
excalidraw_create_scene Start a new .excalidraw file
excalidraw_add_rectangle Box (x, y, w, h, text, color)
excalidraw_add_ellipse Circle/ellipse
excalidraw_add_arrow Arrow connecting two shape IDs
excalidraw_add_text Free text label
excalidraw_export_png Render to PNG (with custom theme)

Example prompt to Claude Code

> Read the architecture from src/. Generate an Excalidraw diagram showing:
  - Frontend (Nuxt) at top
  - API gateway
  - 3 microservices (auth, payments, notifications)
  - Postgres + Redis at bottom
  - Arrows showing typical request flow
  Save to docs/architecture.excalidraw and export PNG.

Claude Code calls the MCP tools step by step, lays out shapes with sensible spacing, and saves both the editable .excalidraw and a .png preview.

Open in Excalidraw

open https://excalidraw.com  # then drag-and-drop the file
# or
excalidraw open ./docs/architecture.excalidraw  # if Excalidraw desktop installed

Use as a CI artifact

Diagrams generated by the MCP server in CI can be attached to PRs as architecture documentation that updates automatically with code changes.


FAQ

Q: Is Excalidraw MCP official? A: Excalidraw the editor is official (excalidraw/excalidraw on GitHub, ~95K stars). The MCP server wrappers are community-built — multiple implementations exist (excalidraw-mcp, excalidraw-mcp-server). They use the official Excalidraw scene format.

Q: Will the diagram be editable in Excalidraw afterwards? A: Yes — the output is a standard .excalidraw JSON file. Open it in Excalidraw web (excalidraw.com) or desktop, edit, save. The agent-generated layout is just a starting point.

Q: Can it draw on top of an existing diagram? A: Yes — pass the existing .excalidraw file and use excalidraw_load_scene first. The agent appends or modifies. Useful for incremental architecture docs.


Source & Thanks

Built by Excalidraw + community MCP servers. Licensed under MIT.

excalidraw/excalidraw — ⭐ 95,000+

🙏

Fuente y agradecimientos

Built by Excalidraw + community MCP servers. Licensed under MIT.

excalidraw/excalidraw — ⭐ 95,000+

Discusión

Inicia sesión para unirte a la discusión.
Aún no hay comentarios. Sé el primero en compartir tus ideas.

Activos relacionados