Next AI Draw.io: AI draw.io Diagram Generator
DayuanJiang/next-ai-draw-ioNext AI Draw.io is an open-source AI draw.io diagram generator built on Next.js. You describe a diagram in plain language in a chat panel, and it writes the draw.io XML behind the scenes — so the result opens as a normal, editable draw.io diagram, not a flat image you can't touch.
Reach for Next AI Draw.io if you want to go from a prompt like 'RAG architecture for a chat app' to an editable draw.io diagram, and you're fine wiring up your own LLM (OpenAI, Anthropic, Bedrock, Ollama, etc.). Skip it if you want a zero-config hosted product with no API keys, or you need a rich freeform canvas rather than draw.io's boxes-and-connectors style — this is a Next.js front end around draw.io XML, so you inherit both draw.io's strengths and its limits.
The problem it solves
Turning an idea into a diagram usually means dragging boxes and connectors by hand in a tool like draw.io. Generic AI image generators can sketch something that looks like a diagram, but you can't open it and move a node — it's a picture, not a graph. What's missing is AI that outputs the actual diagram format so you can keep editing it afterward.
What is it?
Next AI Draw.io is an open-source (Apache-2.0) AI draw.io diagram generator written in TypeScript. It's a Next.js web app that pairs a chat interface with an embedded draw.io editor via the react-drawio component. You type natural-language commands, the AI generates or modifies the underlying draw.io XML using the Vercel AI SDK, and the diagram updates live in the canvas. Because the output is real draw.io XML, you can refine it by hand or ask the AI to change it further. It's bring-your-own-model and supports many providers, with AWS Bedrock as the default.
Why it's getting attention
The pitch lands because it fixes a specific gap: AI that writes editable draw.io XML instead of a static image. The repo reports over 33,000 GitHub stars and carries a Trendshift badge in its README, and it leans into things developers ask for — an MCP server so Claude, Cursor, or VS Code can create diagrams, broad multi-provider support including local Ollama models, and a live demo you can try without installing anything.
Key features
- ✓Generates and edits draw.io diagrams from natural-language prompts, outputting real draw.io XML you can keep editing
- ✓Image-based replication: upload an existing diagram or image and have the AI recreate it, per the README
- ✓PDF and text-file upload to pull content out of documents and turn it into a diagram
- ✓Diagram history with version control, so you can restore an earlier version before an AI edit
- ✓Specialized support for cloud architecture diagrams (AWS, GCP, Azure), plus animated connectors
- ✓An MCP server so AI agents like Claude Desktop, Cursor, and VS Code can drive diagram creation
- ✓Bring-your-own-model across many providers (Bedrock default, OpenAI, Anthropic, Google, Azure, Ollama, OpenRouter, DeepSeek, and more)
Best use cases
- •Drafting software and cloud architecture diagrams (AWS/GCP/Azure) from a text description, then tidying them by hand
- •Turning a PDF spec or notes into a first-pass diagram instead of starting from a blank canvas
- •Recreating a diagram you only have as an image so you get an editable version back
- •Letting an AI agent in Cursor, VS Code, or Claude Desktop create diagrams over MCP while you work
- •Self-hosting a diagram assistant that talks to a local Ollama model when data can't leave your network
How to install / try
Try it first on the hosted demo at next-ai-drawio.jiang.jp with no install. To run it yourself, clone the repo and use Node: `git clone https://github.com/DayuanJiang/next-ai-draw-io`, `cd next-ai-draw-io`, `npm install`, then `cp env.example .env.local` and add your provider keys (see the README's Provider Configuration Guide). Start with `npm run dev` and open http://localhost:6002. There are also prebuilt desktop apps for Windows, macOS, and Linux on the Releases page, a Docker guide, and one-click deploys to Vercel, Tencent EdgeOne Pages, and Cloudflare Workers.
How to use
Open the app, pick a provider and paste an API key in Settings (or set server-side models via env vars so users don't need their own key). Type a prompt in the chat panel — the README's examples include 'Generate a RAG architecture diagram for a chat application' and 'Generate authentication using React with AWS, use serverless architecture.' The AI writes draw.io XML and the diagram appears in the canvas, where you can edit nodes directly or ask for more changes. To wire the MCP server into Claude Code, the README shows: `claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest`.
Strengths
- ✓Output is editable draw.io XML, not a flat image — you can hand-tune the result or iterate with the AI
- ✓Genuinely provider-agnostic: many hosted models plus local Ollama, with keys stored in your browser on the demo
- ✓MCP server lets existing agent tools (Claude, Cursor, VS Code) generate diagrams without leaving the editor
- ✓Practical extras beyond text prompts — image replication, PDF/text ingestion, and diagram version history
- ✓Multiple deploy paths (self-host, Docker, desktop app, Vercel/EdgeOne/Cloudflare) under a permissive Apache-2.0 license
Limitations & risks
- △You bring and pay for the LLM — there's no bundled model, and the hosted demo has usage limits unless you add your own key
- △Diagram quality varies by model: the README recommends strong models (Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, DeepSeek V3.2/R1) for the strict XML formatting, and notes Claude is best for cloud-architecture logos
- △You're tied to the draw.io XML and Next.js stack — great for boxes-and-connectors diagrams, less so for freeform or highly custom visuals
- △It's one maintainer's project (sponsor-funded demo), so the hosted site and roadmap depend on that support continuing
- △Parts like the admin panel and multi-model server config add real setup once you move past the single-key quick start
Alternatives
Who should try it — and who should skip
Developers and architects who live in draw.io and want an AI shortcut to the first draft of a diagram, especially cloud-architecture ones, while keeping the result fully editable. It fits teams that already have an LLM provider (or want to run Ollama locally) and are comfortable self-hosting a Next.js app. If you want a polished hosted product with no keys to manage, or a freeform visual canvas, look at a commercial tool like Eraser or a whiteboard like Excalidraw instead.
Frequently asked questions
Next AI Draw.io is an open-source AI draw.io diagram generator — a Next.js web app that turns natural-language prompts into editable draw.io diagrams by having an LLM write the underlying draw.io XML, which renders live in an embedded editor.
It's bring-your-own-model. The README lists AWS Bedrock (default), OpenAI, Anthropic, Google AI/Vertex, Azure OpenAI, Ollama, OpenRouter, DeepSeek and more, and recommends strong models like Claude Sonnet 4.5 or GPT-5.1 for the strict XML formatting.
Yes. It ships an MCP server, so agents like Claude Desktop, Cursor, and VS Code can create diagrams. For Claude Code the README shows: claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest.
The code is open source under Apache-2.0 and you can self-host it (clone and npm run dev, Docker, or deploy to Vercel/EdgeOne/Cloudflare). You still pay your own LLM provider, and the public demo has usage limits unless you add your own API key.
Generic image generators produce a static picture you can't edit. Next AI Draw.io generates real draw.io XML, so the output opens as an editable diagram where you can move nodes, tweak it by hand, or ask the AI to revise it.