Next AI Draw.io
概述
next-ai-draw-io 是一个开源的 Next.js Web 应用程序，它将大型语言模型 (LLMs) 的强大功能与广泛使用的绘图工具 draw.io 相结合。它使用户能够通过在聊天界面中输入自然语言指令来创建、修改和增强专业图表——无需手动拖放。
该项目旨在弥合对话式 AI 与可视化图表创建之间的差距，使开发人员、架构师和非技术用户都能轻松地在几秒钟内生成高质量的图表。
主要功能
🧠 LLM 驱动的图表创建
用户可以用纯英文（或其他语言）描述他们想要的内容，AI 会自动生成相应的 draw.io XML 图表。指令可以从简单的请求，如“绘制流程图”，到复杂的请求，如“生成一个带有负载均衡器、EC2 实例和 RDS 数据库的 AWS 架构”。
🖼️ 基于图像的图表复制
用户可以上传现有的图表图像或截图，AI 将对其进行分析并将其复制为可编辑的 draw.io 图表。这对于数字化手绘草图或重新创建文档中的图表特别有用。
📜 图表版本历史
对图表的每一次更改都会被跟踪。用户可以浏览完整的版本历史记录并恢复到任何之前的状态，为尝试 AI 生成的修改提供安全网。
💬 交互式聊天界面
实时聊天面板允许用户迭代地完善他们的图表。用户可以输入诸如“使箭头动起来”或“添加一个连接到 API 服务器的数据库节点”之类的指令，图表会相应更新。
☁️ 云架构支持
该工具对为主要云提供商生成架构图提供专门支持：
- AWS (带有官方 AWS 图标)
- GCP (带有 GCP 图标)
- Azure (带有 Azure 图标)
🎨 动画连接器
支持在图表节点之间创建动画、动态连接器，以获得更具表现力和视觉吸引力的图表。
技术栈
| 技术 | 作用 |
|---|---|
| Next.js 15 | 前端框架和 API 路由 |
| TypeScript | 类型安全的代码库 |
| Vercel AI SDK | 流式 AI 响应，多提供商抽象 |
| react-drawio | 图表渲染和操作 |
| Tailwind CSS + shadcn/ui | UI 组件和样式 |
| Docker | 容器化部署 |
多提供商 LLM 支持
该应用程序抽象了 LLM 提供商的配置，允许用户接入以下任何一种：
- AWS Bedrock (默认)
- OpenAI / 兼容 OpenAI 的 API
- Anthropic (Claude)
- Google AI (Gemini)
- Azure OpenAI
- Ollama (本地 LLM)
- OpenRouter
- DeepSeek
注意：
claude-sonnet-4-5特别推荐用于 AWS 架构图，因为它已在带有 AWS 徽标的 draw.io 图表上进行了训练。
项目结构
app/
api/chat/ # 带有 AI 工具调用的聊天 API 端点
page.tsx # 主应用程序页面
components/
chat-panel.tsx # 聊天 UI 和图表控件
chat-input.tsx # 支持文件上传的输入框
history-dialog.tsx # 版本历史查看器
ui/ # 可重用 UI 组件
contexts/
diagram-context.tsx # 全局图表状态管理
lib/
ai-providers.ts # 多提供商 AI 配置
utils.ts # XML 处理工具
public/ # 静态资源和演示 SVG
入门
使用 Docker 快速启动
docker run -d -p 3000:3000 \
-e AI_PROVIDER=openai \
-e AI_MODEL=gpt-4o \
-e OPENAI_API_KEY=your_api_key \
ghcr.io/dayuanjiang/next-ai-draw-io:latest
然后打开浏览器访问 http://localhost:3000。
手动安装
# 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
# 安装依赖
npm install
# 配置环境
cp env.example .env.local
# 使用您的 AI 提供商设置编辑 .env.local
# 运行开发服务器
npm run dev
部署到 Vercel
点击下方按钮或遵循 Next.js 部署文档：
用例示例
| 提示 | 输出 |
|---|---|
| "给我一个关于 Transformer 架构的动画连接器图。" | 带有动画连接器的 Transformer 架构图 |
| "生成一个带有 GCP 图标的 GCP 架构图。" | 完整的 GCP 云架构 SVG |
| "生成一个带有 AWS 图标的 AWS 架构图。" | 带有官方图标的 AWS 云架构 |
| "生成一个带有 Azure 图标的 Azure 架构图。" | Azure 云架构图 |
| "给我画一只可爱的猫。" | draw.io 格式的插画猫咪图 |