在AI技术重塑应用格局的时代，智能图表绘制工具正逐渐成为技术文档编写、系统设计与团队协作中不可或缺的利器。过去我常使用 draw.io 制作图表，而最近在 GitHub 上发现了一个为 draw.io 集成 AI 能力的项目——这无疑是为这款工具插上了智能的翅膀。今天，就让我们一起来了解这个令人期待的项目。
🌟 项目简介
在当今AI技术飞速发展的背景下，Next AI Draw.io 正是一款将人工智能与专业图表绘制完美融合的开源项目。这个基于Next.js的AI驱动图表创建工具，通过自然语言交互，让复杂的技术图表绘制变得前所未有的简单和高效。
想象一下，你只需说“给我画一个云原生微服务架构图”，AI就能在draw.io画布上为你生成专业的架构图表——这正是Next AI Draw.io带给我们的魔法体验。
当前项目在github上已有5.6k star
github地址：https://github.com/DayuanJiang/next-ai-draw-io
演示地址：https://next-ai-drawio.jiang.jp/
✨ 核心特性
🤖 AI驱动的智能图表创建
- 自然语言生成图表：用对话的方式描述你的需求，AI自动生成相应的draw.io图表
- 多云架构图支持：特别优化了AWS、GCP、Azure等云服务架构图的生成
- 图像转图表功能：上传现有图表或截图，AI帮你自动复制和增强
🎯 专业级图表功能
- 动画连接器：在图表元素间创建动态的连接线，让数据流动和关系更直观
- 完整的版本历史：每次AI修改都有记录，可以随时回退到之前的版本
- 多提供商支持：兼容市面上主流的大语言模型服务
🔧 开发者友好设计
- 本地API密钥管理：你的API密钥只保存在浏览器本地，确保数据安全
- 模块化架构：清晰的代码结构便于二次开发和定制
- 完整的类型支持：基于TypeScript开发，提供优秀的开发体验
🚀 快速部署指南
Docker一键部署（推荐）
对于想要快速体验的用户，Docker是最佳选择：
# 使用OpenAI GPT-4o模型，如果使用代理地址，指定OPENAI_BASE_URL
docker run -d -p 3000:3000 \
-e AI_PROVIDER=openai \
-e AI_MODEL=gpt-4o \
-e OPENAI_API_KEY=your_openai_key \
-e OPENAI_BASE_URL=your_proxy_url \
ghcr.io/dayuanjiang/next-ai-draw-io:latest
我本地使用的是docker-compose部署，一下是yml内容
services:
next-ai-draw-io:
# 若官方镜像下载慢，可以使用博主转存的镜像 registry.cn-hangzhou.aliyuncs.com/xjpublic/next-ai-draw-io:latest
image: ghcr.io/dayuanjiang/next-ai-draw-io:latest
container_name: next-ai-draw-io
restart: unless-stopped
ports:
- "3100:3000"
# 我使用的是kimi的模型，OPENAI_BASE_URL改为kimi的地址即可
environment:
- AI_PROVIDER=openai
- AI_MODEL=kimi-k2-turbo-preview
- OPENAI_BASE_URL=https://api.moonshot.cn/v1
- OPENAI_API_KEY=_API_KEY
若官方镜像下载慢，可以使用博主转存的镜像 registry.cn-hangzhou.aliyuncs.com/xjpublic/next-ai-draw-io:latest
使用以下命令启动项目
docker-compose up -d
访问 http://ip:port 即可使用
🎨 使用示例
创建系统流程图
提示词：设计一个用户登录系统的流程图，包含验证、session管理和错误处理
绘制网络拓扑
提示词：绘制一个企业级网络拓扑图，包含防火墙、交换机、路由器和服务器集群
复制和优化现有图表
上传现有的架构图或设计草图，AI会自动：
- 识别图中的元素和结构
- 生成规范的draw.io图表
- 根据需求进行优化和增强
🔌 支持的AI服务商
Next AI Draw.io支持几乎所有的主流AI服务，让你的选择更加灵活：
| 服务商 | 推荐模型 | 特点 |
|---|---|---|
| Anthropic | Claude 3.5 Sonnet | 对AWS图表特别优化，逻辑推理能力强 |
| OpenAI | GPT-4o, GPT-4 Turbo | 通用性强，响应速度快 |
| Google AI | Gemini 2.0 | 多模态能力强 |
| DeepSeek | DeepSeek-R1 | 性价比高，中文支持好 |
| Ollama | 本地模型 | 数据安全，完全离线 |
| Azure OpenAI | GPT-4 | 企业级合规需求 |
如果你使用的模型不在支持列表中，则可以使用通用openai参照以下配置
- AI_PROVIDER=openai # 使用openai，几乎所有模型都兼容openai格式
- AI_MODEL=kimi-k2-turbo-preview # 模型名称
- OPENAI_BASE_URL=https://api.moonshot.cn/v1 # 模型地址
- OPENAI_API_KEY=_API_KEY # api key
💡 使用技巧
1. 提供明确的需求
越详细的描述，AI生成的图表越精准。包括：
- 图表类型（架构图、流程图、时序图等）
- 使用的图标库（AWS、Azure、GCP或通用）
- 具体的组件和连接关系
2. 利用版本历史
每次AI修改都会创建新的版本，你可以：
- 查看每次修改的具体内容
- 比较不同版本间的差异
- 随时回退到之前的版本
3. 渐进式优化
先让AI生成基础框架，然后通过对话逐步优化：
"添加监控告警组件"
"将所有存储改为SSD"
"增加灾备恢复流程"
🛠️ 开发者进阶
项目架构
app/
├── api/chat/ # AI聊天API端点
├── page.tsx # 主页面
components/
├── chat-panel.tsx # 聊天界面
├── history-dialog.tsx # 历史记录查看器
lib/
├── ai-providers.ts # AI服务商配置
└── utils.ts # 工具函数
添加自定义功能
如果你想扩展功能，可以：
- 在
lib/ai-providers.ts中添加新的AI服务商 - 修改
components/chat-panel.tsx增强用户界面 - 扩展
app/api/chat/route.ts中的AI工具集
📊 性能优化建议
模型选择策略
- 复杂架构图：推荐使用Claude 3.5 Sonnet或GPT-4
- 简单流程图：可以使用GPT-4o或DeepSeek-R1节省成本
- 本地部署：考虑使用Ollama+本地模型保证数据安全
成本控制
- 设置访问密码，防止未授权访问
- 对于团队使用，考虑配置使用限额
- 定期检查API使用情况，优化提示词
🔮 未来展望
随着AI技术的不断发展，Next AI Draw.io也在持续进化：
- 实时协作：多用户同时编辑和AI辅助
- 模板库：预置行业标准图表模板
- 智能分析：基于图表内容的智能建议
- 插件生态：支持第三方扩展和集成
🎯 结语
在AI重塑应用的时代，Next AI Draw.io为我们展示了AI如何与传统工具结合，创造出1+1>2的价值。无论你是系统架构师、技术文档工程师，还是项目经理，这个工具都能大幅提升你的工作效率。
通过简单的部署步骤，你就能拥有一个强大的AI图表助手。开源的力量让每个人都能享受到最前沿的技术红利。
✅ 附: draw-io部署
docker-compose.yml
services:
draw:
image: jgraph/drawio
container_name: draw
restart: always
environment:
TZ: Asia/Shanghai
ports:
- 3000:8080
