RELATED 01
Draw.io MCP Server
Builds, edits and exports draw.io diagrams live in a browser tab under an assistant's direction
1.5kGitHub stars
3.7k/wknpm downloads
64popularity score
Next AI Draw.io MCP Server
Draws and edits draw.io diagrams for coding agents on a live canvas in your browser
By Dayuan Jiang (individual) TypeScript Local · stdio Design
79 popularity score ★ 37k ↓ 22k/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add next-ai-draw-io -- npx @next-ai-drawio/mcp-server@latestClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"next-ai-draw-io": {
"command": "npx",
"args": [
"@next-ai-drawio/mcp-server@latest"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"next-ai-draw-io": {
"command": "npx",
"args": [
"@next-ai-drawio/mcp-server@latest"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"next-ai-draw-io": {
"type": "stdio",
"command": "npx",
"args": [
"@next-ai-drawio/mcp-server@latest"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.next-ai-draw-io]
command = "npx"
args = ["@next-ai-drawio/mcp-server@latest"]Gemini CLITerminal
gemini mcp add --scope user next-ai-draw-io npx -- @next-ai-drawio/mcp-server@latestSettings 11
PORT |
Optional: Preview port; when taken, the next free one up to 6020 is used. |
|---|---|
DRAWIO_DATA_DIR |
Optional: Folder for saved diagrams and instructions.md; off turns saving off. |
BROWSER |
Optional: none stops it opening the preview by itself; start_session still returns the address. |
DRAWIO_AUTO_SCREENSHOT |
Optional: true adds a screenshot to every create and edit result (2 to 10 s each). |
DRAWIO_BASE_URL |
Optional: Address of another draw.io, such as a self-hosted one, used instead of the bundled copy. |
DRAWIO_LANG |
Optional: Fixes the editor and preview language (en, zh, zh-tw, ja, de and so on). |
DRAWIO_UI |
Optional: Fixes the draw.io theme: kennedy, atlas, dark, min, sketch or simple. |
DRAWIO_DARK |
Optional: 1 starts dark, 0 starts light, auto follows the system. |
DRAWIO_ALLOW_EMBED |
Optional: true lets pages served from localhost or 127.0.0.1 show the preview in a frame, as DeepSeek Harness does. |
DRAWIO_PREVIEW_UI |
Optional: classic opens the older preview page, without outlines, Ctrl+Z or get_selection. |
DEBUG |
Optional: true writes debug messages to stderr. |
What it does
Next AI Draw.io MCP Server gives Claude Code, Codex, Cursor, VS Code and other agents a draw.io canvas to work on, for example to sketch the architecture of the project they have open. It belongs to the Next AI Draw.io project, which also has a web app and a desktop app; the MCP server reuses the web app's canvas as a preview page that opens in your browser.
The agent writes diagrams as draw.io mxCell XML and changes single cells by id. It reads back what you changed by hand and which shapes you selected, so you can say "these" and point. It can take a PNG of the rendered page to look for overlapping shapes, work across several pages (tabs), look up the icon names of libraries such as AWS, Azure, GCP, Kubernetes and Cisco, open .drawio and .drawio.svg files, and export to .drawio, .png, .svg or .drawio.svg. Its edits are outlined for a moment in the preview, one Ctrl+Z undoes them, and the last 20 versions of each diagram can be restored.
It runs on your machine with npx and needs no account or key. The draw.io editor comes inside the package, so it works offline, or DRAWIO_BASE_URL points it at your own draw.io. Each diagram is saved to ~/.next-ai-drawio and the newest 50 are kept; an instructions.md file in that folder adds your own drawing rules, of which the first 5000 characters are used.
The code shows one thing the README leaves out: export_diagram creates missing folders and writes to the path it is given without checking whether a file is already there, so an existing file of that name is replaced (src/index.ts).
What it needs
| Runtime | Node.js 18+ |
|---|---|
| Runs on | macOS, Windows, Linux |
| Also |
|
Limits
- Size cap Keeps the last 20 versions of a diagram and the newest 50 saved diagrams; older ones are dropped
- Size cap Only the first 5000 characters of instructions.md are used
- Limit Screenshots and PNG/SVG export are rendered by the preview tab, so the tab must be open; background tabs can time out
- Not covered With DRAWIO_BASE_URL set, AI edits are not outlined, Ctrl+Z does not undo them and get_selection does not work
- Not covered The bundled draw.io leaves out features that load code on demand, such as the org chart layout, and has no image proxy for exports
- Limit The preview may only be framed by its own origin, or by localhost pages with DRAWIO_ALLOW_EMBED=true, so it shows blank in VS Code Simple Browser or Cursor's built-in browser
- Limit Relative paths in load_diagram and export_diagram resolve against the server's working directory, not your project
- Limit export_diagram replaces an existing file at the given path without asking
- Early release DRAWIO_PREVIEW_UI=classic, the older preview page, is kept for one more release only, per the code
Who it suits
It suits someone who wants to work on one diagram together with an agent: the agent draws, you adjust shapes by hand in the browser, and the agent reads your changes before its next edit. Runs locally and offline with no sign-up. It needs a browser tab open for screenshots and image export, so it fits a desktop session more than a headless one. Its own README compares other options: draw.io's official server (draw-io here) opens each diagram in the full draw.io editor or shows it inside chat apps through a hosted endpoint, but no tool reads the diagram back; lgazo's drawio-mcp-server (drawio-mcp-server here) has finer-grained shape and layer tools, handles several documents, imports Mermaid.
Tools 16
7 only read, 8 change things, 1 can delete or overwrite. A ? marks an optional parameter.
start_sessionchanges- Opens the browser preview and returns the drawing guide; a session_id reopens a saved diagram
session_id?: string create_new_diagramchanges- Replaces the canvas with a new diagram given as mxCell XML
xml: stringscreenshot?: boolean edit_diagramchanges- Adds, updates or deletes cells by id; all operations succeed or none do
operations: arrayscreenshot?: booleanpage_id?: stringpage_name?: stringpage_index?: integer get_diagram- Returns the current XML, including changes made by hand in the browser
page_id?: stringpage_name?: stringpage_index?: integer get_selection- Returns the shapes currently selected in the preview
screenshot_diagram- Returns a PNG of a page so the agent can check the layout
page_id?: stringpage_name?: stringpage_index?: integer load_diagramchanges- Opens a .drawio or .drawio.svg file, or raw draw.io content, on the canvas
path?: stringxml?: string export_diagramdeletes- Writes the diagram to a .drawio, .png, .svg or .drawio.svg file, replacing one already there
path: stringformat?: enumtransparent?: booleanpage_id?: stringpage_name?: stringpage_index?: integer restore_versionchanges- Brings back an earlier version of the diagram; going forward again stays possible
steps_back?: integer list_saved_diagrams- Lists diagrams saved by earlier sessions, newest first
get_drawing_guide- Returns the drawing rules, or the XML reference for one topic
topic?: enum get_shape_library- Returns the style syntax and shape names of an icon library such as aws4
library: string list_pages- Lists the pages (tabs) of the diagram
add_pagechanges- Adds a page, optionally with a name, id and starting XML
name?: stringid?: stringxml?: string rename_pagechanges- Renames a page
new_name: stringpage_id?: stringpage_name?: stringpage_index?: integer delete_pagechanges- Removes a page from the diagram
page_id?: stringpage_name?: stringpage_index?: integer