next-ai-drawio
This MCP server lets AI agents create, edit, inspect, and export draw.io diagrams with a live browser preview.
Start or continue a session with a real-time draw.io preview and auto-save.
Get the drawing guide and XML references for tables, layers, or groups.
Look up draw.io shape libraries (AWS, Azure, GCP, Kubernetes, etc.) before drawing.
Create new diagrams or load existing
.drawio/.drawio.svgfiles.Edit diagrams by ID: add, update, or delete cells (all-or-nothing).
Read current diagram XML, list pages, and get the user's selected shapes/edges.
Manage multi-page diagrams: add, rename, delete, and target pages.
Take screenshots to check for overlaps or edge crossings.
Export to
.drawio,.png,.svg, or.drawio.svg, with page and transparency options.Restore earlier versions from history to undo changes.
List diagrams saved by earlier sessions.
Next AI Draw.io
Draw and edit draw.io diagrams by chatting with an AI.
Live Demo · Docs · Gallery · Desktop App · MCP Server
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change. Every AI change is a version you can compare, restore or undo, and the result exports as .drawio, .png or .svg.
Available as a web app, a desktop app for Windows, macOS and Linux, and an MCP server for AI agents such as Claude Code, Cursor and VS Code.
Highlights
Draw
Architecture diagrams, flowcharts, sequence diagrams and more from one sentence, with built-in AWS, Azure, GCP and Kubernetes icon libraries
Connectors can carry a flowing animation
Upload a screenshot or a sketch and the AI redraws it; upload PDF, Markdown, code and other text files and get a diagram of their content
Edit
Edit by chat: changes stream onto the canvas and the shapes the AI just changed are highlighted
Ask about a selection: select shapes on the canvas and the AI changes only those
Versions and undo: every AI change is a version card with a thumbnail; compare it with the canvas, restore it or undo it, and Ctrl+Z on the canvas also takes back an AI change in one step
It is a normal draw.io diagram: double-click to rename, drag, restyle, use several pages, and export as
.drawio,.png,.svgor.drawio.svgat any time
Use
25 model providers, including an OpenAI-compatible preset for any other URL; enter your own API key in the browser and it stays on your machine
Models that reason show their thinking
Dark mode; the interface is available in English, Simplified Chinese, Traditional Chinese and Japanese
Related MCP server: @drawx/mcp-server
Examples
More examples, each with its prompt and model, are in the gallery.
Use it
Online demo
Open next-ai-drawio.jiang.jp, nothing to install. The demo has a usage limit; click the settings icon in the chat panel and enter your own provider and API key to lift it. The key stays in your browser and is never sent to the server for storage.
Desktop app
Download the Windows, macOS or Linux installer from the Releases page.
In your AI agent (MCP)
https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678
Through MCP (Model Context Protocol, the protocol AI agents use to call outside tools), Claude Desktop, Cursor, VS Code and others can draw draw.io diagrams directly. Add this to your client's MCP configuration:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}In VS Code or Cursor, one click adds it:
For Claude Code, one command does it (--scope user makes it available in every project):
claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latestIt is also a plugin in the Claude Code community marketplace (Claude Code 2.1.275 or later):
/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-communityThen ask the AI for "a flowchart of user authentication with login, MFA and session management" and the diagram appears in your browser as it is drawn. The MCP server has most of the web app's drawing features:
The same drawing rules, icon libraries (AWS, Azure, GCP, Kubernetes and more) and canvas as the web app: the AI's changes are outlined, one Ctrl+Z takes them back, and the AI reads the shapes you select
A screenshot tool, so the AI looks at the rendered diagram and fixes it
Version history, several pages, export as
.drawio,.png,.svgor.drawio.svg, and auto-save to~/.next-ai-drawio/; the draw.io editor ships inside the package, so the preview works offline
The MCP server page has the setup for Codex, VS Code, Cursor and other clients, every tool, and how it compares with other draw.io MCP servers.
Compared with draw.io's built-in AI
draw.io has its own Generate tool (Arrange > Insert > Generate). It runs inside draw.io on a free hosted model or your own API key, and it can change a diagram, page or selection that you attach to its chat. Next AI Draw.io sends the current canvas, including your hand edits, with every message, turns every AI change into a version you can compare or restore, and works with 25 providers, including local models through Ollama, on the demo site, in the desktop app or on your own server.
Self-host
Run locally
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local # add your provider and API key, see "Models and providers" below
npm run devOpen http://localhost:6002.
One-click deploy
Platform | How |
Tencent EdgeOne Pages |
|
Vercel |
|
Cloudflare Workers | |
Docker | |
Offline or intranet |
Models and providers
25 providers are supported: AWS Bedrock (default), OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, SGLang, Vercel AI Gateway, Tencent EdgeOne, ByteDance Doubao, ModelScope, Zhipu GLM, Qwen, Qiniu, Kimi, MiniMax, Novita, Xiaomi MiMo, Atlas Cloud, and an OpenAI-compatible preset for any other URL (vLLM, LM Studio, a gateway). The environment variables and notes for each are in the provider configuration guide.
Which model: the task is to produce long text in a strict format (draw.io XML), so pick a capable model; small models tend to produce broken diagrams.
Several models and the admin panel: list several model IDs in AI_MODEL separated by commas, or configure models from several providers with the AI_MODELS_CONFIG environment variable or an ai-models.json file, and every user can use them without a key of their own. Set ADMIN_PASSWORD and open /admin to manage models, access codes, feature switches, observability and quotas from a web page; see the admin panel guide.
Support
Questions and ideas: open a GitHub issue or email me[at]jiang.jp
Common problems: FAQ
If the project is useful to you, consider sponsoring to help keep the demo site running
Available Tools
16 toolsadd_pageAdd pageA
Append a new page (tab) to the current diagram WITHOUT touching existing pages or unsaved user changes. Use this when the user wants "another diagram alongside" — e.g. "add a CNN page" — instead of create_new_diagram which wipes everything.
Inputs:
name: optional display name for the tab (defaults to Page-N where N = existing-page-count + 1)
id: optional explicit page id; if omitted the server generates a short alphanumeric id
xml: optional starting content: the mxCell elements of the page (root cells "0" and "1" are added), or a bare . If omitted, the page starts blank.
Returns the new page's id, name, and index so the caller can immediately target it with edit_diagram.
Inputs: id, xml, name.
create_new_diagramCreate new diagramA
Create a NEW diagram, REPLACING the whole document: every page and any unsaved user changes (the previous state stays in History). To add a tab use add_page; to change cells use edit_diagram.
Before using icon shapes (AWS, Azure, GCP, Kubernetes, Cisco...), call get_shape_library first. Follow the drawing guide returned by start_session (call get_drawing_guide if it is no longer in your context). Pass screenshot: true on the last call of a complex diagram to check the result.
Accepted xml:
Only the mxCell elements of one page (recommended). The server adds , , and the root cells "0" and "1":
A bare with (one page).
A full with one or more pages. Every page's must start with .
Rules: cells are siblings (never nested), ids are unique per page and start from "2", parent only for shapes inside a container, no XML comments, and shapes stay within x 0 to 800 and y 0 to 600. A style used by several cells is defined once with before the cells and used by name (see the drawing guide); html=1 and whiteSpace=wrap are added automatically.
To clear the canvas to one blank page, send only the two root cells ; the previous diagram stays in History.
Inputs: xml (required), screenshot.
delete_pageDelete pageA
Delete a page (tab) from the current diagram. At least one of page_id / page_name / page_index is required. Refuses to delete the last remaining page — the editor needs at least one tab.
Inputs: page_id, page_name, page_index.
edit_diagramEdit diagramA
Edit a specific page in the current diagram by ID-based operations (update/add/delete cells).
All-or-nothing: if any operation fails, nothing is applied and every failure is listed.
Freshness: the server remembers the last diagram state you have seen, and rejects this call only if the user edited the diagram in the browser since then. You do NOT need to call get_diagram before every edit: a rejected call changes nothing and includes the current XML of the page, so you can rebuild your operations and retry.
Call get_diagram first only when you don't know the current diagram content (cell IDs, structure) — e.g. the diagram wasn't created in this conversation, or you're unsure your memory of it is accurate.
Multi-page targeting:
page_id / page_name / page_index are optional; when all omitted, the FIRST page is targeted
Use list_pages to discover what pages exist
Operations:
add: Add a new cell. Provide cell_id (new unique id within the page) and new_xml. One cell per operation.
update: Replace an existing cell by its id. Provide cell_id and complete new_xml.
delete: Remove a cell by its id. Only cell_id is needed. Its children and connected edges are deleted too, so give only a container's id.
For add/update, new_xml is the complete mxCell (inside its wrapper when it has custom data, see the drawing guide) in the compact form (a shape with x, y, w, h; an edge with source and target). No XML comments. Every " inside new_xml must be escaped as " in the JSON.
Example - Add a rectangle on the default (first) page: {"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id="rect-1" value="Hello" style="rounded=1;" x="100" y="100" w="120" h="60"/>"}]}
Example - Delete a cell on the default page: {"operations": [{"operation": "delete", "cell_id": "rect-1"}]}
Inputs: operations (required), page_id, page_name, page_index, +1 more.
export_diagramExport diagramA
Export the current diagram to a file. Supports .drawio (XML), .png, .svg, and .drawio.svg (an SVG with the diagram embedded, which draw.io and load_diagram can open again). The format is auto-detected from the file extension, or can be specified explicitly. Images get a 20 px margin; a PNG has a white background (or the page's own background color) unless transparent is true.
Multi-page behaviour:
.drawio with NO page selector: writes the full (all pages).
.drawio with a page selector: writes a single-page containing only that page.
.png / .svg with NO page selector: exports the currently active page in the browser.
.png with a page selector: renders that page without changing what the user sees.
.svg / .drawio.svg with a page selector: temporarily loads that page into the browser, captures it, then restores the full document (the user sees a brief flicker).
Inputs: path (required), format, page_id, page_name, +2 more.
get_diagramGet diagramARead-only
Get the current diagram XML (fetches latest from browser, including user's manual edits). Call this when you don't know the current diagram content (cell IDs, pages, structure) — e.g. before editing a diagram you didn't create in this conversation, or after edit_diagram was rejected because the user changed the diagram in the browser.
Returns the full by default. If a page selector is provided, returns just that page's embedded in a one-page wrapper.
Inputs: page_id, page_name, page_index.
get_drawing_guideGet drawing guideARead-only
Return the drawing guide: XML format, layout, edge routing, style and editing rules. start_session already returns it; call this only if the guide is no longer in your context. With topic, returns a short XML reference for tables, layers or groups.
Inputs: topic.
get_selectionGet selectionARead-only
Return the cells the user has selected in the preview: their ids and labels, for edges the source and target ids, for shapes the position and size, and the page they are on. Call this when the user refers to what they selected ("this box", "these arrows", "the selected shapes"), then act on the ids with edit_diagram. Says when nothing is selected. Needs the preview tab to be open.
Inputs: no named parameters.
get_shape_libraryGet shape libraryARead-only
Get the style syntax and shape names of a draw.io icon library. Call this BEFORE drawing with cloud, network or other icon shapes, and use the exact names it returns; never guess them.
Libraries:
Cloud: aws4, azure2, gcp2, alibaba_cloud, openstack, salesforce
Networking: cisco19, network, kubernetes, vvd, rack
Business: bpmn, lean_mapping
General: flowchart, basic, arrows2, infographic, sitemap
UI/Mockups: android, material_design
Enterprise: citrix, sap, mscae, atlassian
Engineering: fluidpower, electrical, pid, cabinets, floorplan
Icons: webicons
Inputs: library (required).
list_pagesList pagesARead-only
List every page (tab) in the current diagram. Returns each page's id, name, 0-based index, and cell count. Use this to discover what pages exist before targeting one with edit_diagram, get_diagram, export_diagram, rename_page, or delete_page.
Inputs: no named parameters.
list_saved_diagramsList saved diagramsARead-only
List the diagrams saved by earlier sessions (auto-save files), newest first, with their pages. Continue one with start_session session_id=; the file path also works with load_diagram.
Inputs: no named parameters.
load_diagramLoad diagram fileA
Load a .drawio diagram into the current session, REPLACING the entire diagram (all pages). To change an existing file, load it here, edit with edit_diagram, then export_diagram to the same path; never rewrite the file by hand. Provide ONE of two mutually exclusive sources: 'path' (the server reads the file from disk — you do NOT need to read the file yourself or pass its XML through create_new_diagram) or 'xml' (the raw file content you already have — from another tool, a repository read, or an API response — so no temporary file needs to be written first). Both accept plain XML and draw.io's compressed save format. .drawio.svg (Editable SVG, the format export_diagram writes) is accepted too; .png files (also draw.io's editable PNG) and plain .svg files cannot be loaded.
After loading from 'path' (or from compressed 'xml'), call get_diagram before edit_diagram — you haven't seen the file's cell IDs yet. Plain-XML 'xml' content you supplied yourself is already known and can be edited immediately.
Inputs: xml, path.
rename_pageRename pageA
Rename an existing page (tab). At least one of page_id / page_name / page_index is required to identify which page to rename. The new_name becomes the visible tab label in the editor.
Inputs: new_name (required), page_id, page_name, page_index.
restore_versionRestore versionA
Undo: put an earlier version of the diagram from History back on the canvas (the current canvas is kept in History, so this can be undone too). Use it when the user asks to undo, revert or go back.
Inputs: steps_back.
screenshot_diagramScreenshot diagramARead-only
Render the diagram in the preview and return it as a PNG image, so you can see your own result. Call this once after drawing or heavily editing a complex diagram, then fix overlaps and edges that cross shapes. Without a page selector it shows the page on screen; with one it renders that page without changing what the user sees. Needs the preview tab to be open.
Inputs: page_id, page_name, page_index.
start_sessionStart sessionA
Start a new diagram session, or continue a saved one with session_id, and open the browser for real-time preview. Starts an embedded server and opens a browser window with draw.io. The browser will show diagram updates as they happen. The result includes the drawing guide; follow it when drawing.
Inputs: session_id.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 16 tools
The tools target clearly distinct resources and actions: session/file setup, page management, cell editing, rendering/export, selection, and reference material. A few pairs such as create_new_diagram vs load_diagram or screenshot_diagram vs export_diagram have related outcomes, but the descriptions make their boundaries unambiguous.
All tool names use snake_case and consistently follow an action_object pattern, with predictable verbs like get, list, edit, add, rename, delete, load, and export. Slight multiword variations such as create_new_diagram and screenshot_diagram are still clear and consistent.
Sixteen tools is at the upper edge of a comfortable tool set, but the draw.io editing domain is broad, covering sessions, files, pages, cells, rendering, and reference guides. Most tools earn their place, though the surface could potentially be consolidated slightly.
The core lifecycle is well covered: starting/continuing sessions, loading/creating/exporting diagrams, full page CRUD, cell editing, selection, screenshots, and history restore. Minor gaps remain around saved-diagram management, such as deleting autosaves, and explicit history/version listing.
Maintenance
Related MCP Connectors
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Turn calls and notes into process flow diagrams in Claude, ChatGPT, VS Code, Cursor, and Teams.
Create, edit and organize hand-drawn diagrams (flowcharts, ER, architecture) from any AI agent.
Let Claude, Cursor, or ChatGPT author Mermaid diagrams your team can read and share.
Related MCP Servers
- AlicenseAqualityDmaintenanceEnables AI agents to generate and edit draw.io diagrams with real-time browser preview.550 npmApache 2.0
- AlicenseAqualityCmaintenanceGenerates draw.io diagrams and architecture designs from natural language prompts using DrawX API, integrating with Claude, Cursor, and VS Code.341 npmMIT

diag2md-mcpofficial
AlicenseAqualityBmaintenanceEnables AI coding agents to discover, convert, and synchronize Draw.io C4 and UML diagrams into Mermaid Markdown, providing architectural context and guardrails during chat sessions.335 npmMIT- AlicenseAqualityBmaintenanceEnables AI agents to edit diagram/graph structures on a live draw.io canvas and manage local versions via snapshots, restore, and export without embedding a separate LLM or polluting the workspace.7MIT