Next AI Draw.io: AI draw.io Diagram Generator
/next-ai-draw-io
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.
AI Diagrams You Can't Actually Edit
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.
A Chat Interface Wrapped Around draw.io
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 pairing a chat interface with an embedded draw.io editor via react-drawio. You type natural-language commands, the AI generates or modifies the draw.io XML via the Vercel AI SDK, and the diagram updates live. Output is real draw.io XML, so you can refine it by hand. It's bring-your-own-model, with AWS Bedrock as default.
From Prompt to Editable draw.io XML
- ✓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)
33,000 Stars and an MCP Server for Agents
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.
Cloud Architecture Diagrams and PDF-to-Diagram
- •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
Running It Locally or Trying the Hosted Demo
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.
Prompting the Canvas With Natural Language
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`.
Editable Output, Not a Flat Image
- ✓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
You Bring the Model, and the Quality Varies
- △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
Mermaid, Excalidraw, Eraser, draw.io Itself
Who Gets the Most Out of This Tool
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.
Next AI Draw.io Questions, Answered
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.
Related repositories
Curious whether next-ai-draw-io is right for you?
Let ChatGPT, Claude, or Perplexity look into it — click below and see what AI actually says about next-ai-draw-io.