Next AI Draw.io：AI 驱动的智能图表绘制工具

项目简介

在当今 AI 技术飞速发展的背景下，Next AI Draw.io 是一个基于 Next.js 的 AI 驱动图表创建工具。

想象一下，你只需说“给我画一个云原生微服务架构图”，AI 就能在 draw.io 画布上为你生成专业的架构图表——这正是 Next AI Draw.io 带来的体验。

相关地址：

GitHub 地址：https://github.com/DayuanJiang/next-ai-draw-io
演示地址：https://next-ai-drawio.jiang.jp/

🚀 快速部署指南

在线体验

无需安装，可直接访问演示网站。您可以在聊天面板的设置中配置自己的 API 密钥以绕过使用限制，密钥仅存储在浏览器本地。

桌面应用

可从 GitHub Releases 页面下载 Windows、macOS 或 Linux 的本地桌面应用。

Docker 一键部署（推荐）

对于想要快速体验的用户，Docker 是最佳选择：

# 使用 OpenAI GPT-4o 模型
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 部署

services:
  next-ai-draw-io:
    image: ghcr.io/dayuanjiang/next-ai-draw-io:latest
    container_name: next-ai-draw-io
    restart: unless-stopped
    ports:
      - "3100:3000"
    environment:
      - AI_PROVIDER=openai
      - AI_MODEL=kimi-k2-turbo-preview   # 模型名称
      - OPENAI_BASE_URL=https://api.moonshot.cn/v1 # 模型地址（如使用 Kimi）
      - OPENAI_API_KEY=_API_KEY # api key

启动命令：

docker-compose up -d

访问 http://<服务器IP>:<端口> 即可使用。

源码安装部署

克隆仓库并安装依赖：

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local

配置环境变量（参考下文 支持的 AI 服务商）。
运行开发服务器：
```
npm run dev
```
在浏览器中打开 http://localhost:6002。

🎨 使用示例

创建系统流程图

提示词示例：设计一个用户登录系统的流程图，包含验证、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 / V3.2	性价比高，中文支持好
Ollama	本地模型	数据安全，完全离线
Azure OpenAI	GPT-4	企业级合规需求
ByteDance Doubao	K2-thinking	由字节跳动豆包提供 API 赞助
AWS Bedrock	(默认)
OpenRouter

通用配置：
如果你使用的模型兼容 OpenAI API 格式但不在上述列表中，可以使用以下通用配置：

AI_PROVIDER=openai
AI_MODEL=你的模型名称
OPENAI_BASE_URL=你的模型 API 地址
OPENAI_API_KEY=你的 api key

💡 使用技巧

提供明确的需求
越详细的描述，AI 生成的图表越精准。包括：
- 图表类型（架构图、流程图、时序图等）。
- 使用的图标库（AWS、Azure、GCP 或通用）。
- 具体的组件和连接关系。
利用版本历史
每次 AI 修改都会创建新的版本，你可以：
- 查看每次修改的具体内容。
- 比较不同版本间的差异。
- 随时回退到之前的版本。
渐进式优化
先让 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 工具集。

Author:Smoothcloud润云

Next AI Draw.io：AI 驱动的智能图表绘制工具