Next AI Draw.io：AI赋能的在线图表绘制工具 | 提升效率与创意的完美结合

引言：

Next AI Draw.io 是一款基于 Next.js 框架开发的创新型在线图表绘制工具，它将人工智能技术与 draw.io 图表编辑器深度融合，旨在通过自然语言交互和 AI 辅助可视化，极大地简化图表的创建、修改和增强过程，从而提升用户的工作效率和创意表达。

核心功能与特性：

1. LLM 驱动的图表创建：
   • Next AI Draw.io 的核心优势在于其强大的 LLM (Large Language Model) 集成能力。用户可以通过简单的自然语言命令，直接创建和操作 draw.io 图表，无需手动拖拽和连接元素。例如，用户只需输入“绘制一个包含三个服务器的负载均衡架构图”，AI 即可自动生成相应的图表。
   • 这种基于自然语言的交互方式，极大地降低了图表创建的门槛，即使是没有专业设计技能的用户也能轻松上手。同时，也显著提升了专业人士的效率，让他们可以将更多精力集中在图表的内容和逻辑上，而非繁琐的操作步骤。
2. 图像复刻与增强：
   • 该工具还支持基于图像的图表复刻功能。用户可以上传现有的图表图片或草图，AI 会自动识别图中的元素和结构，并将其转化为可编辑的 draw.io 图表。
   • 更进一步，AI 还能对复刻后的图表进行增强，例如优化布局、添加缺失元素、调整颜色和样式等，从而使图表更加清晰、美观和专业。
3. 完整的图表历史记录：
   • Next AI Draw.io 具备完善的版本控制功能，可以跟踪所有图表变更，并记录每次修改的详细信息。
   • 用户可以随时查看和恢复到之前的图表版本，这对于协作编辑、错误回溯和灵感追溯都非常有帮助。
4. 交互式聊天界面：
   • 该工具提供了一个交互式的聊天界面，用户可以与 AI 进行实时对话，逐步细化图表的细节和样式。
   • 通过这种人机协作的方式，用户可以快速迭代图表设计，并获得 AI 的专业建议，从而创造出更具价值的图表作品。
5. AWS 架构图支持：
   • Next AI Draw.io 针对 AWS 架构图进行了专门优化，可以快速生成符合 AWS 规范的架构图。
   • 该工具内置了丰富的 AWS 图标库，并能自动识别和连接 AWS 服务，从而大大简化了 AWS 架构图的绘制过程。
6. 动态连接器：
   • 为了增强图表的可视化效果，Next AI Draw.io 支持创建动态和动画连接器。这些连接器可以模拟数据流、控制流或其他动态关系，使图表更具表现力和吸引力。

应用实例：

以下是一些使用 Next AI Draw.io 生成图表的示例：

• 动画 Transformer 连接器： 用户输入 “Give me a animated connector diagram of transformer’s architecture.”，AI 即可生成一个展示 Transformer 架构的动画连接器图表。
• GCP 架构图： 用户输入 “Generate a GCP architecture diagram with GCP icons. In this diagram, users connect to a frontend hosted on an instance.”，AI 即可生成一个包含 GCP 图标的 GCP 架构图，展示用户连接到托管在实例上的前端的场景。
• AWS 架构图： 用户输入 “Generate a AWS architecture diagram with AWS icons. In this diagram, users connect to a frontend hosted on an instance.”，AI 即可生成一个包含 AWS 图标的 AWS 架构图，展示用户连接到托管在实例上的前端的场景。
• Azure 架构图： 用户输入 “Generate a Azure architecture diagram with Azure icons. In this diagram, users connect to a frontend hosted on an instance.”，AI 即可生成一个包含 Azure 图标的 Azure 架构图，展示用户连接到托管在实例上的前端的场景。
• 猫的素描： 用户输入 “Draw a cute cat for me.”，AI 即可生成一个可爱的猫的素描图。

技术实现：

Next AI Draw.io 基于以下技术构建：

• Next.js： 用于构建前端框架和路由。
• Vercel AI SDK (ai + @ai-sdk/*): 用于流式传输 AI 响应和多提供商支持。
• react-drawio： 用于图表表示和操作。

图表以 XML 格式表示，可以在 draw.io 中渲染。AI 处理用户的命令并相应地生成或修改此 XML。

多供应商支持：

Next AI Draw.io 支持多种 AI 提供商，包括：

• AWS Bedrock (默认)
• OpenAI / OpenAI 兼容的 API (通过 OPENAI_BASE_URL)
• Anthropic
• Google AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek

快速上手：

以下是使用 Next AI Draw.io 的步骤：

1. 克隆存储库： git clone https://github.com/DayuanJiang/next-ai-draw-io
2. 进入目录： cd next-ai-draw-io
3. 安装依赖： npm install 或 yarn install
4. 配置 AI 提供商：
   • 创建 .env.local 文件：cp env.example .env.local
   • 编辑 .env.local 文件，配置所选的提供商：
     • 设置 AI_PROVIDER 为所选的提供商 (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
     • 设置 AI_MODEL 为要使用的特定模型
     • 添加提供商所需的 API 密钥
5. 运行开发服务器： npm run dev
6. 在浏览器中打开： http://localhost:3000

部署：

将 Next.js 应用程序部署到 Vercel 平台是最简单的方法。也可以通过提供的按钮进行部署。请务必在 Vercel 仪表板中设置环境变量，就像在本地 .env.local 文件中一样。

项目结构：

• app/: Next.js App Router
  • api/chat/: 具有 AI 工具的 Chat API 端点
  • page.tsx: 带有 DrawIO 嵌入的主页面
• components/: React 组件
  • chat-panel.tsx: 带有图表控制的聊天界面
  • chat-input.tsx: 带有文件上传的用户输入组件
  • history-dialog.tsx: 图表版本历史记录查看器
• ui/: UI 组件 (按钮、卡片等)
• contexts/: React 上下文提供程序
  • diagram-context.tsx: 全局图表状态管理
• lib/: 实用程序函数和助手
  • ai-providers.ts: 多供应商 AI 配置
  • utils.ts: XML 处理和转换实用程序
• public/: 静态资源，包括示例图像

未来发展方向 (TODOs)：

• 允许 LLM 修改 XML，而不是每次都从头开始生成。
• 提高形状流式更新的平滑度。
• 添加多个 AI 提供商支持 (OpenAI、Anthropic、Google、Azure、Ollama)。
• 解决会话时间超过 60 秒时生成失败的错误。
• 在 UI 上添加 API 配置。

支持与联系：

如果您觉得这个项目有用，请考虑赞助以帮助我托管实时演示站点！如需支持或咨询，请在 GitHub 存储库上打开一个 issue 或通过以下方式联系维护者：

• Email: me[at]jiang.jp

总结：

Next AI Draw.io 是一款功能强大、易于使用的 AI 赋能图表绘制工具，它将彻底改变用户创建和编辑图表的方式。通过自然语言交互、AI 辅助可视化和多供应商支持，该工具将极大地提升用户的工作效率和创意表达，使其成为设计师、工程师、项目经理和所有需要创建图表的人员的理想选择。

DayuanJiang/next-ai-draw-io: A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
https://github.com/DayuanJiang/next-ai-draw-io

https://next-ai-drawio.jiang.jp/