Next AI Draw.io

Next AI Draw.io 是一个基于 Next.js 的 Web 应用，将大语言模型（LLM）与 draw.io 的强大图表能力深度集成。用户可通过自然语言指令创建、修改和增强专业图表，无需手动拖拽。

💡 支持 AWS 架构图、流程图、系统设计图等，并可上传图像自动复现为可编辑 XML。

核心功能

• 自然语言绘图
  用文字描述需求（如“画一个包含 S3、Lambda 和 API Gateway 的 AWS 架构图”），AI 自动生成 draw.io 兼容的图表。
• 图像转图表
  上传现有图表截图或手绘草图，AI 自动识别结构并生成可编辑的矢量图。
• 智能增量编辑
  AI 直接修改 XML 中的特定节点，而非重新生成整张图，保留原有布局并提升效率。
• 图表版本历史
  自动保存每次 AI 修改前的状态，支持一键回滚到任意历史版本。
• 交互式聊天界面
  在侧边栏与 AI 实时对话，逐步优化图表细节（如“将 Lambda 函数改成红色”）。
• AWS 架构图优化支持
  使用 claude-sonnet-4-5 模型（在 AWS 官方图标上微调）可生成高度准确的云架构图。
• 动画连接器（实验性）
  支持在节点间添加动态流动效果，提升可视化表现力。

技术栈

• 前端框架：Next.js（App Router）
• AI 集成：Vercel AI SDK（ai + @ai-sdk/*），支持流式响应与多模型切换
• 图表引擎：react-drawio（基于 draw.io 的 React 封装）
• 数据格式：draw.io XML（标准 .drawio 格式，可导出/导入到 draw.io、Confluence 等）

多 AI 提供商支持

应用支持灵活切换以下 LLM 提供商（通过 AI_PROVIDER 环境变量配置）：

✅ 提示：claude-sonnet-4-5 在 AWS 官方图标集上微调，生成云架构图准确率最高。

快速开始

1. 克隆项目

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

2. 安装依赖

npm install
# 或
yarn install

3. 配置 AI 提供商

cp env.example .env.local

编辑 .env.local，例如使用 AWS Bedrock：

AI_PROVIDER=bedrock
AI_MODEL=anthropic.claude-3-5-sonnet-20241022-v2:0
# AWS 凭证通过 AWS CLI 或环境变量配置（如 AWS_ACCESS_KEY_ID）

其他提供商需填写对应 API 密钥（详见 env.example 注释）。

4. 启动开发服务器

npm run dev

访问 http://localhost:3000

部署到 Vercel（推荐）

点击一键部署按钮：

注意：在 Vercel 项目设置中配置与 .env.local 相同的环境变量。