excalidraw-skill MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Five diagram modes with specialized layout rules (flowchart, architecture, sequence, mind map, swimlane)
Auto-invokes when Claude detects architecture-worthy discussions
Three export paths: Kroki (curl, zero-install), local CLI (PNG/SVG), editable .excalidraw
Accepts Chinese or English natural-language input
Hand-drawn aesthetic avoids the sterile-looking AI diagram problem

Demo en vivo

Cómo se ve en la práctica

excalidraw-skill.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-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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

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

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/excalidraw-skill",
          "~/.claude/skills/excalidraw-skill"
        ]
      }
    }
  }
}

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

claude mcp add excalidraw-skill -- git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill

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

Casos de uso

Usos del mundo real: excalidraw-skill

Sketch a microservices architecture diagram from a prose description

👤 Engineers writing design docs ⏱ ~10 min beginner

Cuándo usarlo: You're writing an RFC and want a diagram without opening a separate tool.

Requisitos previos

Skill cloned to ~/.claude/skills/excalidraw-skill — git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill
Network access to kroki.io (zero-install path) — No setup if outbound HTTPS works

Flujo

Describe the system

Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ Copiado

→ Claude generates layout + exports an SVG via Kroki
Tweak and re-export

Add Redis in front of the product service and regenerate.✓ Copiado

→ Updated diagram with Redis inserted, layout re-balanced
Save editable version

Save as .excalidraw so I can edit it on excalidraw.com.✓ Copiado

→ File saved to CWD

Resultado: A hand-drawn-style architecture diagram in your doc in under 5 minutes.

Errores comunes

Diagram is cluttered for 10+ components — Ask Claude to group by tier first; the skill has layout rules for that

Combinar con: filesystem

Generate a sequence diagram from an API interaction you just debugged

👤 Backend engineers documenting flows for teammates ⏱ ~10 min beginner

Cuándo usarlo: You finally figured out the 5-service OAuth dance and want to document it.

Flujo

Paste the log or describe the flow

Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ Copiado

→ Sequence diagram with correct arrows and return messages
Refine

Add the error path when the IdP returns 401.✓ Copiado

→ Alternative flow rendered distinctly

Resultado: A sequence diagram you can drop into the PR description.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

excalidraw-skill + filesystem

Save generated diagrams directly into your docs folder

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ Copiado

excalidraw-skill + github

Attach the diagram to a PR by committing it alongside the spec

Create the diagram, commit to docs/, and reference it in the PR body.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
generate_flowchart	process description	Process has decision points and sequential steps	0 via Kroki, 0 local
generate_architecture	components + relationships	System has tiers or service boundaries	0
generate_sequence	actors + messages	Documenting a time-ordered interaction	0
export_png	diagram ID	Need rasterized image for docs that don't support SVG	0 (requires local CLI)

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Kroki has no explicit quota but don't hammer it
Tokens por llamada: Diagram specs are compact (<2k tokens typically)
Monetario: Free — skills are local files. Kroki is free.
Consejo: Use Kroki for one-offs, install excalidraw-brute-export-cli only if you need offline.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: No credentials — pure prompts

Salida de datos: Kroki path sends your diagram spec to kroki.io. Local CLI path sends nothing.

If your diagrams leak system internals, use the local CLI path instead of Kroki.

Resolución de problemas

Errores comunes y soluciones

Skill not invoked when you ask for a diagram

Mention 'excalidraw' or 'diagram' explicitly; or verify the clone exists.

Verificar: ls ~/.claude/skills/excalidraw-skill/SKILL.md

SKILL.md frontmatter wrong

Re-clone; the frontmatter drives auto-activation.

Verificar: head ~/.claude/skills/excalidraw-skill/SKILL.md

Wrong trigger keywords — Claude writes Mermaid instead

Say 'excalidraw' explicitly; 'draw a diagram' alone can pick other tools.

Alternativas

excalidraw-skill vs otros

Alternativa	Cuándo usarla	Contrapartida
Mermaid via markdown	Your docs already render Mermaid natively (GitHub, etc.)	No hand-drawn aesthetic, less layout control
drawio via desktop app	You want click-heavy manual layout	Not agent-driven

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills