next-ai-draw-io: AI Generates Editable Draw.io Diagrams via Chat

Pain Points of Traditional Diagram Tools

Creating technical architecture diagrams in Draw.io or Visio requires manual dragging, aligning, and layout adjustments — often taking 30+ minutes. When requirements change (e.g., switching vertical to horizontal layout, adding a cache service), the entire diagram must be reworked. Team knowledge-base diagrams stay outdated because editing cost is too high. AI diagram tools have emerged but fall into two traps: (1) generating only static PNGs that cannot be edited without full regeneration, and (2) outputting Mermaid code that becomes unmanageable as complexity grows, forcing developers to wrestle with DSL syntax for node grouping and connector routing.

Solution: next-ai-draw-io

next-ai-draw-io is an open-source project (35.6K+ GitHub stars) that integrates LLMs directly with the Draw.io editor. Instead of images or Mermaid, the LLM outputs native Draw.io XML. The generated diagram opens in the embedded Draw.io renderer ( react-drawio + embed.diagrams.net), where every node, connector, and label remains fully draggable and editable. Users iterate by sending follow-up chat instructions (e.g., "add a cache layer between LLM and user", "switch to dark theme", "change to vertical layout").

Supported Diagram Types

Technical architecture diagrams (e.g., RAG chat system with data ingestion pipeline)

Cloud provider architectures with official icons (AWS, Azure, GCP)

Swimlane flowcharts (user login with registration, password, MFA)

Mind maps (microservice decomposition)

Creative sketches and concept diagrams

All examples are rendered as editable SVGs in the article.

Eight Core Features

1. 20+ LLM Providers Supported

A unified AI middleware layer built on Vercel AI SDK allows switching models with a single config line. Categories:

Proprietary cloud: GPT-4o, Claude, Gemini

Chinese models: Doubao, Qwen, GLM, Kimi, DeepSeek

Local/offline via Ollama (Qwen2.5, Llama3, etc.)

Cloud vendor gateways: AWS Bedrock, Azure OpenAI, Google Vertex

Aggregators: OpenRouter, Vercel AI Gateway, SiliconFlow, ModelScope

Practical tip : For AWS/Azure/GCP architecture diagrams, prefer Claude series for best icon recognition; for low-cost high-volume drawing, DeepSeek offers the best price/performance.

2. Four Deployment Options

Online demo — zero install, paste your own API key, all processing stays in browser.

Docker one-liner : docker-compose up — full private deployment, data never leaves intranet.

Local source build :

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
npm run dev

Access at http://localhost:6002.

MCP Server for VS Code / Cursor / Claude Desktop — add to .vscode/mcp.json:

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

Enables in-editor chat-to-diagram with real-time browser preview. The MCP server exposes tools for create, load, incremental edit, export, and multi-page management. Key advantage: AI edits single nodes/connectors instead of full redraw, drastically reducing regression risk.

3. Image-to-Diagram Reverse Engineering

Upload a screenshot or PDF of an existing architecture diagram. A vision LLM analyzes the structure and reconstructs a fully editable Draw.io file. Useful for modernizing legacy diagrams or extracting flowcharts from PDF design docs without starting from scratch.

4. Automatic Version History

Every AI edit creates a snapshot. Users can roll back to any prior version, eliminating fear of irreversible AI mistakes.

5. Dual-Layer Validation Pipeline

Engineering rigor to prevent broken layouts:

XML syntax validation — backend checks mxCell XML completeness, fills missing fields, rejects illegal structures, triggers up to 3 automatic LLM retries.

Visual LLM (VLM) quality check — renders diagram to image, feeds to vision model. Overlapping nodes and connectors crossing shapes = critical errors; crowded layout or tiny text = warnings. Failed diagrams are auto-regenerated.

6. Clean Technical Architecture

Frontend: Next.js 16 + React 19 + TailwindCSS 4

AI orchestration: Vercel AI SDK (unified model interface)

Diagram kernel: react-drawio + embed.diagrams.net

Desktop client: Electron

Deployment targets: Vercel, Cloudflare Workers, Tencent EdgeOne Pages

Real-World Comparison: RAG Architecture Diagram

Traditional Draw.io Workflow

Open Draw.io → search cloud icons → drag boxes → manually draw connectors → align layout → add labels → adjust colors → export. Time: ~45 minutes; any change requires near-complete redo.

next-ai-draw-io Workflow

Chat: "Generate a RAG chat app architecture with data ingestion pipeline"

Wait ~30 seconds → editable Draw.io diagram appears

Follow-up: "Add a cache layer between LLM and user"

Minor manual drag to fine-tune node positions

Total time: <5 minutes; changes via single sentences.

Competitive Comparison

next-ai-draw-io : Native drag-and-drop edit ✅; Low incremental edit difficulty (single-node edits); Built-in Draw.io cloud icon library ✅; Best for architecture reviews, complex flowcharts, frequent revisions; Drawback: requires LLM API costs

Mermaid : No drag-and-drop (code-only) ❌; High incremental edit difficulty (layout breaks on complex graphs); Limited icons ❌; Best for simple flowcharts in Markdown docs; Drawback: high debugging cost for complex diagrams

PNG generation (Midjourney, etc.) : Not editable ❌; Must regenerate entire image; Average icon support; Best for concept art, marketing visuals; Drawback: no post-generation modification

Target Users

Developers: rapid system architecture diagrams for technical docs

Technical bloggers: one-click illustrations without breaking writing flow

Product managers: business flowcharts, feature structure maps

Architects: quick technical review diagrams

Students: thesis flowcharts, project schematics

Anyone who communicates via diagrams

The tool returns diagramming to its essence: you describe the idea, AI drafts, you refine by dragging.

Project Repository

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