Drawio MCP is the official draw.io project for letting LLMs create and open diagrams in draw.io. It offers four approaches that share one XML generation reference (edge routing, containers, layers, style properties, and well-formed XML), so guidance stays consistent across them.
| MCP App Server | MCP Tool Server | Assistant plugins | Project instructions | |
|---|---|---|---|---|
| How it works | Renders diagrams inline in chat | Opens diagrams in the draw.io editor in a browser | Generates .drawio files with optional PNG, SVG, or PDF export | Claude generates draw.io URLs with Python |
| Formats | XML | XML, CSV, Mermaid | XML | XML, CSV, Mermaid |
| Hosts | Claude.ai, VS Code, Cursor, any MCP Apps host | Claude Desktop, Cursor, OpenCode, any MCP client | Claude Code, Codex CLI, GitHub Copilot, OpenCode | Claude.ai Projects |
| Install | None (hosted) or self-hosted | npm package | One-line plugin install | None |
The MCP App Server uses the MCP Apps extension to render diagrams as interactive iframes inside the conversation. It runs as a hosted endpoint or self-hosted with Node.js, Docker, or Cloudflare Workers. Its search_shapes tool searches more than 10,000 shapes across draw.io libraries (AWS, Azure, GCP, Kubernetes, UML, BPMN, Cisco, and more) and returns exact style strings, and the shape index refreshes automatically on every draw.io release.
Two optional layout passes tidy generated XML diagrams: ELK auto-layout re-arranges nodes into a layered layout, and libavoid reroutes connectors around shapes while keeping node positions. No component sends a diagram to a cloud rasterizer. Exports go through a locally installed draw.io Desktop, and only the hosted App Server receives diagram content, which a self-hosted instance avoids.
Features
- Inline diagrams: the MCP App Server renders interactive diagrams inside the chat through MCP Apps
- Editor handoff: the MCP Tool Server opens diagrams directly in the draw.io editor, with lightbox and dark mode options
- Three input formats: draw.io XML, CSV, and Mermaid.js
- Coding-assistant plugins: a draw.io skill for Claude Code, Codex CLI, and GitHub Copilot that writes .drawio files
- Editable exports: PNG, SVG, and PDF exports embed the XML so the file stays editable
- Shape search: finds the right shape among more than 10,000 across draw.io libraries, with icon-service fallback
- Auto-layout: optional ELK layout and libavoid connector routing
- Data residency: self-hosted and local options keep diagram content on your machine
- No-install option: project instructions teach Claude to produce draw.io links without an MCP server
