Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net).
How to install drawio-mcp-server?
lgazo/drawio-mcp-server
$git clone https://github.com/lgazo/drawio-mcp-serverInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install drawio-mcp-server by running `git clone https://github.com/lgazo/drawio-mcp-server`, then use it for the current task and follow its documentation at https://github.com/lgazo/drawio-mcp-server.
README.md
| 1 | # Draw.io MCP server |
| 2 | |
| 3 | Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net). |
| 4 | |
| 5 | [](https://discord.gg/dM4PWdf42q) |
| 6 | [](https://github.com/lgazo/drawio-mcp-server/actions/workflows/server-ci.yml) |
| 7 | [](https://mseep.ai/app/5fc2b7fe-8ceb-4683-97bd-6d31e07b5888) |
| 8 | [](https://npmjs.com/package/drawio-mcp-server) |
| 9 | |
| 10 | ## Key Highlights |
| 11 | |
| 12 | - Enable Draw.io MCP in IFrames  |
| 13 | - AWS, GCP, Azure, Cisco19, and CiscoSafe stencils auto-discovered at runtime from drawio's sidebar  |
| 14 | - Multi-document targeting with `list-documents` and `target_document` selectors for multi-tab workflows  |
| 15 | - Multi-page targeting with required `target_page` selectors for page-scoped tools  |
| 16 | - Per-document FIFO serialization for live operations, so multiple agents can work on different files safely  |
| 17 | - Page management tools: `list-pages`, `get-current-page`, `create-page`, `copy-page`, `rename-page`  |
| 18 | - Import, embed, or expand [Mermaid](https://mermaid.js.org/) diagrams  |
| 19 | - Firefox support is back, TLS mode is necessary  |
| 20 | - Server supports TLS mode and optionally generates self-signed certificates  |
| 21 | |
| 22 | - Import and export diagrams from/to XML, SVG (with embedded XML), or PNG (with embedded XML)  |
| 23 | - Edge geometry control with waypoints and automatic self-connector routing  |
| 24 | - Parent-child relationships for nested shapes and grouping  |
| 25 | - Unified Server and Extension in the same mono-repo  |
| 26 | - Built-in Draw.io editor - no browser extension required |
| 27 | - MCP server that lets AI agents control Draw.io diagrams |
| 28 | - Programmatic diagram creation, inspection, and modification via MCP tools |
| 29 | - Layer management for complex diagrams |
| 30 | - Works with any MCP client (Claude Desktop, Claude Code, Zed, Codex, etc.) |
| 31 | |
| 32 | ## Introduction |
| 33 | |
| 34 | The Draw.io MCP server brings Draw.io diagramming capabilities to AI agents. It provides MCP tools that can create, read, update, and delete diagram elements - letting AI assistants build architectural diagrams, flowcharts, and visual documentation automatically. |
| 35 | |
| 36 | Two ways to use: |
| 37 | 1. **Built-in editor** - Server hosts Draw.io directly, accessible in your browser |
| 38 | 2. **Browser extension** - Connect to Draw.io running in your browser via extension |
| 39 | |
| 40 | Experimental: integration with the **draw.io desktop (Electron) app** is in progress but currently blocked by an upstream CSP issue — see [DESKTOP.md](./DESKTOP.md). |
| 41 | |
| 42 | ## Requirements |
| 43 | |
| 44 | - **Node.js** (v22 or higher; tested against v22 LTS and v24 LTS) - Runtime environment for the MCP server |
| 45 | - **MCP client** - Claude Desktop, Claude Code, Zed, Codex, OpenCode, or any MCP-compatible host |
| 46 | |
| 47 | ### For Built-in Editor |
| 48 | No additional requirements - runs out of the box with `--editor` flag. |
| 49 | |
| 50 | ### For Browser Extension |
| 51 | - **Browser extension** - [drawio-mcp-extension](./packages/drawio-mcp-extension/README.md) |
| 52 | - Draw.io open in your browser |
| 53 | |
| 54 | ### Optional |
| 55 | - **pnpm** - Preferred package manager (npm works fine too) |
| 56 | |
| 57 | ## Quick Start |
| 58 | |
| 59 | ### 1. Configure your MCP host |
| 60 | |
| 61 | Add the server to your MCP client configuration: |
| 62 | |
| 63 | <details> |
| 64 | <summary>Claude |
Related
6 picksType
- figma-context-mcpGive your coding agent access to your Figma data. Implement designs in any framework in one-shot.Jul 2026
- sunnysidefigma-context-mcpModel Context Protocol server for Figma integrationApr 2026
- figma-console-mcpThe most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.Jul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverJul 2026
- dembrandtExtract design tokens and publicly visible CSS information from any websiteJul 2026
- touchdesigner-mcpMCP server for TouchDesigner - Control and operate TouchDesigner projects through AI agentsJul 2026
