--- title: "draw.io MCP Server: Diagrams from a Prompt, Official" url: "https://mcpshelf.co/servers/drawio" description: "draw.io's own MCP server turns a prompt into an editable flowchart, architecture or UML diagram. The hosted URL, the npm option and what leaves your machine." updated: "2026-10-27" site: "MCP Shelf" --- # draw.io MCP > draw.io's own server: describe a diagram and get one you can keep editing. ## At a glance JGraph, the company behind draw.io, publishes this server. The npm package we list runs on your computer and opens each diagram in the draw.io editor in your browser. If your client takes a URL, the hosted version at mcp.draw.io can draw the diagram right in the chat instead, in clients that support MCP Apps such as Claude.ai, ChatGPT and VS Code with Copilot. Either way the model writes draw.io XML, Mermaid or CSV, and it can search more than 10,000 shapes, including the AWS, Azure, GCP and Kubernetes icon sets. Every result stays an ordinary draw.io file, so you can open it, move boxes around and save it like any diagram you drew yourself. | | | | --- | --- | | Made by | JGraph, the company behind draw.io | | GitHub | https://github.com/jgraph/drawio-mcp | | Licence | Apache-2.0 | | npm package | [@drawio/mcp](https://www.npmjs.com/package/@drawio/mcp) 1.10.0 (18 Oct 2026) | | GitHub stars | 5.7K | | Last commit | 26 Oct 2026 | | Tools | 8 | | Runs on | Your computer or hosted | | Install check | Started in our test | | Category | [Design, 3D and games](https://mcpshelf.co/categories/design-and-3d) | **Our check:** We ran this exact config on 27 Oct 2026: it started and answered with 8 tools. ## Tools We listed 8 tools on 27 Oct 2026. 4 only read; the rest can change things or run commands. | Tool | Kind | What it is for | | --- | --- | --- | | `open_drawio_xml` | changes | Opens a diagram written in draw.io's own XML, for exact layouts, custom styles and cloud or network icons. | | `open_drawio_csv` | changes | Builds a diagram, such as an org chart, from rows of CSV data and opens it. | | `open_drawio_mermaid` | changes | Turns Mermaid text into an editable draw.io diagram and opens it in the editor. The best fit for flowcharts, sequence, class, ER and state diagrams. | | `get_drawio_reference` | reads | Hands the model the full Mermaid or XML writing guide, which it reads once before its first diagram of that kind. | | `list_pages` | reads | Lists the pages in a .drawio file on your computer without loading them all. | | `get_page` | reads | Reads one page of a local .drawio file as XML. | | `set_page` | changes | Replaces one page of a local .drawio file and leaves the other pages alone. | | `search_shapes` | reads | Searches about 10,000 built-in shapes (AWS, Azure, GCP, Kubernetes, Cisco, BPMN and more) plus brand icons, and returns their exact styles. | ### How clearly it describes its tools 8 of 8 tools have a description and 0 of 8 say whether they change things. The tool list takes at least ~1,500 tokens of context. No tool says whether it only reads or can change things, so your client treats them all alike: keep approvals on. ## Set it up ### Claude Desktop Where: claude_desktop_config.json (Settings → Developer → Edit Config) ```json { "mcpServers": { "drawio": { "command": "npx", "args": [ "-y", "@drawio/mcp" ] } } } ``` ### Claude Code Where: Your terminal, in the project folder ```bash claude mcp add-json drawio '{"command":"npx","args":["-y","@drawio/mcp"]}' ``` ### Cursor Where: ~/.cursor/mcp.json, or .cursor/mcp.json in a project ```json { "mcpServers": { "drawio": { "command": "npx", "args": [ "-y", "@drawio/mcp" ] } } } ``` ### VS Code Where: .vscode/mcp.json in your project ```json { "servers": { "drawio": { "type": "stdio", "command": "npx", "args": [ "-y", "@drawio/mcp" ] } } } ``` ### Windsurf Where: ~/.codeium/windsurf/mcp_config.json ```json { "mcpServers": { "drawio": { "command": "npx", "args": [ "-y", "@drawio/mcp" ] } } } ``` ### ChatGPT Where: Not supported ChatGPT only connects to remote servers by URL. This one runs on your computer, so use Claude, Cursor or VS Code. The local package opens each diagram in the draw.io editor in your browser, and the diagram travels in the link itself rather than through a server. ### Remote option The hosted server draws diagrams inside the chat in clients that support MCP Apps. It receives the diagram you ask for, so use the local package for anything private. ``` https://mcp.draw.io/mcp ``` ## Settings | Setting | Kind | Required | What it does | | --- | --- | --- | --- | | `DRAWIO_BASE_URL` | env | no | Opens diagrams in your own self-hosted draw.io instead of app.diagrams.net. Example: `https://drawio.example.com/` | | `lightbox` | config | no | A tool option that opens the diagram in read-only view instead of the editor. | | `dark` | config | no | A tool option for the editor theme: auto, true or false. | | `https://mcp.draw.io/mcp` | config | no | The hosted server, for clients that take a URL. It draws diagrams inline in clients with MCP Apps support and has create_diagram, search_shapes and get_drawio_reference. | ## What it can touch **It can read** - The diagram text the model writes - Local .drawio files you point it at - draw.io's shape library and icon search **It can change** - Opens browser tabs with the draw.io editor - Pages inside local .drawio files, when set_page is used **Safer setup:** With the local package the diagram rides in the link's #fragment, which browsers do not send to the server. Use the hosted URL only for diagrams you would be happy to share with draw.io's server. ## Before you start - Node.js 18 or newer for the local package - Nothing at all for the hosted server: no account or key ## Good for - Architecture diagrams with the right cloud icons - Turning a process described in words into a flowchart - Quick sequence, ER and UML diagrams during a design discussion ## If it does not work **Nothing opens after the model says it made a diagram** The local server opens your default browser. Check that a browser is set as default and that the client let the tool run. **Mermaid diagrams fail to render** Ask the model to call get_drawio_reference with format mermaid first. It lists which Mermaid types and keywords draw.io accepts. **Icons show as empty boxes** Ask it to use search_shapes and copy the exact style string it returns, rather than guessing shape names. **The diagram does not appear inside the chat** Inline diagrams need the hosted URL and a client that supports MCP Apps, such as Claude.ai, ChatGPT, VS Code with Copilot or Cursor. The local package always opens a browser tab. ## Similar servers | Server | Tools | Runs on | Stars | | --- | --- | --- | --- | | [AntV Chart MCP](https://mcpshelf.co/servers/antv-chart) | 27 | Your computer | 4.4K | | [DaVinci Resolve MCP](https://mcpshelf.co/servers/davinci-resolve) | 37 | Your computer | 3.8K | | [FreeCAD MCP](https://mcpshelf.co/servers/freecad) | 17 | Your computer | 3.1K | | [Excalidraw MCP](https://mcpshelf.co/servers/excalidraw) | 26 | Your computer | 2.6K | ## Questions ### Is this the official draw.io server? Yes. JGraph, which makes draw.io, publishes it in jgraph/drawio-mcp, along with plugins for Claude Code, Codex and Copilot. ### Does it cost anything? No. Both the npm package and the hosted server are free and need no account. ### Can I edit the result by hand? Yes. Every diagram is a normal draw.io diagram, so you can move shapes, restyle it and save or export it. ### Which licence does it use? Apache-2.0. Full docs on GitHub: https://github.com/jgraph/drawio-mcp --- From [MCP Shelf](https://mcpshelf.co/): A short shelf of MCP servers that are worth installing. Index for agents: https://mcpshelf.co/llms.txt