dayuan.jiang
75ffc32a49
Five reviewers (Fable 5.1, Opus 5.5, Sonnet 5.5, Codex GPT-6 Astra, Codex GPT-6.1 Sol) found no behavior or security regression; this commit applies what they asked for. Settings dialog: the automatic model list fetch only fills the list, which waits behind 'Browse models'; it no longer opens the picker (the modal picker took the focus from whatever the user was typing) and shows no error of its own. One list request per provider at a time, so a click during the automatic fetch sends nothing twice; the baseline that detects freshly entered credentials is taken on every visit of a provider page; SGLang's prefilled local example URL triggers no fetch. Entries saved with Azure's old placeholder URL still count as having no URL. The base URL field of Azure and of the custom preset is labelled required (new dictionary key baseUrlRequired). Smaller code: the PROVIDER_INFO alias is gone (three files and the tests import PROVIDERS), as are three logo values no code read, two unused type re-exports, three unused exports and SINGLE_SYSTEM_PROVIDERS (the chat route reads the record). Renamed for clarity: REQUIRED_KEY_VARS, requiredKeyEnv, configuredUrl, LocalizedText. Seven stale comments rewritten; the custom preset's note shortened. Tests: the matrix gains six override shapes (a Vertex key alone, AWS keys with a session token, headers with a URL, a trusted URL with a key, a key with a server model's URL variable, '/' alone), 5843 rows; the new rows were regenerated on the pre-refactor code and match it. The matrix and the server credential tests clear every variable they read; the admin variable table covers every provider; a test that derived its expectation from the function under test is gone; the singleSystem, listNeedsNoKey, sdkKnowsEndpoint and auto-detection sets are spelled out. Docs: the READMEs say 25 providers and name the OpenAI-compatible preset; the AI_PROVIDER lists are complete; the Azure example URL has its /openai suffix; 'Adding a Provider' names the tests to update.
8.8 KiB
Next AI Draw.io
Draw and edit draw.io diagrams by chatting with an AI.
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change. Every AI change is a version you can compare, restore or undo, and the result exports as .drawio, .png or .svg.
Available as a web app, a desktop app for Windows, macOS and Linux, and an MCP server for AI agents such as Claude Code, Cursor and VS Code.
Highlights
Draw
- Architecture diagrams, flowcharts, sequence diagrams and more from one sentence, with built-in AWS, Azure, GCP and Kubernetes icon libraries
- Connectors can carry a flowing animation
- Upload a screenshot or a sketch and the AI redraws it; upload PDF, Markdown, code and other text files and get a diagram of their content
Edit
- Edit by chat: changes stream onto the canvas and the shapes the AI just changed are highlighted
- Ask about a selection: select shapes on the canvas and the AI changes only those
- Versions and undo: every AI change is a version card with a thumbnail; compare it with the canvas, restore it or undo it, and Ctrl+Z on the canvas also takes back an AI change in one step
- It is a normal draw.io diagram: double-click to rename, drag, restyle, use several pages, and export as
.drawio,.png,.svgor.drawio.svgat any time
Use
- 25 model providers, including an OpenAI-compatible preset for any other URL; enter your own API key in the browser and it stays on your machine
- Models that reason show their thinking
- Dark mode; the interface is available in English, Simplified Chinese, Traditional Chinese and Japanese
Examples
|
Transformer architecture with animated connectors Prompt: Give me a animated connector diagram of transformer's architecture. 
|
|
|
RAG architecture Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion 
|
Authentication with React and AWS Prompt: Generate authentication process using React with AWS. Use Serverless architecture. 
|
|
Open Innovation model Prompt: Create visualization of Henry Chesbrough's Open Innovation model. 
|
Cat sketch Prompt: Draw a cute cat for me. 
|
Use it
Online demo
Open next-ai-drawio.jiang.jp, nothing to install. The demo has a usage limit; click the settings icon in the chat panel and enter your own provider and API key to lift it. The key stays in your browser and is never sent to the server for storage.
Desktop app
Download the Windows, macOS or Linux installer from the Releases page.
In your AI agent (MCP)
https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678
Through MCP (Model Context Protocol, the protocol AI agents use to call outside tools), Claude Desktop, Cursor, VS Code and others can draw draw.io diagrams directly. Add this to your client's MCP configuration:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
For Claude Code, one command does it:
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
Then ask the AI for "a flowchart of user authentication with login, MFA and session management" and the diagram appears in your browser as it is drawn. The MCP server has most of the web app's drawing features:
- The same drawing rules and icon libraries (AWS, Azure, GCP, Kubernetes and more)
- The preview is the same canvas as the web app: the AI's changes are outlined, one Ctrl+Z takes them back, and the AI can read the shapes you select
- The draw.io editor ships inside the package, so after install the preview works offline (
DRAWIO_BASE_URLpoints it at an external draw.io instead) - A screenshot tool, so the AI can look at the rendered diagram and fix it
- Version history, multi-page diagrams, and download as
.drawio,.png,.svgor.drawio.svg - Auto-save to
~/.next-ai-drawio/, so a diagram survives a restart - Ask the AI to undo, and keep your own drawing rules in
~/.next-ai-drawio/instructions.md
See the MCP server README for VS Code, Cursor and other client configurations.
Self-host
Run locally
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local # add your provider and API key, see "Models and providers" below
npm run dev
Open http://localhost:6002.
One-click deploy
| Platform | How |
|---|---|
| Tencent EdgeOne Pages |  Deploying there also gives you a daily free quota for DeepSeek models |
| Vercel | .env.local |
| Cloudflare Workers | Cloudflare deploy guide |
| Docker | Docker guide |
| Offline or intranet | Offline deployment |
Models and providers
25 providers are supported: AWS Bedrock (default), OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, SGLang, Vercel AI Gateway, Tencent EdgeOne, ByteDance Doubao, ModelScope, Zhipu GLM, Qwen, Qiniu, Kimi, MiniMax, Novita, Xiaomi MiMo, Atlas Cloud, and an OpenAI-compatible preset for any other URL (vLLM, LM Studio, a gateway). The environment variables and notes for each are in the provider configuration guide.
Which model: the task is to produce long text in a strict format (draw.io XML), so pick a capable model; small models tend to produce broken diagrams.
Several models and the admin panel: list several model IDs in AI_MODEL separated by commas, or configure models from several providers with the AI_MODELS_CONFIG environment variable or an ai-models.json file, and every user can use them without a key of their own. Set ADMIN_PASSWORD and open /admin to manage models, access codes, feature switches, observability and quotas from a web page; see the admin panel guide.
Support
- Questions and ideas: open a GitHub issue or email me[at]jiang.jp
- Common problems: FAQ
- If the project is useful to you, consider sponsoring to help keep the demo site running