Next AI Draw.io

Next AI Draw.io MCP Server

An MCP server that lets Claude Code, Cursor, VS Code and other AI agents draw draw.io diagrams from your project's files, with a live preview in your browser. The preview is the canvas of the Next AI Draw.io web app: the AI's changes are outlined, Ctrl+Z takes them back, and you can edit by hand at any time.

https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678

Install

In VS Code or Cursor, one click adds it: [Install in VS Code] [Add to Cursor]

Let your AI agent install it

Paste this into Claude Code, Codex, Cursor, VS Code, Cline or any agent that can edit files and run commands:

Install the drawio MCP server for the client you are running in, followinghttps://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/packages/mcp-server/README.mdInstall it for all my projects (user scope, for Claude Code "--scope user"),name the server "drawio" and keep the servers that are already configured.Then tell me how to reload so its tools show up.

Install by hand

Claude Code

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

--scope user makes the tools available in every project. Without it, they exist only in the folder where you ran the command.

Or install it as a plugin from the Claude Code community marketplace (Claude Code 2.1.275 or later):

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

Codex CLI

codex mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

Codex asks before each drawio tool that changes the diagram, and codex exec without full access fails with "MCP tool call requires approval". To let the drawio tools run without asking, add one line to the server's section in ~/.codex/config.toml:

[mcp_servers.drawio]command = "npx"args = ["@next-ai-drawio/mcp-server@latest"]default_tools_approval_mode = "approve"

To approve only some tools, use [mcp_servers.drawio.tools.<tool name>] with approval_mode = "approve" instead.

VS Code (.vscode/mcp.json)

{  "servers": {    "drawio": { "type": "stdio", "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }  }}

DeepSeek Harness: install the plugin into the profile you start DSH with (web for dsh web). The agent replies with the preview link; clicking it opens the preview in DSH's right sidebar.

dsh plugin --profile web add @next-ai-drawio/dsh

Cursor, Claude Desktop, Cline and most other clients (~/.cursor/mcp.json, claude_desktop_config.json, cline_mcp_settings.json)

{  "mcpServers": {    "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }  }}

Restart the client, then ask, for example, "Read this repo and draw its architecture". The preview opens in your browser and the diagram appears as it is drawn.

Features

• Draws from your project: the agent reads your code and documents with its own tools. Existing .drawio and .drawio.svg files open with load_diagram.
• The web app's canvas: the AI's changes are outlined for a few seconds (never in exports) and one Ctrl+Z takes them back. Select shapes and say "these" (get_selection). Your hand edits are read before the AI edits again.
• Real icons: the web app's drawing rules and shape libraries (AWS, Azure, GCP, Kubernetes, Cisco and more), so the AI uses real icon names.
• Self-check: the AI can look at a screenshot of the rendered diagram and fix overlaps (screenshot: true, or screenshot_diagram).
• Versions: the last 20 versions as cards next to the canvas; restore or compare one, or ask the AI to undo (restore_version).
• Pages and export: multi-page diagrams; save as .drawio, .png, .svg or .drawio.svg. Images get a 20 px margin, and PNGs a white background (transparent: true for none).
• Offline: the draw.io editor ships inside the package.

Choosing a draw.io MCP server

Several MCP servers draw draw.io diagrams. As of October 2026 they differ like this:

Saved diagrams

Every change is saved to ~/.next-ai-drawio/<session-id>.drawio with its last 20 versions; the newest 50 diagrams are kept. To continue one in a later conversation, ask the AI for it: it finds it with list_saved_diagrams and reopens it with start_session.

Your own drawing rules

Write them in ~/.next-ai-drawio/instructions.md, for example "Always use a minimal style". They are added to the drawing guide on every call, so edits apply without a restart. The first 5000 characters are used.

Tools

Configuration

Environment variables, set in the client's env for the server:

Remote preview behind a private proxy

Set DRAWIO_PREVIEW_URL=https://diagram.example.net in the MCP server's environment. start_session returns that origin with the session's preview path and query. The server still listens only on 127.0.0.1; configure a private or authenticated HTTPS reverse proxy to its actual PORT, preserving the external Host and browser Origin headers. Forward the whole origin, including /shell/, /drawio/ and /api/, without a path prefix. If the chosen port is occupied, the server may choose another port, so check the listener before configuring the proxy.

Only this exact additional Host and matching Origin are trusted. Forwarded headers are not used to establish trust; the default localhost checks and API token remain. The value must be a canonical HTTPS origin, optionally ending in /, without credentials, a path, query or fragment. HTTP is accepted only for localhost or 127.0.0.1. Invalid values fail startup rather than silently falling back.

The hostname is not authentication. Anyone who can reach the preview can read its embedded API token and edit diagrams. Restrict proxy access to trusted users with network policy or authentication. Do not expose this listener publicly. DRAWIO_ALLOW_EMBED is separate and does not permit arbitrary remote framing. This setting changes only the browser preview, not the stdio MCP transport or DRAWIO_BASE_URL (the draw.io editor).

Self-hosted draw.io

docker run -d -p 8080:8080 jgraph/drawio

Then set DRAWIO_BASE_URL=http://localhost:8080. The preview cannot reach into a draw.io from another origin, so the AI's changes are not outlined, Ctrl+Z does not take them back (use the version cards) and get_selection does not work. The bundled copy leaves out a few features that load code on demand, such as the org chart layout. It also has no image proxy, so exported images leave out pictures inserted by their web address; see Offline deployment.

Troubleshooting

• Blank preview in VS Code Simple Browser or Cursor's browser: the page refuses to be embedded in other pages. Open the URL in a regular browser.
• Screenshot or PNG/SVG export times out: the preview tab renders them, and browsers slow down background tabs. Bring the tab to the front and try again.
• "No active session": the AI has to call start_session first.
• The preview does not update: open the URL that start_session returned; its ?mcp= part connects the page to the session.

How it works

The server talks to the agent over stdio and runs an HTTP server on 127.0.0.1 that serves the preview page and the bundled draw.io; the page polls it for changes. Every /api request needs a token that only the preview page has, so other websites cannot read or change your diagram.

License

Apache-2.0