Excalidraw Diagram Skill — Install & Live Demo

Why use it

Key features

Outputs native .excalidraw JSON (fully editable)
Pre-baked layouts for architecture, sequence, flow, mind map
Smart auto-layout to avoid label overlap
Annotation arrows with proper anchoring
Works in any agent (Claude Code, Cursor, Codex)

Live Demo

What it looks like in practice

excalidraw-diagram-skill.replay ▶ ready

0/0

Install

Pick your client

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

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

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

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

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

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

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

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

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

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

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

Add to context_servers. Zed hot-reloads on save.

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

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Excalidraw Diagram Skill

Generate an editable architecture diagram from a description

👤 Engineers documenting systems ⏱ ~15 min intermediate

When to use: You want a diagram you can iterate on, not a static PNG.

Prerequisites

Server/skill installed and authenticated — See repo README

Flow

Describe the system

Using the Excalidraw skill, draw our auth flow: SPA → API gateway → auth-service → Postgres → emit event to Kafka.✓ Copied

→ A .excalidraw file with labeled boxes + arrows
Iterate

Add a Redis cache between API gateway and auth-service.✓ Copied

→ Updated file with the new node + correct re-routed arrows

Outcome: A diagram you actually edit, not redraw.

Pitfalls

For very large diagrams (>30 nodes) auto-layout struggles — For very large diagrams (>30 nodes) auto-layout struggles — split into multiple diagrams or group by concern.

Cost & Limits

What this costs to run

API quota: See provider docs for rate limits
Tokens per call: Varies by tool
Monetary: See repo README for pricing details
Tip: Cache tool results and avoid repeated identical calls.

Security

Permissions, secrets, blast radius

Credential storage: Use environment variables; never commit secrets

Data egress: Tool calls go to the provider's API as documented

Troubleshooting

Common errors and fixes

file doesn't open in Excalidraw

Make sure the file ends with .excalidraw and is valid JSON. The skill outputs both, but check the extension.

Verify: Open at excalidraw.com → load file

arrows pointing wrong way

Excalidraw's arrow startBinding/endBinding matters. The skill's templates handle it, but custom edits can break it.

Verify: Reload the file

Alternatives

Excalidraw Diagram Skill vs others

Alternative	When to use it instead	Tradeoff
BV-Venky/excalidraw-architect-mcp	You want it as an MCP server instead of a skill	MCP is heavier setup; skill is just a folder

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills