Excalidraw Architect MCP

Es ist ein ständiger Kampf, unbekannte und komplexe Codebasen zu verstehen – man muss die kognitive Überlastung bewältigen und sich vorstellen, wie alles zusammenpasst.

Das Problem

Wenn Sie sich in eine Codebasis einarbeiten, ein neues System entwerfen oder eine bestehende Architektur dokumentieren, vermittelt ein visuelles Diagramm in Sekunden, was seitenlanger Text nicht kann. Aber die heutigen Optionen sind nicht besonders gut. Mermaid-Diagramme sind schnell erstellt, haben aber begrenzte Möglichkeiten – man kann einen Knoten nicht ziehen, um ihn neu zu positionieren, oder Komponenten visuell gruppieren. Excalidraw löst diese Probleme, aber wenn LLMs versuchen, Excalidraw direkt zu generieren, halluzinieren sie Koordinaten – Boxen überlappen sich, Pfeile verheddern sich, und am Ende korrigieren Sie das Diagramm manuell.

Related MCP server: Excalidraw MCP App

Die Lösung

excalidraw-architect-mcp trennt das Was vom Wo – die KI konzentriert sich auf die Struktur, die Engine kümmert sich um die Pixel-Mathematik.

Ihr LLM beschreibt die Komponenten und Verbindungen, und das MCP übernimmt Layout, Styling und Rendering mithilfe eines geeigneten Graphen-Layout-Algorithmus. Über 50 Technologien (Kafka, PostgreSQL, Redis usw.) werden automatisch gestylt, Sie können Diagramme iterativ mit natürlicher Sprache bearbeiten („füge einen Cache vor der DB hinzu“), und es läuft vollständig offline in Cursor/Windsurf – keine API-Schlüssel erforderlich.

• Perfekte Layouts bei jedem Mal – Sugiyama-Algorithmus mit adaptivem Abstand; keine überlappenden Boxen

• Architekturbewusstes Styling – sagen Sie „Kafka“ und erhalten Sie einen Stream-gestylten Knoten, kein generisches Rechteck

• Sprechen Sie mit Ihren Diagrammen – fügen Sie Komponenten zu einem bestehenden Diagramm hinzu, entfernen oder verkabeln Sie sie neu mit natürlicher Sprache

• Hub-Knoten-Visualisierung – Gateways und Load Balancer dehnen sich automatisch aus, um ihre verbundenen Dienste zu umspannen

• Export als SVG & PNG – konvertieren Sie jede .excalidraw-Datei in ein portables Bild, kein Browser erforderlich

Sehen Sie es in Aktion

Jeder Frame unten wurde vollständig von der KI unter Verwendung dieses MCP generiert – null manuelle Positionierung.

E-Commerce-Plattform-Architektur

Zahlungsabwicklungsfluss

Anwendungsfälle

• Einarbeitung in eine neue Codebasis – zeigen Sie auf einen Microservice und erhalten Sie ein High-Level-Architekturdiagramm, ohne eine einzige Zeile Code zu lesen. Zeigen Sie auf eine Reihe von Klassen für ein Low-Level-Flussdiagramm, wenn Sie Details benötigen.

• Brainstorming und Systemdesign – wenn Sie ein neues System auf einem Whiteboard entwerfen oder über Kompromisse diskutieren, bitten Sie die KI, die Architektur währenddessen zu visualisieren. Iterieren Sie, indem Sie „füge hier einen Cache hinzu“ oder „tausche Kafka gegen SQS“ sagen, anstatt alles von Grund auf neu zu zeichnen.

• Dokumentation, die aktuell bleibt – legen Sie die .excalidraw-Datei in Ihr Repo und aktualisieren Sie sie mit natürlicher Sprache, während sich das System weiterentwickelt. Keine veralteten Diagramme von vor sechs Sprints mehr.

Schnellstart

Installation

pip install excalidraw-architect-mcp

Für PNG-Export-Unterstützung (SVG funktioniert sofort):

pip install excalidraw-architect-mcp[png]

Oder führen Sie es ohne Installation aus (erfordert uv):

uvx excalidraw-architect-mcp

MCP in Ihrer IDE konfigurieren

Cursor – Fügen Sie dies zu .cursor/mcp.json hinzu:

{
  "mcpServers": {
    "excalidraw-architect": {
      "command": "excalidraw-architect-mcp",
      "transport": "stdio"
    }
  }
}

Claude Code – Führen Sie diesen Einzeiler aus:

claude mcp add-json excalidraw-architect '{"type":"stdio","command":"excalidraw-architect-mcp"}' --scope user

Oder fügen Sie es manuell zu .mcp.json in Ihrem Projektstammverzeichnis hinzu:

{
  "mcpServers": {
    "excalidraw-architect": {
      "type": "stdio",
      "command": "excalidraw-architect-mcp"
    }
  }
}

Windsurf / Andere IDEs – Gleiches Muster; verweisen Sie auf den excalidraw-architect-mcp-Befehl über stdio.

