How AI Can Generate Editable Draw.io Diagrams via MCP Protocol

Problem

AI‑generated diagrams (e.g., Mermaid) lack hierarchical expressiveness, produce tangled layouts, and output static images that cannot be edited, making them unsuitable for engineering documentation.

Solution – Next AI Draw.io MCP

The approach generates native draw.io XML (mxGraphModel) instead of pixel images or simple DSL. By using the Model Context Protocol (MCP), an IDE can send structured diagram commands to a local draw.io instance, allowing AI to act as an architect that creates editable diagram structures.

Key Benefits

Editable by Design : AI outputs XML; users can drag nodes, edit connections, and change styles directly in the browser.

Structured Mapping : Complex code constructs (state management, rendering layers, runtime environments) are mapped to draw.io containers and swimlanes, preserving hierarchy.

Real‑time Feedback Loop : Code changes are reflected instantly in the diagram, keeping documentation in sync with the codebase.

Configuration

Add an MCP server entry for draw.io in the IDE configuration:

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

This JSON tells the system to launch the latest MCP server via npx.

Using the MCP

Prompt example: “Analyze SerPackOrderConsumer , PushSapMiOraApi , and #pushByTypes logic, then draw the flowchart with draw.io MCP.”

The MCP parses the specified code, starts the local Next AI Draw.io app in a browser, and automatically renders an editable flowchart that can be downloaded or further refined.

Demonstration Overview

Generated diagrams are stored as XML, enabling direct editing of node positions, colors, and connections. The workflow reduces diagram creation time compared with manual tools such as Visio or the standard Draw.io UI.

Resources

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

Demo site: https://next-ai-drawio.jiang.jp/zh

Conclusion

Next AI Draw.io MCP lets developers quickly visualize unfamiliar codebases as editable flowcharts, improving documentation quality and accelerating design reviews.