内容摘录
Next AI Draw.io
<div align="center">
**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
English | 中文 | 日本語
TrendShift
License: Apache 2.0
Next.js
React
Sponsor
Live Demo
</div>
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 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> ByteDance Doubao sponsorship, the demo site now uses the powerful K2-thinking model!
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
Table of Contents
Next AI Draw.io
Table of Contents
Examples
Features
MCP Server (Preview)
Claude Code CLI
Getting Started
Try it Online
Desktop Application
Run with Docker
Installation
Deployment
Deploy to EdgeOne Pages
Deploy on Vercel
Deploy on Cloudflare Workers
Multi-Provider Support
How It Works
Support \& Contact
FAQ
Star History
Examples
Here are some example prompts and their generated diagrams:
<div align="center">
<table width="100%">
<tr>
<td colspan="2" valign="top" align="center">
<strong>Animated transformer connectors</strong><br />
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
<img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
</td>
</tr>
<tr>
<td width="50%" valign="top">
<strong>GCP architecture diagram</strong><br />
<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" alt="GCP Architecture Diagram" width="480" />
</td>
<td width="50%" valign="top">
<strong>AWS architecture diagram</strong><br />
<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" alt="AWS Architecture Diagram" width="480" />
</td>
</tr>
<tr>
<td width="50%" valign="top">
<strong>Azure architecture diagram</strong><br />
<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" alt="Azure Architecture Diagram" width="480" />
</td>
<td width="50%" valign="top">
<strong>Cat sketch prompt</strong><br />
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
<img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
</td>
</tr>
</table>
</div>
Features
**LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
**Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
**PDF & Text File Upload**: Upload PDF documents and text files to extract content and generate diagrams from existing documents
**AI Reasoning Display**: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
**Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
**Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
**Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
**Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
MCP Server (Preview)
**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).
Claude Code CLI
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.
Getting Started
Try it Online
No installation needed! Try the app directly on our demo site:
Live Demo
**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.
Desktop Application
Download the native desktop app for your platform from the Releases page:
Supported platforms: Windows, macOS, Linux.
Run with Docker
Go to Docker Guide
Installation
Clone the repository:
See the Provider Configuration Guide for detailed setup instructions for each provider.
Run the development server:
Open http://localhost:6002 in your browser to see the application.
Deployment
Deploy to EdgeOne Pages
You can deploy with one click using Tencent EdgeOne Pages.
Deploy by this button:
Deploy to EdgeOne Pages
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.
Deploy on Vercel
Deploy with Vercel
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.
Deploy on Cloudflare Workers
Go to Cloudflare Deploy Guide
Multi-Provider Support
ByteDance Doubao
AWS Bedrock (default)
OpenAI
Anthropic
Google AI
Google Vertex AI
Azure OpenAI
Ollama
OpenRouter
DeepSeek
SiliconFlow
ModelScope
SGLang
Vercel AI Gateway
All providers except AWS Bedrock and OpenRouter support custom endpoints.
📖 **Detailed Provider Configuration Guide** - See setup instructions for each provider.
Server-…