Next AI Draw.io plugin
Next AI Draw.io is an MCP server and plugin where the agent draws draw.io diagrams on a live browser canvas that you can edit by hand
- 36,387 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Runs an npm package through npx and keeps a local HTTP server on 127.0.0.1, on a port from 6002 to 6020
- Saves diagrams with 20 versions each to the home folder `~/.next-ai-drawio`, and export writes files to a path the agent chooses
Install
- Works in
Manual install
claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latestThe --scope user flag makes the tools available in every project. Needs Node.js 18 or newer.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs an npm package through npx and keeps a local HTTP server on 127.0.0.1, on a port from 6002 to 6020
- Saves diagrams with 20 versions each to the home folder `~/.next-ai-drawio`, and export writes files to a path the agent chooses
This is third-party code. Review the repository files before installing.
What it does
Next AI Draw.io is a web app for drawing diagrams by chatting with an AI, plus an MCP server package that brings the same features to Claude Code, Cursor, Codex and VS Code. The @next-ai-drawio/mcp-server package starts through npx, runs a local HTTP server on 127.0.0.1 and opens a preview page in your browser. The page is a draw.io canvas bundled inside the package, so the editor does not call the draw.io website. The agent reads your code and documents with its own tools and then passes the diagram as XML through `create_new_diagram` and `edit_diagram`. Its changes are outlined on the canvas for a few seconds and a single Ctrl+Z takes them back. If you select shapes and say "these", the agent receives the selection through `get_selection`, and it reads your hand edits with `get_diagram` before its next change. It calls `get_shape_library` to get the real icon names for AWS, Azure, GCP and Kubernetes, and it can take a screenshot of the finished diagram and fix overlaps. The last 20 versions sit as cards next to the canvas: you can compare any of them with the current one or restore it, including by asking the agent (`restore_version`). `.drawio` and `.drawio.svg` files open through `load_diagram`, and the result saves as `.drawio`, `.png`, `.svg` or `.drawio.svg`. Diagrams can have several pages.
Who it is for. For developers and architects who ask Claude Code, Cursor or Codex to draw a diagram from a project's code and want to finish it by hand in the familiar draw.io editor.
Good fit when
- You need an architecture diagram of a repository and want to watch it being drawn and edit shapes next to the agent
- The diagram needs real AWS, Azure, GCP or Kubernetes icons rather than labeled rectangles
- A `.drawio` or `.drawio.svg` file already exists and the agent should extend it instead of drawing from scratch
- You want to undo the agent's edits: Ctrl+Z on the canvas reverts its last change and version cards go further back
- The diagram has to be saved as `.png`, `.svg` or `.drawio.svg` and placed in the project documentation
Not a fit when
- You need fine-grained operations on single shapes, layers and pages and Mermaid import: drawio-mcp-server covers that
- The diagram has to appear right inside a Claude.ai or ChatGPT chat: this server offers only a preview in a regular browser on your machine
- You work on a remote machine without a graphical browser: the preview opens on 127.0.0.1 and the screenshots and PNG and SVG exports are rendered by the preview tab
- You want a single skill that writes `.drawio` files without running a server: drawio-skill describes that option
Example request
Read this repo and draw its architecture in draw.io, with the services and the database using AWS iconsLimitations
- The simple browser inside VS Code and Cursor shows a blank page because the preview refuses to be embedded in other pages. Open the address that `start_session` returned in a regular browser.
- The diagram screenshot and the PNG or SVG export are rendered by the preview tab. Browsers slow down background tabs, so a call may time out until the tab is brought to the front.
- If `DRAWIO_BASE_URL` points to your own draw.io, for example the `jgraph/drawio` container, the outlines of agent edits, undo through Ctrl+Z and `get_selection` stop working. The bundled copy leaves out some features that load code on demand, such as the org chart layout, and has no image proxy: pictures inserted by web address do not reach the export.
- In Codex every call that changes the diagram asks for approval, and `codex exec` without full access fails with "MCP tool call requires approval". To lift that, add `default_tools_approval_mode = "approve"` to `~/.codex/config.toml`.
- Only the first 5000 characters of your own drawing rules in `~/.next-ai-drawio/instructions.md` are read.
How to disable. Remove the drawio server from the client configuration where you added it (`.vscode/mcp.json`, `~/.cursor/mcp.json`, `claude_desktop_config.json`, `~/.codex/config.toml`) and restart the client. Diagrams stay in `~/.next-ai-drawio` until you delete them by hand. The `DRAWIO_DATA_DIR=off` variable turns file saving off, and `BROWSER=none` stops the server from opening the preview on its own.
FAQ
What is Next AI Draw.io and how does the MCP server differ from the web app?
The web app and the desktop app draw diagrams through chat and work with 25 model providers on your own key. The MCP server takes the draw.io canvas, the drawing rules and the icon libraries from it, and you pick the model in the agent itself. The server's list of environment variables has no provider keys.
How do I install the draw.io MCP server in Claude Code?
Run `claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest`. With `--scope user` the tools are available in every project, without it only in the folder where you ran the command. You can also install the plugin with `/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community`, which needs Claude Code 2.1.275 or later.
How do I get back a diagram the agent has broken?
Press Ctrl+Z on the canvas: it reverts the agent's edit in one step. Any of the last 20 versions in the cards next to the canvas goes further back, and you can compare it with the current one first. It is enough to tell the agent "undo the last change" and it calls `restore_version`.
Where are diagrams stored and how do I continue in a new conversation?
Every change is saved to `~/.next-ai-drawio/<session-id>.drawio` with the last 20 versions, and the 50 newest diagrams are kept on disk. In a new conversation ask the agent to return to the diagram: it finds it with `list_saved_diagrams` and reopens it with `start_session`. The `DRAWIO_DATA_DIR` variable changes the folder.
How do I draw a draw.io diagram in Cursor or VS Code?
In Cursor the entry goes to `~/.cursor/mcp.json` with the command npx and the argument `@next-ai-drawio/mcp-server@latest`, in VS Code to `.vscode/mcp.json` with type stdio. Both editors have one-click install buttons. After a restart ask, for example, "read the repo and draw its architecture".
Can I open my own draw.io diagram and keep drawing it with the agent?
Yes, `load_diagram` opens existing `.drawio` and `.drawio.svg` files. After the edits `export_diagram` saves them in one of four formats. PNG images get a white background, and `transparent: true` removes it.
Discussion
No questions or reviews yet.
Related
PluginsThe official draw.io MCP server: an agent builds diagrams from XML or Mermaid and opens them in the draw.io editor
A Codex plugin that redraws a scientific figure from a reference on the live draw.io canvas step by step, then validates and exports the file
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
Excalidraw MCP Server
Excalidraw MCP Server, CLI & Agent Skill
A live Excalidraw canvas for the agent: creates, edits and exports diagrams over MCP or CLI, sees its own work via screenshots and saves .excalidraw files into
A skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Next AI Draw.io (this entry) | no | 36,387 | ||
| Draw.io MCP Server | yes | not required | 5,695 | the official draw.io server: opens each diagram from XML, CSV or Mermaid in the editor, and the agent does not read it back |
| Draw.io MCP server | no | not required | 1,493 | fine-grained tools for single shapes, layers and pages, with an editor on localhost or in a browser extension |
| drawio-skill | no | 10,307 | a skill with no server: writes draw.io files from text, code and Terraform, then exports and checks the result |
README in short
The repository holds a Next.js web app, a desktop app, documentation in three languages and a gallery of ready examples with prompts. For agents there is a separate packages folder with a TypeScript MCP server and a Claude Code plugin, each with its own description file. The server documentation includes tables of tools and environment variables, sections on a self-hosted draw.io and troubleshooting, and a comparison with other draw.io servers. Tests and Playwright end-to-end tests cover it.