Slide 1
You know draw.io. Now you just describe the diagram, and it draws itself in your browser. This is next-ai-draw-io. And the diagram it hands back isn't a picture. It's a real draw.io file you can grab and edit.
A chat on one side, a live draw.io canvas on the other
The setup's simple. A chat on one side, a live draw.io canvas on the other. You type something like "draw a RAG architecture for a chat app," and it fills in the boxes, the arrows, the labels, all of it. Here's one it drew.
It writes draw.io's own XML, not a picture
And here's the clever part. It's not an image generator. The AI's whole job is to write draw.io's own XML, the file format draw.io already uses. So when the diagram lands, every box and arrow is a real draw.io object. Grab one, rename it, move it, restyle it. Exactly like a diagram you drew by hand.
Every change is a version you can restore
Because it's a real file, it keeps a history. Every change is a version you can roll back to. Ask for one small tweak and the AI rewrites half your diagram? Restore the version from right before it touched anything. Nothing you made gets locked in, or lost.
The range is wider than you'd expect
The range is wider than you'd expect. Hand it a screenshot of an old diagram, or a PDF, and it rebuilds and extends it. Cloud diagrams come with the real AWS, GCP, and Azure icons. And it isn't locked to software. Ask for a cute cat, you get a cute cat. It runs on about fifteen model providers, bring your own key. One honest note: how sharp it gets depends on the model you point it at.
Now draw it straight from your coding agent
{ "mcpServers": { "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] } } }
Now the part that just shipped. The same engine runs as an MCP server. So Claude Code, Cursor, or VS Code can draw these diagrams for you, and watch them render in your browser live. One line adds it. Your coding agent, drawing straight into draw.io.
Getting it is easy
npm run dev → localhost:6002Want to try it? The demo runs in your browser, no install, your key stays local. There's a native desktop app for Windows, Mac, and Linux, a Docker image, or clone it and npm run dev. It's Apache-2.0, TypeScript, on Next.js sixteen and React nineteen, latest build v0.4.16.
next-ai-draw-io
So: describe a diagram, get one you can actually edit, roll back, and drive from your agent. If you make architecture diagrams, it's worth a weekend look. The link's on screen. New repo tomorrow.
