Skip to main content
Glama

Next AI Draw.io

Draw and edit draw.io diagrams by chatting with an AI.

English | 中文 | 日本語

TrendShift

License: Apache 2.0 Sponsor

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, .svg or .drawio.svg at 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: Install in VS Code Add to Cursor

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@latest

It 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-community

Then 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, .svg or .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 dev

Open http://localhost:6002.

One-click deploy

Platform

How

Tencent EdgeOne Pages

Deploy to EdgeOne Pages Deploying there also gives you a daily free quota for DeepSeek models

Vercel

Deploy with Vercel Set the same environment variables in the Vercel dashboard as in your .env.local

Cloudflare Workers

Cloudflare deploy guide

Docker

Docker guide

Offline or intranet

Offline deployment

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

Star History Chart

Available Tools

16 tools
add_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:

  1. Only the mxCell elements of one page (recommended). The server adds , , and the root cells "0" and "1":

  2. A bare with (one page).

  3. 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 diagramA
Read-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 guideA
Read-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 selectionA
Read-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 libraryA
Read-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 pagesA
Read-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 diagramsA
Read-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 diagramA
Read-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

    A4.3/5.0

    Scored across 16 tools

    Disambiguation5/5

    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.

    Naming Consistency5/5

    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.

    Tool Count4/5

    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.

    Completeness4/5

    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

    ActivityActive
    ResponsivenessUsually handled

    Related MCP Connectors

    Related MCP Servers