# draw.io [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/jgraph/drawio-mcp  
**GitHub Stars:** 5808  
**npm Downloads (last month):** 128908  
**Views:** 13  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/draw-io

## Description
Create diagrams in chat, rendered as live interactive draw.io diagrams. 10,000+ searchable shapes.

## Tools
Capabilities this server exposes over MCP:

- **open_drawio_xml** — Opens the draw.io editor with a diagram from draw.io XML. Use it for custom styling, precise positioning and stencil-based diagrams (cloud, network, P&ID, UI mockups, floor plans); prefer open_drawio_mermaid for flowcharts, sequence, class, ER and the other types Mermaid covers.

XML rules:
- Skeleton: <mxGraphModel adaptiveColors="auto"><root><mxCell id="0"/><mxCell id="1" parent="0"/>…</root></mxGraphModel>. Unique ids. No XML comments.
- Vertex: <mxCell id="a" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="140" height="60" as="geometry"/></mxCell>
- Edge: <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;" edge="1" source="a" target="b" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>. Never self-closing. No waypoints or exitX/entryX.
- Labels: html=1 in every style; escape HTML in values (&lt;b&gt;Name&lt;/b&gt;&lt;br&gt;detail); line break &lt;br&gt;, never \n.
- Shapes: rhombus (decision), ellipse, shape=cylinder3 (database), text.
- Grid, no layout math: x=col*180+40, y=row*120+40, one node per cell; 140×60 boxes, 140×80 diamonds.
- Containers: swimlane;startSize=24; (titled) or group; (invisible); children set parent="<id>" with coordinates relative to it. An edge's parent is the innermost container holding both its ends, else "1".
- Lanes: swimlane;horizontal=0;startSize=110; at x=0, y=lane*150, height 150; nodes inside at x=120+col*180, y=45.
- Edges: orthogonal; entityRelationEdgeStyle for ER; labels 1-3 words; dashed=1 for one meaning, with a legend.
- Cloud/network/P&ID icons or logos: call search_shapes, use its style.
- Set postLayout "elk" for flowcharts, process and tree diagrams (ELK places nodes and routes edges), or routing "libavoid" for hand-placed layouts whose edges would cross shapes. Never both.

Only when the diagram needs layers, tags, metadata and placeholders, tables, cross-functional grids or dark-mode colors, call get_drawio_reference with format "xml" for the full reference.
- **open_drawio_csv** — Opens the draw.io editor with a diagram generated from CSV data. The CSV format should follow draw.io's CSV import specification which allows creating org charts, flowcharts, and other diagrams from tabular data.
- **open_drawio_mermaid** — Opens the draw.io editor with a diagram generated from Mermaid.js syntax, converted into an editable draw.io diagram. The recommended default for flowcharts, sequence, class, state and ER diagrams, gantt charts, mind maps, timelines, C4, architecture and the other types draw.io's Mermaid parser supports (28 in all).

Call get_drawio_reference with format "mermaid" once before your first Mermaid diagram in a conversation: it lists the header keyword and syntax hints for every supported type (a misspelled header yields a blank diagram) and flowchart styling.
- **get_drawio_reference** — Returns a full draw.io diagram generation reference as Markdown. Format "mermaid": the header keyword and syntax hints for every Mermaid type draw.io supports, flowchart styling and the ELK layout; call it once before the first Mermaid diagram in a conversation. Format "xml": everything beyond the rules in the open_drawio_xml description (layers, tags, metadata and placeholders, tables, cross-functional grids, dark-mode colors, more styles and examples); only needed when a diagram uses those. A reference stays valid for the rest of the conversation.
- **list_pages** — Lists the pages (diagrams) in a local .drawio file without loading full page content. Returns each page's index, id, name, and approximate stored size in bytes. Call this first on large multi-page files before get_page/set_page, so only the page you actually need gets loaded into context.
- **get_page** — Reads one page (diagram) from a local .drawio file and returns its raw mxGraphModel XML, decompressing it first if the file stores that page compressed. Use list_pages first to find the index, name, or id of the page you need.
- **set_page** — Replaces the content of one page (diagram) in a local .drawio file with new mxGraphModel XML, leaving every other page in the file untouched. Compression of the replaced page matches whatever that page's original compression state was. Use list_pages/get_page first to find the target page.
- **search_shapes** — Search the draw.io shape library by keywords. Returns matching shapes with their exact style strings, dimensions, and titles. Covers ~10,000 built-in stencils (cloud architecture, network topology, P&ID, electrical, Cisco, Kubernetes, BPMN) and, when those are sparse, supplements results with the draw.io icon service (brand/product logos and general-purpose concept icons, e.g. 'react', 'slack', 'shopping cart', 'solar panel'). Use ONLY for diagrams that need industry-specific, branded, or pictorial icons. Do NOT use for standard diagram types like flowcharts, UML, ERD, org charts, or mind maps — these use basic geometric shapes (rectangles, diamonds, circles, cylinders) that are already covered in the XML reference. Also skip if the user asks to use basic/simple shapes or says not to search. The style string from the results can be used directly in mxCell style attributes.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "draw-io": {
    "command": "npx",
    "args": ["-y","@drawio/mcp"]
  }
}
```

## Documentation

## What draw.io MCP server does

draw.io MCP server lets AI assistants create and open editable diagrams in draw.io. It accepts draw.io XML, CSV following draw.io’s import format, and Mermaid.js syntax. Mermaid support covers diagram types such as flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, timelines, mind maps, architecture diagrams, and other supported Mermaid formats.

The repository provides several delivery modes. The hosted MCP App endpoint renders diagrams as interactive content inside compatible AI chat interfaces. The npm MCP tool server opens diagrams in the draw.io editor, while assistant plugins can generate native `.drawio` files and optionally export PNG, SVG, or PDF files. A project-instructions approach can generate browser links without installing an MCP server.

## How it works

For inline rendering, connect an MCP-compatible host to `https://mcp.draw.io/mcp`. The server’s diagram tool receives XML or Mermaid and produces an interactive viewer, with an option to open the result in draw.io. Hosts without MCP Apps support can still receive a link to the diagram.

For the local editor workflow, run the published npm package with `npx @drawio/mcp`. The tool server accepts XML, CSV, and Mermaid input and opens the resulting diagram in a new browser tab. Local file tools operate on `.drawio` files: `list_pages` identifies pages, `get_page` reads one page’s raw model, and `set_page` replaces a selected page while preserving other pages.

## Setup and configuration

Use the hosted endpoint when the client supports remote MCP servers and MCP Apps; this requires no local installation. The repository names Claude.ai, ChatGPT, VS Code with GitHub Copilot, Cursor, and GitHub Copilot CLI as compatible hosted environments. GitHub Copilot CLI uses an HTTP MCP registration command and returns links rather than inline diagrams in its terminal.

For the original editor-opening server, install through npm execution:

```bash
npx @drawio/mcp
```

Setup guidance is provided for Claude Desktop, Claude Code, VS Code with GitHub Copilot, Cursor, and OpenCode. The repository also offers a Docker image and supports deploying a local instance to Cloudflare Workers.

## Tools and capabilities

- Create diagrams from XML or Mermaid with `create_diagram` in the hosted MCP App server.
- Open XML, CSV, or Mermaid diagrams in draw.io with the MCP tool server.
- Search roughly 10,000 draw.io shapes and receive reusable style strings with `search_shapes`.
- Retrieve XML or Mermaid generation guidance with `get_drawio_reference`.
- List, read, and replace pages in local `.drawio` files.
- Generate native `.drawio` files through the assistant plugins, with optional PNG, SVG, PDF, or browser-URL output.

Shape search covers libraries for cloud architecture, networking, P&ID, electrical diagrams, Cisco, Kubernetes, UML, BPMN, and other specialized notation. It can also consult the draw.io icon service for brand and general-purpose icons.

## Limitations and notes

Inline rendering depends on MCP Apps support in the host. GitHub Copilot CLI can use the hosted server but displays a link instead of an inline diagram. PNG, SVG, and PDF export from the assistant plugins requires draw.io Desktop; browser URL output does not require Desktop. Mermaid diagrams are converted through draw.io’s Mermaid support, while exact positioning, native draw.io shapes, and complex layered diagrams are better represented with XML.

_Full upstream README: https://allmcps.com/mcp/draw-io/readme_