# DayuanJiang/next-ai-draw-io [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server  
**GitHub Stars:** 36427  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/dayuanjiang-next-ai-draw-io

## Description
Draw and edit draw.io diagrams from your project's files on a live browser canvas you can also edit by hand, with version history, undo, AWS, Azure and GCP shape libraries and PNG or SVG export.

## Tools
Capabilities this server exposes over MCP:

- **start_session** — Open the preview and return the drawing guide; `session_id` continues a saved diagram
- **create_new_diagram** — Draw a new diagram from `mxCell` XML
- **edit_diagram** — Add, update or delete cells by id, all or nothing
- **get_diagram** — The current XML, including your edits in the browser
- **get_selection** — The shapes you selected in the preview
- **screenshot_diagram** — A PNG of a page, for the AI to check
- **restore_version** — Go back to an earlier version; a redo stays possible
- **list_saved_diagrams** — Diagrams saved by earlier sessions, newest first

## Claude Desktop Quick Installation
No confirmed install details yet, so no config is published. Follow the setup steps in the repository above.

## Documentation

## What DayuanJiang/next-ai-draw-io does

DayuanJiang/next-ai-draw-io gives MCP-compatible coding clients access to a draw.io editor running in a browser. An agent can create a diagram from `mxCell` XML, change existing cells, read the resulting diagram, inspect the user's selected shapes, and capture a rendered page as PNG. Developers can edit the same canvas by hand while the agent works.

The server is suited to architecture, infrastructure, flow, and other diagrams that benefit from draw.io's editor and shape libraries. The preview supports libraries including AWS, Azure, GCP, Kubernetes, and Cisco. AI-applied changes are visually outlined in the preview, and one undo action can remove the latest agent change.

## How it works

A client starts a session, which opens the preview and returns a drawing guide. The client can create a new diagram or continue a saved session by passing its session ID. Subsequent calls can retrieve the current XML, including manual browser edits, or apply additions, updates, and deletions to cells by ID. Cell edits are applied as a single operation rather than partially.

Sessions save diagrams under the configured data directory, retaining the last 20 versions for each diagram and up to 50 saved diagrams. `restore_version` returns to an earlier state while preserving the option to redo. Multiple pages are supported, with tools for listing, adding, renaming, and deleting pages. The bundled draw.io editor runs offline; a self-hosted draw.io instance can be selected instead.

## Setup and configuration

Install the package through the MCP client's standard stdio configuration using `npx @next-ai-drawio/mcp-server@latest`. The README gives client-specific commands for Claude Code and Codex CLI, JSON configuration for Cursor, Claude Desktop, and Cline, and an `.vscode/mcp.json` example for VS Code. Restart the client after adding the server. `BROWSER=none` prevents automatic browser launching while still returning the preview URL from `start_session`.

Optional settings control the preview and storage:

- `PORT` selects the preview port, starting at 6002 and trying later ports through 6020 if needed.
- `DRAWIO_DATA_DIR` changes the storage directory; setting it to `off` disables saving.
- `DRAWIO_AUTO_SCREENSHOT=true` attaches screenshots to create and edit results.
- `DRAWIO_BASE_URL` points to another draw.io deployment.
- `DRAWIO_LANG`, `DRAWIO_UI`, and `DRAWIO_DARK` set language and visual preferences.
- `DRAWIO_PREVIEW_UI` selects the preview interface, and `DEBUG=true` enables diagnostic logging.

Custom drawing guidance can be placed in `instructions.md` within the data directory. The first 5,000 characters are included in the drawing guide.

## Tools and capabilities

The MCP toolset includes session management, diagram creation and cell-level editing, XML retrieval, selection retrieval, screenshots, version restoration, and saved-diagram listing. Additional operations load and export `.drawio` and `.drawio.svg` files, manage pages, return the drawing guide, and inspect shape-library styles.

Exports can produce `.drawio`, `.drawio.svg`, `.png`, and `.svg` files. PNG output uses a white background by default, with transparency available through the export option. Images receive a 20-pixel margin. Existing `.drawio` and `.drawio.svg` files can be opened through the editor.

## Limitations and notes

Using a self-hosted draw.io instance from another origin prevents the preview from outlining agent changes, handling them with Ctrl+Z, or returning the current selection. Version cards remain available for recovery. The bundled editor omits some on-demand features, such as the organization-chart layout, and its exports do not include pictures that require an image proxy. Codex CLI may request approval before diagram-changing tool calls unless its MCP approval settings are adjusted.

_Full upstream README: https://allmcps.com/mcp/dayuanjiang-next-ai-draw-io/readme_