Excalidraw Architect MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Auto-Layout — keine manuelle Platzierung
Swimlanes, Cluster, Sequence-ähnliche Flows
Gibt Excalidraw .json (bearbeitbar) und PNG aus (mit optionalem cairo)
Konfigurierbarer Auflösungsmultiplikator für gestochen scharfe PNGs
Lokal — kein SaaS, keine Telemetrie

Live-Demo

In der Praxis

excalidraw-architect-mcp.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-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

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

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

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

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

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

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

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

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

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

Anwendungsfälle

Praxisnahe Nutzung: Excalidraw Architect MCP

Architekturdiagramm für ein Design-Dokument erstellen

👤 Ingenieure, die Design-Dokumente schreiben ⏱ ~10 min beginner

Wann einsetzen: Dein Design-Dokument braucht ein Systemdiagramm und du willst keine Stunde in Excalidraw verbringen.

Voraussetzungen

Excalidraw (Web oder Desktop) — excalidraw.com — .json-Ausgabe einfügen

Ablauf

Beschreiben

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ Kopiert

→ Excalidraw .json zurückgegeben
Verfeinern

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ Kopiert

→ Aktualisiertes Diagramm mit Cluster + Sidecars
Exportieren

Render to PNG at 3x and save to /docs/arch.png.✓ Kopiert

→ PNG geschrieben

Ergebnis: Dokumentfertiges Diagramm in 2 Minuten statt 30.

Fallstricke

Zu viele Knoten — Diagramm wird unleserlich — Erst Cluster und höheren Abstraktionsgrad anfordern

Kombinieren mit: filesystem

Den Call-Flow durch eine Codebasis visualisieren

👤 Ingenieure, die unbekannten Code begutachten ⏱ ~5 min beginner

Wann einsetzen: Du bist einen Request durchgegangen — jetzt willst du ein Bild davon.

Ablauf

Gesehenes beschreiben

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ Kopiert

→ Sequence-ähnliches Diagramm

Ergebnis: Bild, das 200 Wörter in deiner PR-Beschreibung ersetzt.

Fallstricke

Verwechslung von Sequence- und Box-and-Arrow-Diagramm — Explizit sagen — 'Sequenzdiagramm' oder 'Komponentendiagramm'

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

excalidraw-architect-mcp + filesystem

Versionierte Diagramme neben Design-Dokumenten speichern

Save the .excalidraw.json next to the doc and re-render to /docs/arch.png.✓ Kopiert

excalidraw-architect-mcp + github

Diagramme an PR-Beschreibungen anhängen

Generate the diagram and embed the PNG in PR #1234's description.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
generate_diagram	description, layout?	Erstes Diagramm aus einem Prompt	free
modify_diagram	json, instruction	Iterative Änderungen	free
to_png	json, scale?	In ein Dokument einbetten	free

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Lokal — keines
Tokens pro Aufruf: 300–2000
Kosten in €: Kostenlos
Tipp: Per modify_diagram iterieren statt von Grund auf neu generieren

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: Local file write

Credential-Speicherung: Keine

Datenabfluss: Keine — vollständig lokal

Fehlerbehebung

Häufige Fehler und Lösungen

PNG export fails

Optionale cairo-Abhängigkeit installieren: pip install excalidraw-architect-mcp[png]

Layout looks crowded

Cluster-Gruppierung oder kleinere Knotenanzahl anfordern

Excalidraw refuses to import

JSON-Schema könnte leicht abweichen; Claude gegen das aktuelle Excalidraw-Schema validieren lassen

Alternativen

Excalidraw Architect MCP vs. andere

Alternative	Wann stattdessen	Kompromiss
Mermaid via mermaid MCPs	Du willst text-first, versionskontrollierte Diagramme	Weniger visuell anpassbar
Manuelles Zeichnen in Excalidraw	Du genießt das und hast Zeit	Langsam

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen