Stop Manual Drag‑And‑Drop: Meet the 34k‑Star AI Draw.io Tool That Automates Diagram Creation

What the Project Is

The author embedded an AI chat panel directly into draw.io. By typing a description of the desired diagram, the AI generates corresponding nodes and connectors. After generation, text, position, color, and connections can be edited, and the AI can continue refining the diagram.

Feature Overview

Text‑to‑Diagram

Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion

The generated diagram includes modules such as data ingestion, retrieval, and generation, with arrows arranged according to data flow, eliminating the need for templates or starting from a blank canvas.

Continuous Editing

After the first version is created, additional modification requests can be issued, such as adding an approval node, merging modules, converting a flow to a swim‑lane diagram, or changing colors. The AI updates the existing diagram instead of recreating it from scratch. The author recommends making small, incremental changes—first adjust structure, then layout and color—to keep the result manageable.

PDF, Image, and Text Uploads

Beyond textual prompts, users can upload PDFs, text files, and images. PDFs and text files help organize charts; images can be used to reconstruct old diagrams into editable versions, provided a vision‑capable model is selected. Sensitive internal documents should be processed on a self‑hosted instance.

Diagram Version History

Next AI Draw.io saves diagram history, allowing users to view or restore previous versions. This enables multiple rounds of modification without fear of overwriting useful work.

Cloud Architecture Diagram Generation

The project includes icon libraries for AWS, GCP, and Azure. Generated drafts contain appropriate service icons, network boundaries, and call directions, producing diagrams that closely match common vendor‑specific styles.

MCP Integration

The MCP server exposes drawing capabilities to tools that support MCP, such as Claude Code, Cursor, and VS Code. These tools can create new diagrams, read the current diagram, edit nodes, and export to draw.io, PNG, or SVG. Real‑time preview lets users see AI changes instantly in the browser.

Model Service Configuration

The project does not lock any specific model. Providers like Doubao, DeepSeek, Kimi, Tongyi Qianwen, and Zhipu can be configured, as well as local models via Ollama. Simpler text‑only flowcharts work with stable models; image‑based diagrams require vision‑capable models. The documentation warns that overly small local models may only output reasoning without drawing.

Usage

Online Demo

Visit https://next-ai-drawio.jiang.jp/, open the chat panel settings, and enter the model service and API key. Keys are stored locally in the browser.

Docker Deployment

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=kimi \
  -e AI_MODEL=kimi-latest \
  -e KIMI_API_KEY=YOUR_KEY \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

After starting, open http://localhost:3000. Environment variables can also be placed in an .env file and loaded with --env-file .env.

Running from Source

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

Open http://localhost:6002 after launch and fill model service and key in .env.local. Without model configuration the diagram generation will not work.

Desktop Application

Release assets provide Windows, macOS, and Linux installers. macOS builds lack code signing, so the first launch may require manual security approval.

Suitable Scenarios

Writing technical proposals: generate a draft system diagram from a textual description for review.

Turning narrative documentation into flowcharts.

Reconstructing old screenshots into editable diagrams.

Creating cloud‑vendor architecture diagrams with built‑in icon libraries.

Integrating with AI‑assisted coding tools (Claude Code, Cursor, VS Code) to generate diagrams on demand.

Author's Opinion

AI‑generated diagrams are no longer novel, but the author recommends Next AI Draw.io because the output remains editable within draw.io, avoiding a full regeneration for each change. Nevertheless, the author cautions that AI can still produce incorrect branches, so manual verification of business logic, permissions, and data flows is essential. A conservative workflow—accepting the initial structure then manually refining nodes and connections—maximizes productivity while maintaining accuracy.