Draw.io MCP Server
The official draw.io MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in the draw.io editor.
▶ Watch the video and set up draw.io in your AI assistant on drawio.com/mcp.
Four Ways to Create Diagrams
This repository offers four approaches for integrating draw.io with AI assistants. Pick the one that fits your setup:
| MCP App Server | MCP Tool Server | Assistant Plugins | Project Instructions |
|---|
| How it works | Renders diagrams inline in chat | Opens diagrams in your browser | Generates .drawio files, optional PNG/SVG/PDF export or browser URL | Claude generates draw.io URLs via Python |
| Diagram output | Interactive viewer embedded in conversation | draw.io editor in a new tab | .drawio, .drawio.png / .svg / .pdf, or browser URL | Clickable link to draw.io |
| Requires installation | No (hosted at mcp.draw.io) | Yes (npm package) | One-line plugin install (draw.io Desktop only for PNG/SVG/PDF export) | No — just paste instructions |
| Supports XML, CSV, Mermaid | XML and Mermaid | ✅ All three | XML and Mermaid (Mermaid needs draw.io Desktop) | ✅ All three |
| Editable in draw.io | Via "Open in draw.io" button | ✅ Directly | ✅ Directly | Via link |
| Works with | Claude.ai, ChatGPT, VS Code, Cursor, GitHub Copilot CLI, any MCP Apps host | Claude Desktop, Cursor, OpenCode, any MCP client | Claude Code, Codex CLI, GitHub Copilot, Cursor, Antigravity, OpenCode | Claude.ai (with Projects) |
| Best for | Inline previews in chat | Local desktop workflows | Local development workflows | Quick setup, no install needed |
Guides
User guides with tested prompts and examples are in the draw.io documentation, and the setup for each assistant is on drawio.com/mcp:
The gallery is generated from docs/images/gallery/gallery.json and the editable light and dark SVGs next to it; drawio.com reads them when the site is built.
MCP App Server
The MCP App server renders draw.io diagrams inline in AI chat interfaces using the MCP Apps protocol. Instead of opening a browser tab, diagrams appear directly in the conversation as interactive iframes.
The official hosted endpoint is available at:
https://mcp.draw.io/mcp
Add this URL as a remote MCP server in Claude.ai, ChatGPT, VS Code (GitHub Copilot), Cursor, GitHub Copilot CLI, or any MCP Apps-compatible host — no installation required. On Claude.ai, draw.io is also listed in the connector directory and can be added from there in one click; in ChatGPT and Codex, in the plugin directory. In Cursor (≥ 2.6), diagrams render inline in the Agent chat (one-click install); on older builds, use the stdio @drawio/mcp tool server instead. In GitHub Copilot CLI, run copilot mcp add --transport http drawio https://mcp.draw.io/mcp; a terminal can't show diagrams inline, so it gets a link that opens each diagram in draw.io.
You can also run the server locally via Node.js or the jgraph/drawio-mcp Docker image, or deploy your own instance to Cloudflare Workers.
Tools:
create_diagram — Renders draw.io XML or Mermaid (28 diagram types) as an interactive diagram inline in chatsearch_shapes — Searches 10,000+ shapes across all draw.io libraries (AWS, Azure, GCP, P&ID, electrical, Cisco, Kubernetes, UML, BPMN, etc.) by keyword, supplemented by the draw.io icon service (brand logos and general-purpose concept icons) when the built-in libraries have no good match. Returns exact style strings that can be used directly in XML. Use this to find the correct shape before calling create_diagram.get_drawio_reference — Returns the XML or Mermaid generation reference, which the model reads once per format before its first diagram.
Full documentation →
Note: Diagrams appear inline in hosts that support the MCP Apps extension, such as Claude.ai, ChatGPT, VS Code with GitHub Copilot and Cursor. In other hosts, such as GitHub Copilot CLI, the tool still works and answers with a link that opens the diagram in draw.io.
MCP Tool Server
The original MCP server that opens diagrams directly in the draw.io editor. Supports XML, CSV, and Mermaid.js formats with lightbox and dark mode options. Published as @drawio/mcp on npm.
Quick start: npx @drawio/mcp
This is the beginning of the README. Read the rest at the original. Read the full README ↗
