diagram-mcp

MCP-Server, der Diagramm-als-Code-Text in PNG-Dateien auf Ihrer Festplatte rendert. Kein Browser, kein Netzwerk, kein externer Dienst. Nützlich, um Flussdiagramme zu erzeugen, die Sie in Dokumentationen, Tickets oder READMEs einfügen können.

Werkzeuge

• render_diagram: rendert Code in eine PNG-Datei und gibt den Dateipfad zurück

• preview_diagram: zeichnet das Diagramm als Textgrafik direkt in die Konversation, schreibt keine Datei

• validate_diagram: parst den Code und meldet Fehler mit Zeilennummern, schreibt nichts

• diagram_syntax: die Sprachreferenz

Related MCP server: Vizdown-MCP

Installation

Erfordert Node 20.12+.

git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run build

Registrieren Sie ihn dann bei Claude Code:

claude mcp add diagram --scope user \
  --env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
  -- node "$(pwd)/dist/index.js"

Oder fügen Sie ihn manuell zur .mcp.json / Ihrer Benutzerkonfiguration hinzu:

{
  "mcpServers": {
    "diagram": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
      "env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
    }
  }
}

Starten Sie die Sitzung neu und fordern Sie dann ein Diagramm an. Führen Sie nach dem Ziehen von Änderungen npm run build erneut aus.

Sprache

title "Reward approval flow"
direction TB

node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"

event -> auto
auto -> queue "no"

Formen: rect, rounded, ellipse, diamond, hexagon. Verbindungen: from -> to ["label"] [style=solid|dashed]. Positionen mit at=x,y sind optional. Lassen Sie sie weg, und das Layout platziert die Formen. Rufen Sie diagram_syntax auf, um die vollständige Referenz zu erhalten.

Konfiguration

Alle optional, alle mit Standardwerten. Siehe .env.example. Die gerenderten Dateien werden in DIAGRAM_MCP_OUTPUT_DIR gespeichert (Standard: ~/Documents/diagram-renders). Ein expliziter outputPath muss innerhalb dieses Verzeichnisses oder des Arbeitsverzeichnisses liegen, es sei denn, DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true ist gesetzt.

Entwicklung

npm test          # unit tests
npm run test:e2e  # builds, then drives the server over stdio
npm run verify    # typecheck, test, build, e2e

Der Parser, das Layout und die SVG-Generierung in src/core werden mit einem lokalen Diagrammeditor-Projekt gemeinsam genutzt; npm run check:sync vergleicht sie damit, wenn es im Nachbarverzeichnis ausgecheckt ist.

Lizenz

MIT