Next AI Draw.io: A Chat-Driven Diagram Editor Built on draw.io and Multiple LLM Providers

What This Tool Actually Solves

Most diagram editors force you to drag shapes and connect them manually. Next AI Draw.io attacks that friction by letting you describe the diagram in plain language. The README shows prompts like "Generate a RAG architecture diagram for chat application" or "Draw a cute cat for me," and the app produces an editable draw.io file. The target user is someone who already knows draw.io but wants to skip the mechanical parts of diagram building. It also addresses a second problem: turning existing material into diagrams. You can upload an image, a PDF, or a text file, and the AI will attempt to replicate or extract content from it. That is a different workflow from prompt-only generation, and it is the part that distinguishes this project from a simple chat wrapper around draw.io.

The Mechanism: Chat, XML, and the Editor

The core loop is straightforward. You type a command in the chat panel, the app sends it to a configured LLM, and the model returns diagram content that the draw.io editor renders. The README mentions "AI Reasoning Display" for models like OpenAI o1/o3, Gemini, and Claude, which suggests the app can show the model's chain of thought before the final diagram appears. For editing, the app keeps a "Diagram History" that tracks changes, so you can view and restore previous versions before an AI edit overwrites your work. The architecture is a standard Next.js front end with a server side that handles provider API calls. The key technical detail is that the LLM must produce output that draw.io can parse. That is likely XML in the draw.io format, though the README does not spell out the exact schema. The repo layout includes a separate MCP server package, which means the diagram generation logic is not locked to the web UI; it can be invoked from Claude Desktop, Cursor, or VS Code through the Model Context Protocol.

Getting It Running: Commands and Configuration

The quickest path is the hosted demo at next-ai-drawio.jiang.jp, where you can bring your own API key. The README states that your key is stored locally in the browser and never on the server. For local development, the steps are explicit: clone the repository, run npm install, copy env.example to .env.local, then start the dev server with npm run dev. The app listens on port 6002, not the usual 3000, so you need to open http://localhost:6002. There is also a Docker guide referenced in the docs folder, and a desktop application for Windows, macOS, and Linux distributed through the Releases page. Deployment options include one-click buttons for Tencent EdgeOne Pages and instructions for Vercel and Cloudflare Workers. The README points to a separate provider configuration guide (docs/en/ai-providers.md) for setting up each LLM vendor, and there is an admin panel for server-side multi-model configuration. So the setup is not a single command; you must pick a provider and supply credentials before the chat interface becomes useful.

Multi-Provider Support and Its Trade-Off

The project does not force you into one LLM vendor. The README lists multi-provider support, and the sponsorship note mentions that the demo site uses the glm-4.7 model from ByteDance Doubao. There is also a reference to Atlas Cloud, which offers an OpenAI-compatible API that can route to DeepSeek, Qwen, GLM, Kimi, MiniMax, and others through a single connection. That flexibility is a strength, but it carries a cost. Each provider has different output formats and reasoning behaviors. The app must normalize those responses into something draw.io can consume. If a model returns valid text but malformed diagram XML, the editor will likely fail or produce a broken diagram. The README does not describe any fallback or validation layer, so the reliability of the output depends heavily on the model you choose. For a user who wants predictable results, that means testing multiple providers before settling on one. The admin panel for server-side models helps, but it also adds configuration overhead that a single-provider tool would not have.

The MCP Server: Extending Beyond the Browser

A notable part of this project is the MCP server package. The README gives a JSON snippet for adding it to MCP-compatible clients, and a one-line command for Claude Code CLI: claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest. Once configured, you can ask Claude to create a flowchart or other diagram, and it appears in your browser in real time. This is a different access pattern from the web app. Instead of typing into a chat panel, you are giving instructions to an AI agent that then calls the draw.io tool. The MCP server makes the diagram capability reusable across different coding assistants, which is useful for developers who already work inside Cursor or VS Code. The trade-off is that you now depend on the MCP client's ability to handle tool calls correctly, and you need to have the server running or available via npx. The README points to a dedicated MCP server README for VS Code and Cursor configurations, but that file is not included in the README, so the exact setup steps beyond the JSON snippet are unverified.

Limitations and Cases Where It Is the Wrong Tool

The most obvious limitation is that the app is only as good as the LLM behind it. The README's example prompts include a cat sketch, which suggests the model can produce arbitrary visual output, but that is a far cry from a precise cloud architecture diagram. For complex, well-specified diagrams, the model may hallucinate shapes or connections that do not match your intent. The version history feature mitigates that by letting you restore previous states, but it does not prevent bad output. Another limitation is the dependency on a live network connection to the LLM. The desktop app and Docker deployment still require an API endpoint, so this is not an offline tool. If you work in an air-gapped environment or have strict data residency requirements, this project is the wrong choice. Also, the README does not mention any export format beyond draw.io's native format. If your team uses a different diagramming standard like PlantUML or Mermaid, you would have to convert manually. Finally, the demo site has usage limits; the README suggests bringing your own API key to bypass them, but that assumes you have a key and are willing to use it in a third-party hosted app.

A Real Alternative: Plain draw.io with Manual Work

The most direct alternative is not another AI tool but draw.io itself, used without any AI layer. draw.io is a mature, widely deployed diagram editor that runs in the browser or as a desktop app. Its approach is manual: you place shapes, connect them, and style them by hand. That gives you full control over the final layout and eliminates the risk of an LLM misinterpreting your request. The difference in approach is fundamental. Next AI Draw.io optimizes for speed of initial creation, while plain draw.io optimizes for precision and determinism. If you need a diagram that must match an exact specification, or if you are iterating on a small change, manual editing is often faster than typing a prompt and then fixing the AI's mistakes. The AI tool shines when you need a first draft or when you want to convert a text description into a visual quickly. For teams that already have draw.io templates and libraries, adding an AI layer might not save time if the model ignores those templates. The README does not mention any support for importing custom draw.io libraries, so the AI likely works from a generic shape set.

Maintenance, Licensing, and What to Verify First

The project is under active development, with releases v0.4.14, v0.4.15, and v0.4.16 pushed between March and May 2026. The repository is not archived, and the last push matches the latest release date. That suggests ongoing maintenance, but the README does not include a changelog or upgrade notes, so the cost of moving between versions is unclear. The license is Apache-2.0, which is permissive for commercial use, but you should read the full terms if you plan to embed this in a proprietary product. The README includes sponsor links, which means the project has external funding but also that the demo site may change its default model or usage limits at any time. Before adopting this for a team, verify three things. First, confirm that your chosen LLM provider is supported and that the provider guide matches the version you deploy. Second, test the MCP server with your specific client, because the README only gives a generic JSON snippet. Third, check the Docker guide for resource requirements, since the app runs a Next.js server and may need more memory than a simple static site. The desktop app is distributed via GitHub Releases, so you should verify that the binary for your platform is signed and up to date. None of these steps are documented in the main README, so you will need to dig into the docs folder and the MCP server README to get the full picture.

Editorial conclusion

Adopt Next AI Draw.io if you already live inside draw.io and want a chat front end that can generate and revise diagrams without leaving the browser. It is a poor fit if you need a fully offline tool, since the demo site stores your API key only locally but the app still requires a network connection to reach the LLM. Before committing, verify which provider you will use: the README points to a provider configuration guide and an admin panel for server-side models, and you should confirm that the model you pick supports the structured XML output the editor expects. Check the Docker guide if you want to avoid the demo site, and review the Apache-2.0 license if you plan to redistribute the app.

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes