Excalidraw Diagram Skill — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

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

In der Praxis

excalidraw-diagram-skill.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren 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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

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
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.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 nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Excalidraw Diagram Skill

Generate an editable architecture diagram from a description

👤 Engineers documenting systems ⏱ ~15 min intermediate

Wann einsetzen: You want a diagram you can iterate on, not a static PNG.

Voraussetzungen

Server/skill installed and authenticated — See repo README

Ablauf

Describe the system

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

→ A .excalidraw file with labeled boxes + arrows
Iterate

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

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

Ergebnis: A diagram you actually edit, not redraw.

Fallstricke

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.

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: See provider docs for rate limits
Tokens pro Aufruf: Varies by tool
Kosten in €: See repo README for pricing details
Tipp: Cache tool results and avoid repeated identical calls.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Use environment variables; never commit secrets

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

Fehlerbehebung

Häufige Fehler und Lösungen

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.

Prüfen: 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.

Prüfen: Reload the file

Alternativen

Excalidraw Diagram Skill vs. andere

Alternative	Wann stattdessen	Kompromiss
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

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen