winget install --id=DayuanJiang.NextAIDrawio -e A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
> Note: Thanks to 
ByteDance Doubao sponsorship, the demo site now uses the powerful K2-thinking model!
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
Here are some example prompts and their generated diagrams:
<strong>Animated transformer connectors</strong>
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
<img src="./public/animated_connectors.svg" width="480" />
<strong>GCP architecture diagram</strong>
<p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/gcp_demo.svg" width="480" />
<strong>AWS architecture diagram</strong>
<p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/aws_demo.svg" width="480" />
<strong>Azure architecture diagram</strong>
<p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
<img src="./public/azure_demo.svg" width="480" />
<strong>Cat sketch prompt</strong>
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
<img src="./public/cat_demo.svg" width="240" />
> Preview Feature: This feature is experimental and may not be stable.
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
Then ask Claude to create diagrams: > "Create a flowchart showing user authentication with login, MFA, and session management"
The diagram appears in your browser in real-time!
See the MCP Server README for VS Code, Cursor, and other client configurations.
No installation needed! Try the app directly on our demo site:
> Bring Your Own API Key: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
Download the native desktop app for your platform from the Releases page:
Supported platforms: Windows, macOS, Linux.
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
See the Provider Configuration Guide for detailed setup instructions for each provider.
npm run dev
You can deploy with one click using Tencent EdgeOne Pages.
Deploy by this button:
Check out the Tencent EdgeOne Pages documentation for more details.
Additionally, deploying through Tencent EdgeOne Pages will also grant you a daily free quota for DeepSeek models.
The easiest way to deploy is using Vercel, the creators of Next.js. Be sure to set the environment variables in the Vercel dashboard as you did in your local .env.local file.
See the Next.js deployment documentation for more details.
All providers except AWS Bedrock and OpenRouter support custom endpoints.
📖 Detailed Provider Configuration Guide - See setup instructions for each provider.
Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via AI_MODELS_CONFIG environment variable (JSON string) or ai-models.json file.
Model Requirements: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
Note that the claude series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
The application uses the following technologies:
ai + @ai-sdk/*): For streaming AI responses and multi-provider supportDiagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
Special thanks to ByteDance Doubao for sponsoring the API token usage of the demo site! Register on the ARK platform to get 500K free tokens for all models!
If you find this project useful, please consider sponsoring to help me host the live demo site!
For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
See FAQ for common issues and solutions.