draw.io

MCP-Server von draw.io (JGraph)

Create draw.io diagrams from XML or Mermaid and render them inline in chat, with search across 10,000+ shapes.

Ohne Anmeldung (Kein Konto und kein Schlüssel nötig)Streamable HTTP

Mit draw.io verbinden

Keine Anmeldung nötig. Verbinde dich mit der eigenen URL von draw.io:

https://mcp.draw.io/mcp

Füg sie in jeden Client ein, der Remote-MCP-Server unterstützt. Dein Client spricht direkt mit draw.io (JGraph), nicht über mcp.tc.

Diesen Server teilen

Öffnet diese Seite, mit der URL und den Einrichtungsschritten.

mcp.tc/i/drawio

Über den Server

The official draw.io server lets an assistant create diagrams and show them as interactive draw.io views inside the conversation. create_diagram accepts draw.io XML or Mermaid syntax. search_shapes looks up exact style strings in about 10,000 built-in stencils (cloud, network, Kubernetes, BPMN, electrical) and the draw.io icon service.

It runs as a hosted endpoint at https://mcp.draw.io/mcp over streamable HTTP and needs no sign-in. Inline rendering needs a host that supports MCP Apps. Other hosts get the XML as text. A local alternative is available through npx @drawio/mcp, which opens diagrams in the draw.io editor.

Was du damit machen kannst

  • Create interactive diagrams from draw.io XML
  • Create diagrams from Mermaid syntax
  • Search about 10,000 built-in shapes by keyword
  • Find brand and concept icons through the icon service
  • Apply optional ELK auto-layout and libavoid edge routing
  • Open rendered diagrams in draw.io for editing

Tools 2

  • create_diagramNur lesen

    Create and display an interactive draw.io diagram from draw.io XML or Mermaid syntax.

  • search_shapesNur lesen

    Search the draw.io shape library by keyword and return style strings, sizes and titles.

Am 3. Okt. 2026 vom laufenden Server gelesen. Nur lesen, Schreibt und Kann löschen sind Hinweise, die der Server selbst angibt; dein Client entscheidet, ob er vor dem Ausführen eines Tools nachfragt.

Beispiel-Prompts

  • Draw a flowchart of our login and password reset process.

  • Create an AWS architecture diagram with a load balancer, EC2 and RDS.

  • Make a sequence diagram of an OAuth authorization code flow.

  • Find a Kubernetes pod shape and add it to my network diagram.

Einrichtung

Jeder Client verbindet sich mit mcp.draw.io. Wähl deinen; die Seite merkt sich deine Wahl.

Claude Code

  1. Führe das in einem Terminal in deinem Projektordner aus:
claude mcp add --transport http drawio https://mcp.draw.io/mcp
  1. Starte Claude Code und tippe /mcp. drawio sollte als verbunden angezeigt werden.

Ergänze --scope user, damit er in jedem Projekt verfügbar ist, nicht nur in diesem.

Claude Desktop

  1. Öffne Settings → Connectors und klick auf Add custom connector.
  2. Nenne ihn draw.io und füge diese URL ein:
https://mcp.draw.io/mcp
  1. Klick auf Add. Seine Tools erscheinen im Tool-Menü des Chats.

Die JSON-Konfigurationsdatei von Claude Desktop startet nur lokale Server. Remote-Server laufen über Connectors, und Connectors, die du auf claude.ai hinzufügst, erscheinen auch hier.

claude.ai

  1. Öffne das Connector-Formular auf claude.ai. Dieser Button füllt Name und URL für dich aus:
  1. Prüfe, dass die URL https://mcp.draw.io/mcp lautet, und klick auf Add.
  2. Schalte ihn in einem Chat über das Tool-Menü ein.

Kostenlose Pläne erlauben einen benutzerdefinierten Connector. In Team- und Enterprise-Plänen fügt ihn ein Owner unter Organization settings → Connectors hinzu.

ChatGPT

  1. Öffne auf chatgpt.com Settings → Security and login und schalte Developer mode ein.
  2. Geh zu chatgpt.com/plugins und klick auf +, um eine App für einen Remote-MCP-Server anzulegen.
  3. Füge https://mcp.draw.io/mcp als Server-URL ein und wähle No authentication.

Der Entwicklermodus steht im Web für Plus-, Pro-, Business-, Enterprise- und Education-Konten zur Verfügung.

Cursor

Oder trag ihn von Hand in ~/.cursor/mcp.json (alle Projekte) oder .cursor/mcp.json (dieses Projekt) ein:

mcp.json
{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

VS Code

Oder aus einem Terminal:

code --add-mcp '{"name":"drawio","type":"http","url":"https://mcp.draw.io/mcp"}'

Oder committe ihn ins Repository in .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

Devin Desktop

  1. Füge ihn zu ~/.config/devin/mcp_config.json (macOS und Linux) oder %APPDATA%\devin\mcp_config.json (Windows) hinzu:
mcp_config.json
{
  "mcpServers": {
    "drawio": {
      "serverUrl": "https://mcp.draw.io/mcp"
    }
  }
}
  1. Aktualisiere die Liste der MCP-Server in Cascade.

Devin Desktop ist der neue Name von Windsurf. Für Remote-Server liest es serverUrl (oder url).

Codex

codex mcp add drawio --url https://mcp.draw.io/mcp

Oder bearbeite ~/.codex/config.toml direkt:

config.toml
[mcp_servers.drawio]
url = "https://mcp.draw.io/mcp"

Gemini CLI

gemini mcp add --transport http drawio https://mcp.draw.io/mcp

Damit fügst du ihn dem aktuellen Projekt hinzu. Ergänze -s user, um ihn überall zu nutzen.

Jeder Client

Die meisten Clients akzeptieren diese Form. Manche nennen das URL-Feld anders: serverUrl in Devin Desktop, httpUrl in der Einstellungsdatei von Gemini CLI.

{
  "mcpServers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

Zed legt Server in seinen Einstellungen unter context_servers ab. Cline braucht "type": "streamableHttp", sonst nimmt es SSE an.

Dein Client startet nur lokale Server? Binde ihn mit npx -y mcp-remote https://mcp.draw.io/mcp an.

Häufige Fragen

Kann ich mcp.tc/i/drawio in meinen MCP-Client einfügen?

Nein. mcp.tc-Links sind Seiten, keine Server-Adressen. Verbinde dich mit https://mcp.draw.io/mcp, damit dein Client direkt mit draw.io spricht. Der Quick-Link ist zum Teilen da: Er öffnet diese Seite, mit Einrichtungsschritten für jeden Client.

Braucht draw.io einen API-Schlüssel oder eine Anmeldung?

Nein. draw.io verlangt weder Konto noch Schlüssel.

Ist draw.io ein Remote- oder ein lokaler Server?

Remote. draw.io (JGraph) hostet ihn unter https://mcp.draw.io/mcp, und er spricht Streamable HTTP. Es gibt nichts zu installieren.

Was kann draw.io?

Er hat 2 Tools: create_diagram und search_shapes.

Welche Clients können ihn nutzen?

Jeder Client, der Remote-MCP-Server unterstützt: Claude Code, Claude Desktop, claude.ai, ChatGPT im Entwicklermodus, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed und andere. Die Einrichtungsschritte decken jeden davon ab.

Wer hat diese Seite geschrieben?

Der Roboter von mcp.tc hat die eigenen Metadaten von draw.io (seinen MCP-Handshake, seine Tool-Liste und öffentliche Seiten) gelesen, und ein KI-Modell hat daraus den Text entworfen. Ein Mensch prüft alles, was die Prüfungen nicht bestätigen können. Der Text kann trotzdem falsch sein; wenn dir ein Fehler auffällt, nutze Eintrag melden auf dieser Seite.

Einbinden

Zeig draw.io in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt die eigene URL des Servers und setzt keine Cookies. So funktionieren Einbindungen

README-Badge

Badge-Vorschau, hellBadge-Vorschau, dunkel
Markdown
[![draw.io on mcp.tc](https://mcp.tc/i/drawio/badge.svg)](https://mcp.tc/i/drawio)
HTML
<a href="https://mcp.tc/i/drawio"><img src="https://mcp.tc/i/drawio/badge.svg" alt="draw.io on mcp.tc" height="20"></a>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

HTML
<script src="https://mcp.tc/w/drawio.js" async></script>

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine Cookies.

iframe

HTML
<iframe src="https://mcp.tc/embed/drawio" title="draw.io on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, die eigene URL des Servers, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

https://mcp.tc/i/drawio.json

Was jedes Feld bedeutet

mcp.tc ist nicht mit draw.io (JGraph) verbunden. Diese Seite entstand aus den öffentlichen Metadaten von draw.io, zuletzt geprüft am 3. Okt. 2026, und ein KI-Modell hat die Beschreibung geschrieben, sie kann also Fehler enthalten. Namen und Marken gehören ihren Inhabern. Stimmt etwas nicht? Eintrag melden.