Installieren Sie die Diagramm-Design-Fähigkeit (empfohlen)

Dieses Repo enthält eine Diagram Design Skill, die der KI beibringt, wie Diagramme für beste Ergebnisse strukturiert werden – Knotenanzahl-Limits, Topologieregeln, Richtlinien für Kantenbeschriftungen und gängige Muster.

Für Cursor-Benutzer:

mkdir -p ~/.cursor/skills/excalidraw-diagram-design && \
curl -o ~/.cursor/skills/excalidraw-diagram-design/SKILL.md \
  https://raw.githubusercontent.com/BV-Venky/excalidraw-architect-mcp/main/.skills/excalidraw-diagram-design/SKILL.md

Für andere IDEs: Laden Sie die SKILL.md-Datei herunter und fügen Sie sie zum Prompt-Kontext oder den Systemanweisungen Ihrer IDE hinzu.

Die KI wird die Fähigkeit automatisch aufgreifen und bei der Generierung von Diagrammen anwenden. Fühlen Sie sich frei, die Regeln an Ihre Vorlieben anzupassen – passen Sie Knoten-Limits an, fügen Sie Ihre eigenen Muster hinzu oder passen Sie die Styling-Richtlinien an.

Ein Hinweis zur Diagrammkomplexität: Mit zunehmender Anzahl von Komponenten und Verbindungen werden Diagramme zwangsläufig schwerer zu lesen – das gilt auch für von Menschen handgezeichnete Diagramme, nicht nur für automatisiertes Layout. Für beste Ergebnisse zielen Sie auf 6-15 Knoten in Architekturdiagrammen und 10-25 Knoten in detaillierten Abläufen ab. Wenn Ihr System größer ist, teilen Sie es in mehrere fokussierte Diagramme auf, anstatt alles in eines zu quetschen.

Verwendung

Fragen Sie einfach Ihre KI-IDE ganz natürlich:

"Erstelle ein High-Level-Architekturdiagramm dieser Codebasis"

"Erstelle ein Architekturdiagramm für ein Microservices-System mit einem API-Gateway, Auth-Service, User-Service, Order-Service, PostgreSQL, Redis-Cache und Kafka-Event-Bus"

"Konvertiere dieses Mermaid-Diagramm in ein Excalidraw-Diagramm"

"Füge eine Caching-Ebene zum Order-Service im High-Level-Architekturdiagramm hinzu"

"Exportiere das Architekturdiagramm als SVG"

"Exportiere das Diagramm als PNG mit 3-facher Auflösung"

Die KI ruft das MCP-Tool mit der Beziehungslandkarte auf. Das MCP kümmert sich um Layout, Styling und Ausgabe. Öffnen Sie die resultierende .excalidraw-Datei mit der Excalidraw VS Code-Erweiterung oder ziehen Sie sie in excalidraw.com.

Funktionen

Auto-Layout-Engine

Verwendet den hierarchischen Sugiyama-Layout-Algorithmus mit:

• Adaptive Ebenenabstände – der Abstand passt sich an die Länge der Kantenbeschriftung an

• Hub-Knoten-Dehnung – Gateways/Load Balancer dehnen sich aus, um verbundene Dienste zu umspannen

• Hindernisbewusstes Kanten-Routing – Pfeile krümmen sich um Zwischenknoten, anstatt sie zu durchschneiden

• Stapelung getrennter Komponenten – separate Teilgraphen (z. B. Monitoring-Stack) werden ohne Überlappung platziert

Komponentenbibliothek

Über 50 Technologie-Mappings mit automatischem visuellem Styling:

Zustandsorientierte Bearbeitung

Diagramm-Metadaten sind in der .excalidraw-Datei eingebettet. Fragen Sie die KI:

"Füge einen Redis-Cache vor der Datenbank im bestehenden Diagramm hinzu"

Das MCP liest den aktuellen Zustand, wendet die Änderung an und rendert es mit dem richtigen Layout neu.

Mermaid-Konvertierung

Sie haben bereits ein Mermaid-Flussdiagramm? Konvertieren Sie es:

"Konvertiere dieses Mermaid-Diagramm in Excalidraw" (fügen Sie Ihre Mermaid-Syntax ein)

Bildexport

Exportieren Sie jedes .excalidraw-Diagramm in ein portables Bild – kein Browser, keine Excalidraw-App oder Node.js erforderlich.

• SVG – null zusätzliche Abhängigkeiten; verwendet einen reinen Python-Renderer, der Rechtecke, Ellipsen, Rauten, Text (einschließlich mehrzeiligem Text) und Pfeile mit Pfeilspitzen verarbeitet

• PNG – erfordert das optionale cairosvg-Paket (pip install excalidraw-architect-mcp[png]); unterstützt einen konfigurierbaren Auflösungsmultiplikator (Standard 2×)

"Exportiere das Architekturdiagramm als SVG"

MCP-Tools

Mitwirken

Siehe CONTRIBUTING.md für Details.

Lizenz

MIT – siehe LICENSE.