DayuanJiang/next-ai-draw-io
GitHub: DayuanJiang/next-ai-draw-io
基于 Next.js 的 AI 驱动 draw.io 图表工具，让用户通过自然语言对话和文件上传来创建、修改及增强各类可视化图表。
Stars: 33597 | Forks: 3621
# Next AI Draw.io
## 功能
- **LLM 驱动的图表创建**：利用大型语言模型直接通过自然语言命令创建和操作 draw.io 图表
- **基于图像的图表复制**：上传现有的图表或图像，让 AI 自动复制并增强它们
- **PDF 和文本文件上传**：上传 PDF 文档和文本文件以提取内容，并从现有文档生成图表
- **AI 推理展示**：查看受支持模型（如 OpenAI o1/o3、Gemini、Claude 等）的思考过程
- **图表历史**：全面的版本控制功能，可跟踪所有更改，允许您在 AI 编辑之前查看并恢复图表的先前版本。
- **交互式聊天界面**：与 AI 实时交流以完善您的图表
- **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
- **动画连接器**：在图表元素之间创建动态动画连接器，以实现更好的可视化效果
## MCP Server
通过 MCP (Model Context Protocol) 在 Claude Desktop、Cursor 和 VS Code 等 AI agent 中使用 Next AI Draw.io。
```
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
```
### Claude Code CLI
```
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
```
然后让 Claude 创建图表：
图表将实时显示在您的浏览器中！
有关 VS Code、Cursor 和其他客户端配置，请参阅 [MCP Server README](./packages/mcp-server/README.md)。
## 快速开始
### 在线体验
无需安装！直接在我们的演示站点上试用该应用：
[](https://next-ai-drawio.jiang.jp/)
### 桌面应用
从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用：
支持的平台：Windows、macOS、Linux。
### 使用 Docker 运行
[前往 Docker 指南](./docs/en/docker.md)
### 安装说明
1. 克隆仓库：
```
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
```
有关每个 provider 的详细设置说明，请参阅 [Provider 配置指南](./docs/en/ai-providers.md)。
2. 运行开发服务器：
```
npm run dev
```
3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 即可查看应用程序。
## 部署
### 部署到 EdgeOne Pages
您可以使用 [腾讯 EdgeOne Pages](https://pages.edgeone.ai/) 进行一键部署。
通过以下按钮部署：
[](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
查看 [腾讯 EdgeOne Pages 文档](https://pages.edgeone.ai/document/deployment-overview) 了解更多详情。
此外，通过腾讯 EdgeOne Pages 部署还将获得 [DeepSeek 模型的每日免费配额](https://pages.edgeone.ai/document/edge-ai)。
### 部署到 Vercel
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
最简单的部署方法是使用 Next.js 的创建者 [Vercel](https://vercel.com/new)。请务必在 Vercel 控制面板中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
更多详细信息，请参阅 [Next.js 部署文档](https://nextjs.org/docs/app/building-your-application/deploying)。
### 部署到 Cloudflare Workers
[前往 Cloudflare 部署指南](./docs/en/cloudflare-deploy.md)
## 多 Provider 支持
- [字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
- AWS Bedrock (默认)
- OpenAI
- Anthropic
- Google AI
- Google Vertex AI
- Azure OpenAI
- Ollama
- OpenRouter
- AIHubMix
- DeepSeek
- SiliconFlow
- ModelScope
- SGLang
- Vercel AI Gateway
除 AWS Bedrock 和 OpenRouter 外，所有 provider 均支持自定义 endpoint。
📖 **[详细的 Provider 配置指南](./docs/en/ai-providers.md)** - 查看每个 provider 的设置说明。
### 服务端多模型配置
管理员可以配置多个服务端模型，这些模型可供所有用户使用，而无需个人 API key。可通过 `AI_MODELS_CONFIG` 环境变量（JSON 字符串）或 `ai-models.json` 文件进行配置。对于单一 provider 的快速设置，可以在 `AI_MODEL` 中列出以逗号分隔的模型 ID。
### 管理面板
设置 `ADMIN_PASSWORD` 环境变量并访问 `/admin`，即可通过 Web 面板管理服务器设置（模型、访问代码、功能、可观测性、配额），而无需手动编辑 `.env`。
📖 **[管理面板指南](./docs/en/admin-panel.md)** — 设置、优先级规则及说明。
**模型要求**：此任务需要强大的模型能力，以生成具有严格格式约束（draw.io XML）的长文本。推荐模型包括 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
请注意，`claude` 系列已针对带有 AWS、Azure、GCP 等云架构徽标的 draw.io 图表进行过训练。因此，如果您想创建云架构图，这是最佳选择。
## 工作原理
该应用程序使用以下技术：
- **Next.js**：用于前端框架和路由
- **Vercel AI SDK** (`ai` + `@ai-sdk/*`)：用于流式传输 AI 响应和多 provider 支持
- **react-drawio**：用于图表的表示和操作
图表表示为可在 draw.io 中渲染的 XML。AI 会处理您的命令，并相应地生成或修改此 XML。
## 支持与联系
如需支持或咨询，请在 GitHub 仓库中提交 issue，或通过以下方式联系维护者：
- 邮箱：me[at]jiang.jp
## 常见问题
有关常见问题和解决方案，请参阅 [常见问题](./docs/en/FAQ.md)。
## Star 历史
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
**AI 驱动的绘图工具 - 聊天、绘制、可视化**
English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
[](https://next-ai-drawio.jiang.jp/)
[](https://opensource.org/licenses/Apache-2.0)
[](https://nextjs.org/)
[](https://react.dev/)
[](https://github.com/sponsors/DayuanJiang)
[](https://next-ai-drawio.jiang.jp/)
一个 Next.js Web 应用，将 AI 功能与 draw.io 图表集成。通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
## 目录
- [Next AI Draw.io](#next-ai-drawio)
- [目录](#table-of-contents)
- [示例](#examples)
- [功能](#features)
- [MCP Server](#mcp-server)
- [Claude Code CLI](#claude-code-cli)
- [快速开始](#getting-started)
- [在线体验](#try-it-online)
- [桌面应用](#desktop-application)
- [使用 Docker 运行](#run-with-docker)
- [安装说明](#installation)
- [部署](#deployment)
- [部署到 EdgeOne Pages](#deploy-to-edgeone-pages)
- [部署到 Vercel](#deploy-on-vercel)
- [部署到 Cloudflare Workers](#deploy-on-cloudflare-workers)
- [多 Provider 支持](#multi-provider-support)
- [服务端多模型配置](#server-side-multi-model-configuration)
- [管理面板](#admin-panel)
- [工作原理](#how-it-works)
- [支持与联系](#support--contact)
- [常见问题](#faq)
- [Star 历史](#star-history)
## 示例
以下是一些提示词示例及其生成的图表：
|
Animated transformer connectors Prompt: Give me a **animated connector** diagram of transformer's architecture. 
|
|
|
RAG Technique Diagram Prompt: Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion 
|
Authentication using React and AWS Prompt: Generate authentication process using React with **AWS**. Use Serverless architecture. 
|
|
Open Innovation Prompt: Create visualization of Henry Chesbrough's Open Innovation model. 
|
Cat sketch Prompt: Draw a cute cat for me. 
|
标签：AI辅助, Draw.io, MCP, 图表生成, 自动化攻击, 请求拦截