Draw.io MCP Server
by lgazo
README.md
# Draw.io MCP server
Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net).
[](https://discord.gg/dM4PWdf42q)
[](https://github.com/lgazo/drawio-mcp-server/actions/workflows/server-ci.yml)
[](https://mseep.ai/app/5fc2b7fe-8ceb-4683-97bd-6d31e07b5888)
[](https://npmjs.com/package/drawio-mcp-server)
## Key Highlights
- Claude Code plugin: `/plugin marketplace add lgazo/drawio-mcp-server` then `/plugin install drawio`, with `/drawio-open` and `/drawio-status` slash commands 
- `npx drawio-mcp-server install <host>` writes the MCP config for `claude-code`, `claude-desktop`, `codex`, `zed`, `opencode`, or `all` 
- Document persistence tools: `set-document-title` and `save-document` 
- Draw.io library API version compatibility mechanism 
- Enable Draw.io MCP in IFrames
- AWS, GCP, Azure, Cisco19, and CiscoSafe stencils auto-discovered at runtime from drawio's sidebar
- Multi-document targeting with `list-documents` and `target_document` selectors for multi-tab workflows
- Multi-page targeting with required `target_page` selectors for page-scoped tools
- Per-document FIFO serialization for live operations, so multiple agents can work on different files safely
- Page management tools: `list-pages`, `get-current-page`, `create-page`, `copy-page`, `rename-page`
- Import, embed, or expand [Mermaid](https://mermaid.js.org/) diagrams 
- Firefox support is back, TLS mode is necessary 
- Server supports TLS mode and optionally generates self-signed certificates 
- Import and export diagrams from/to XML, SVG (with embedded XML), or PNG (with embedded XML) 
- Edge geometry control with waypoints and automatic self-connector routing 
- Parent-child relationships for nested shapes and grouping 
- Unified Server and Extension in the same mono-repo 
- Built-in Draw.io editor - no browser extension required
- MCP server that lets AI agents control Draw.io diagrams
- Programmatic diagram creation, inspection, and modification via MCP tools
- Layer management for complex diagrams
- Works with any MCP client (Claude Desktop, Claude Code, Zed, Codex, etc.)
## Introduction
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.
Two ways to use:
1. **Built-in editor** - Server hosts Draw.io directly, accessible in your browser
2. **Browser extension** - Connect to Draw.io running in your browser via extension
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).
## Requirements
- **Node.js** (v22 or higher; tested against v22 LTS and v24 LTS) - Runtime environment for the MCP server
- **MCP client** - Claude Desktop, Claude Code, Zed, Codex, OpenCode, or any MCP-compatible host
### For Built-in Editor
No additional requirements - runs out of the box with `--editor` flag.
### For Browser Extension
- **Browser extension** - [drawio-mcp-extension](./packages/drawio-mcp-extension/README.md)
- Draw.io open in your browser
### Optional
- **pnpm** - Preferred package manager (npm works fine too)
## Quick Start
### 1. Configure your MCP host
**Fastest path:**
- **Claude Code:** `/plugin marketplace add lgazo/drawio-mcp-server` then `/plugin install drawio`.
- **Any other host:** `npx drawio-mcp-server install <host>` where `<host>` is `claude-code`, `claude-desktop`, `codex`, `zed`, `opencode`, or `all`.
See [docs/PLUGINS.md](./docs/PLUGINS.md) for the full reference, flags, and uninstall, and [docs/release.md](./docs/release.md) for how releases are cut.
<details>
<summary>Manual install (JSON snippet, Claude Desktop example)</summary>
Edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["-y", "drawio-mcp-server", "--editor"]
}
}
}
```
</details>
For other MCP clients and detailed configuration (including pnpm options), see [Configuration](./CONFIG.md).
### 2. Open the editor
After restarting your MCP host, open: **http://localhost:3000/**
### 3. Start diagramming
Example prompts you can try:
> "Create an event-driven architecture diagram showing a message queue with producers, consumers, and three backend services"
> "Create a three-page event-driven architecture diagram. Use three agents in parallel for service topology, message flow, and retry/failure handling, with each agent assigned to a separate target page."
> "Draw a CRUD API diagram with a database, API gateway, and four microservices with their endpoints"
> "Add a new layer called 'Background' and move all decorative elements to it, then create a new layer for annotations"
Your AI assistant can now control the diagram using MCP tools.
## Features
The server provides MCP tools for:
- **Document discovery** - list connected Draw.io document instances and route later calls to a specific tab/file instance
- **Diagram inspection** - read shapes, pages, layers, and cell properties
- **Diagram modification** - add/edit/delete shapes, edges, and labels on a target page
- **Page management** - list pages, inspect the current page, create pages, copy pages, and rename pages without forcing a visible page switch on supported runtimes
- **Layer management** - create, switch, and organize layers
- **Vendor shape coverage** - AWS, GCP, Azure, Cisco19, and CiscoSafe stencils auto-discovered at runtime from drawio's sidebar, so agents can place icons like `mxgraph.gcp2.cloud_run` or `mxgraph.cisco19.router` without hand-curated catalogs
- **Built-in TLS** — opt-in HTTPS + WSS with manual cert/key or auto-generated self-signed material via a per-user local CA. See [CONFIG.md → TLS](./CONFIG.md#tls-https--wss).
See [Tools Reference](./TOOLS.md) for the complete list of available tools.
## Installation
The server runs as part of your MCP host. Detailed configuration for all supported clients (Claude Desktop, Claude Code, Zed, Codex, oterm) including npm and pnpm options is available in [Configuration](./CONFIG.md).
## Alternative: Browser Extension
Instead of the built-in editor, you can use the [browser extension](./packages/drawio-mcp-extension/README.md) to connect to Draw.io running in your browser. This works with or without the `--editor` flag.
1. Open [Draw.io in your browser](https://app.diagrams.net/)
2. Install the Draw.io MCP Browser Extension:
- [Chrome Web Store](https://chrome.google.com/webstore/detail/drawio-mcp-extension/okdbbjbbccdhhfaefmcmekalmmdjjide)
- [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/drawio-mcp-extension/)
3. Ensure the extension is connected (green signal overlay on icon)
Configuration without `--editor`:
```json
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["-y", "drawio-mcp-server"]
}
}
}
```
See the [extension documentation](./packages/drawio-mcp-extension/README.md) for more details.
## Experimental: Draw.io Desktop
Integration with the [draw.io desktop](https://github.com/jgraph/drawio-desktop) (Electron) app is **experimental** and currently blocked end-to-end by an upstream CSP issue. The plugin loads inside draw.io desktop, but its WebSocket connection back to the MCP server is rejected by draw.io's hard-coded `connect-src 'self'` policy.
See [DESKTOP.md](./DESKTOP.md) for the full setup steps and the current limitation.
## Related Resources
[Configuration](./CONFIG.md) - CLI flags and advanced options
[Tools Reference](./TOOLS.md) - Complete MCP tools documentation
[Troubleshooting](./TROUBLESHOOTING.md)
[Prompt examples](./docs/examples/index.md)
[Contributing](./CONTRIBUTING.md)
[Architecture](./ARCHITECTURE.md)
[Development](./DEVELOPMENT.md)
[Draw.io Desktop (experimental)](./DESKTOP.md) - install path and known CSP limitation
## Star History
<a href="https://star-history.dera.page/#lgazo/drawio-mcp-server&type=Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://star-history.dera.page/svg?repos=lgazo/drawio-mcp-server&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://star-history.dera.page/svg?repos=lgazo/drawio-mcp-server&type=Date" />
<img alt="Star History Chart" src="https://star-history.dera.page/svg?repos=lgazo/drawio-mcp-server&type=Date" />
</picture>
</a>
## Assessments
[](https://mseep.ai/app/lgazo-drawio-mcp-server)
TDQS
B3.4/5.0
Scored across 13 tools
Disambiguation3/5
The tools have clear purposes but some overlap exists, such as add-cell-of-shape and add-rectangle both adding vertex cells, which could cause confusion. However, descriptions help differentiate them by shape specificity, and most tools target distinct actions like editing, deleting, or retrieving cells.
Naming Consistency4/5
Tool names follow a consistent verb_noun pattern with minor deviations, such as list-paged-model using 'paged' instead of a direct noun. Most names are clear and readable, like delete-cell-by-id and get-shape-by-name, maintaining a predictable structure throughout the set.
Tool Count5/5
With 13 tools, the count is well-scoped for a diagram editing server, covering essential operations like adding, editing, deleting, and retrieving cells and shapes. Each tool earns its place by addressing specific needs in diagram manipulation without being overwhelming.
Completeness4/5
The toolset provides comprehensive coverage for diagram editing, including CRUD operations for cells and edges, shape management, and data inspection. Minor gaps exist, such as no direct tool for creating new pages or handling diagram-level properties, but agents can work around these with existing tools.
Maintenance
ActivityActive
ResponsivenessWithin a week