Draw.io MCP-Server

Lass uns ein wenig „Vibe Diagramming“ mit dem am weitesten verbreiteten Diagramm-Tool namens Draw.io (Diagrams.net) betreiben.

Wichtige Highlights

• Import und Export von Diagrammen aus/in XML, SVG (mit eingebettetem XML) oder PNG (mit eingebettetem XML)

• Steuerung der Kanten-Geometrie mit Wegpunkten und automatischem Self-Connector-Routing

• Eltern-Kind-Beziehungen für verschachtelte Formen und Gruppierungen

• Vereinheitlichter Server und Erweiterung im selben Mono-Repo

• Integrierter Draw.io-Editor – keine Browser-Erweiterung erforderlich

• MCP-Server, der es KI-Agenten ermöglicht, Draw.io-Diagramme zu steuern

• Programmgesteuerte Diagrammerstellung, Inspektion und Änderung über MCP-Tools

• Ebenenverwaltung für komplexe Diagramme

• Funktioniert mit jedem MCP-Client (Claude Desktop, Claude Code, Zed, Codex, etc.)

Einführung

Der Draw.io MCP-Server bringt Draw.io-Diagrammfunktionen zu KI-Agenten. Er stellt MCP-Tools bereit, die Diagrammelemente erstellen, lesen, aktualisieren und löschen können – so können KI-Assistenten automatisch Architekturdiagramme, Flussdiagramme und visuelle Dokumentationen erstellen.

Zwei Möglichkeiten zur Nutzung:

1. Integrierter Editor – Der Server hostet Draw.io direkt, zugänglich über Ihren Browser

2. Browser-Erweiterung – Verbindung zu Draw.io, das in Ihrem Browser läuft, über eine Erweiterung

Anforderungen

• Node.js (v20 oder höher) – Laufzeitumgebung für den MCP-Server

• MCP-Client – Claude Desktop, Claude Code, Zed, Codex, OpenCode oder ein beliebiger MCP-kompatibler Host

Für den integrierten Editor

Keine zusätzlichen Anforderungen – läuft sofort mit dem --editor-Flag.

Für die Browser-Erweiterung

• Browser-Erweiterung – drawio-mcp-extension

• Draw.io in Ihrem Browser geöffnet

Optional

• pnpm – Bevorzugter Paketmanager (npm funktioniert ebenfalls)

Schnellstart

1. Konfigurieren Sie Ihren MCP-Host

Fügen Sie den Server zu Ihrer MCP-Client-Konfiguration hinzu:

Bearbeiten Sie ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

Fügen Sie dies zu ~/.config/zed/settings.json hinzu:

{
  "context_servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"],
      "env": {}
    }
  }
}

Bearbeiten Sie ~/.codex/config.toml:

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

Fügen Sie dies zu opencode.json in Ihrem Projektstammverzeichnis oder ~/.config/opencode/opencode.json hinzu:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

Für andere MCP-Clients und detaillierte Konfigurationen (einschließlich pnpm-Optionen), siehe Konfiguration.

2. Öffnen Sie den Editor

Nachdem Sie Ihren MCP-Host neu gestartet haben, öffnen Sie: http://localhost:3000/

3. Beginnen Sie mit dem Diagramm-Erstellen

Beispiel-Prompts, die Sie ausprobieren können:

"Erstelle ein ereignisgesteuertes Architekturdiagramm, das eine Nachrichtenwarteschlange mit Produzenten, Konsumenten und drei Backend-Diensten zeigt"

"Zeichne ein CRUD-API-Diagramm mit einer Datenbank, einem API-Gateway und vier Microservices mit ihren Endpunkten"

"Füge eine neue Ebene namens 'Hintergrund' hinzu und verschiebe alle dekorativen Elemente dorthin, erstelle dann eine neue Ebene für Anmerkungen"

Ihr KI-Assistent kann das Diagramm nun mithilfe von MCP-Tools steuern.

Funktionen

Der Server bietet MCP-Tools für:

• Diagramminspektion – Lesen von Formen, Ebenen und Zelleneigenschaften

• Diagrammmodifikation – Hinzufügen/Bearbeiten/Löschen von Formen, Kanten und Beschriftungen

• Ebenenverwaltung – Erstellen, Wechseln und Organisieren von Ebenen

Siehe Tools-Referenz für die vollständige Liste der verfügbaren Tools.

Installation

Der Server läuft als Teil Ihres MCP-Hosts. Eine detaillierte Konfiguration für alle unterstützten Clients (Claude Desktop, Claude Code, Zed, Codex, oterm) einschließlich npm- und pnpm-Optionen finden Sie unter Konfiguration.

Alternative: Browser-Erweiterung

Anstelle des integrierten Editors können Sie die Browser-Erweiterung verwenden, um eine Verbindung zu Draw.io herzustellen, das in Ihrem Browser läuft. Dies funktioniert mit oder ohne das --editor-Flag.

1. Öffnen Sie Draw.io in Ihrem Browser

2. Installieren Sie die Draw.io MCP-Browser-Erweiterung:

   • Chrome Web Store

   • Firefox Add-ons

3. Stellen Sie sicher, dass die Erweiterung verbunden ist (grünes Signal-Overlay auf dem Symbol)

Konfiguration ohne --editor:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server"]
    }
  }
}

Weitere Details finden Sie in der Erweiterungsdokumentation.

Verwandte Ressourcen

Konfiguration – CLI-Flags und erweiterte Optionen

Tools-Referenz – Vollständige Dokumentation der MCP-Tools

Fehlerbehebung

Prompt-Beispiele

Mitwirken

Architektur

Entwicklung

Star-Verlauf

Bewertungen