Next AI Draw.io

by DayuanJiang

Community Design Tools 34k likes

Next AI Draw.io's MCP server lets an agent build and edit draw.io diagrams with a real-time browser preview, using ID-based edits instead of hand-writing diagram XML.

Add to Claude Desktop

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

Source: https://github.com/DayuanJiang/next-ai-draw-io

About

Next AI Draw.io is a Next.js app that layers AI-assisted diagram editing onto draw.io; its MCP server (@next-ai-drawio/mcp-server) exposes that same editing surface to any MCP client. start_session opens a browser window with a live preview, and from there create_new_diagram, load_diagram, and edit_diagram let an agent build or modify a diagram by issuing ID-based operations against specific cells rather than regenerating the whole XML document from scratch each time.

It's self-contained: an embedded HTTP server ships with the package, so there's no separate backend to run, and the only network dependency is loading the draw.io UI itself in the browser preview. Multi-page diagrams are first-class: list_pages, add_page, rename_page, and delete_page manage a diagram's pages directly, and export_diagram writes the result out as .drawio, .png, or .svg.

Key features

  • Real-time browser preview opened via start_session as the agent edits
  • ID-based edit_diagram operations target specific cells instead of regenerating full diagram XML
  • Multi-page support: list_pages, add_page, rename_page, delete_page
  • Export to .drawio, .png, or .svg via export_diagram
  • Self-contained embedded HTTP server, no separate backend process to run
  • Native desktop apps available for Windows, macOS, and Linux alongside the web app

Use cases

  • Turning a plain-language description into a system or flow diagram without hand-editing XML
  • Iteratively refining an existing .drawio file through natural-language edit instructions
  • Generating multi-page documentation diagrams (one page per subsystem) in a single session
  • Exporting an agent-built diagram straight to PNG or SVG for a report or README

Available tools

start_session

Opens a browser window with a real-time preview of the diagram being edited.

create_new_diagram

Creates a new diagram from an XML definition.

edit_diagram

Applies ID-based edit operations to specific cells in the current diagram.

export_diagram

Saves the current diagram as a .drawio, .png, or .svg file.

add_page

Appends a new page to the current diagram.

Frequently asked questions

Do I need a draw.io license or account?

No. It works against the open draw.io editor embedded in the browser preview the server opens; there's no separate account or license involved.

Can I load and edit a diagram I already have?

Yes. load_diagram opens an existing .drawio file from disk, after which edit_diagram can modify it cell by cell.