Next AI Draw.io —— 一个集成AI能力的在线图表绘制Web应用

这是什么

DayuanJiang/next-ai-draw-io 是一个基于 Next.js 构建的开源 Web 应用，它将 AI 能力直接嵌入 draw.io 图表编辑器。用户可以通过自然语言指令（如“创建一个用户登录流程图”）让 AI 生成、修改或增强图表，也可以上传图片、PDF 或文本文件，由 AI 自动识别并转化为 draw.io 格式的图表。项目在 GitHub 上获得超过 33k 星（★33175），主语言为 TypeScript。

该项目由字节跳动豆包（ByteDance Doubao）赞助演示站点的 API 额度，默认使用强大的 glm-4.7 模型。同时支持 OpenAI、Anthropic、Google AI、AWS Bedrock、DeepSeek 等十余种 AI 模型提供商，用户可以自带 API Key 或由服务端统一配置模型。

技术栈核心为 Next.js + Vercel AI SDK（用于流式输出和多提供商支持）+ react-drawio（用于图表渲染）。图表以 draw.io XML 格式存储，AI 通过生成或修改 XML 来实现可视化。

解决的问题

传统图表工具（如 draw.io、Lucidchart、Visio）需要手动拖拽形状、连线、调整布局，对于非专业设计师或架构师来说，从零构建一张清晰的图表耗时较长。尤其是在需要快速迭代场景（如会议讨论、文档撰写）中，频繁的手动操作打断了思路。

此外，很多团队面临以下痛点：

• 从文档到图表：需要将 PDF、文本文件中的描述转化为可视化图表，手动复制粘贴效率低。
• 图像复用：已有设计图或截图无法直接编辑，需要重新绘制。
• 版本管理混乱：多次修改后难以追溯变化，回退麻烦。
• 云架构图复杂度高：AWS/Azure/GCP 图标多且布局要求高，手动摆放容易出错。

本项目将这些场景自动化：用户只需用自然语言描述需求，AI 即可生成图表；上传 PDF 或图片，AI 自动提取内容并绘制；所有修改自动记录历史版本，支持一键回退。极大降低了图表创建的门槛和时间成本。

核心功能

1. LLM 驱动的图表创建与编辑
   直接通过自然语言命令（如“添加一个数据库节点并连接到 API 网关”）让 AI 生成或修改 draw.io 图表。AI 会返回格式受限的 draw.io XML，确保渲染正确。

2. 基于图像的图表复制
   上传现有图表截图或设计图，AI 识别其中的元素和关系，自动生成可编辑的 draw.io 图表，并可以进一步优化。

3. PDF 与文本文件上传
   支持上传 PDF 文档或纯文本文件，AI 提取核心内容并组织成流程图、思维导图或架构图。

4. AI 推理可视化
   对于支持思维链的模型（如 OpenAI o1/o3、Gemini、Claude），可以显示 AI 的思考过程，让用户理解图表生成逻辑。

5. 图表历史版本管理
   每次 AI 编辑后自动保存快照，用户可随时查看或恢复到之前的版本，适合协作和审阅。

6. 交互式聊天界面
   在聊天侧边栏与 AI 实时对话，逐步调整图表，无需频繁切换界面。

7. 云架构图专项支持
   针对 AWS、GCP、Azure 的图标库进行优化，Claude 系列模型经过专门训练，可生成带云架构 Logo 的高质量图表。

8. 动画连接器
   支持在图表元素之间添加动态连接线，增强演示和交互效果。

9. MCP 协议集成
   支持通过 Model Context Protocol 与 Claude Desktop、Cursor、VS Code 等 AI 代理连接，实现“在 IDE 中一键生成图表”的工作流。配置方式极简（一行 npx 命令即可启动 MCP 服务）。

10. 多模型与自定义端点
    除 AWS Bedrock 和 OpenRouter 外，所有提供商均支持自定义 API 端点，方便企业使用内部部署模型。管理员可在后台统一配置多个服务端模型，用户无需自带 Key。

亮点 / 与同类相比

• 与 draw.io 深度绑定：draw.io 是目前最广泛使用的免费图表工具之一，文件格式（XML）开放、可移植。本项目直接在其之上增加 AI 能力，而非另起炉灶，因此用户可无缝迁移已有的 draw.io 图表，并利用 AI 进行增量修改。

• 多模型选择，不锁定供应商：不同于一些依赖单一 API 的 AI 图表工具（如 ChatGPT 插件），本项目支持十余家主流模型提供商，用户可以自由切换或同时使用多个模型。自带 Key 模式下，数据仅存储在本地浏览器，隐私性强。

• MCP 原生支持：通过与 Claude Desktop 等 AI 代理的 MCP 协议集成，实现了“AI 自主调用工具生成图表”的闭环。这是同类开源项目中罕见的特性，尤其适合自动化工作流。

• 开源可自托管：代码完全开源，支持一键部署 Vercel 或 Tencent EdgeOne Pages。企业可以私有化部署，避免数据外泄。同时 EdgeOne Pages 部署还能获得 DeepSeek 模型的每日免费额度。

• 管理员后台：提供 /admin 面板，可管理模型配置、访问码、功能开关、额度等，方便团队或 SaaS 服务运营。同类项目通常只提供单用户或单 API 配置。

• 演示站点免费可用：受字节跳动豆包赞助，无需注册即可在线试用，降低了初次体验的门槛。

适合谁用 / 上手

目标用户：

• 开发者与架构师：需要快速绘制系统架构图、部署图、流程图，尤其是云架构图（AWS/Azure/GCP）。
• 产品经理与技术文档写作者：从需求文档、会议记录中快速生成图表，用于演示或设计文档。
• AI 应用开发者：需要为 AI Agent 集成图表生成能力的团队，可通过 MCP 接口或直接调用 API。
• 教育工作者：用 AI 辅助生成教学用流程图、思维导图。
• 任何需要频繁制作图表的非设计人员：减少手动拖拽的重复劳动。

上手方式：

1. 无需安装：直接访问 演示站点（或替换为实际域名），点击运行。支持自带 API Key（在聊天面板设置中配置，保存在本地浏览器）。
2. 安装桌面应用：从 GitHub Releases 页面下载 Windows/macOS/Linux 原生客户端。
3. 自托管部署：

   git clone https://github.com/DayuanJiang/next-ai-draw-io
   cd next-ai-draw-io
   npm install
   cp env.example .env.local
   # 根据 Provider Configuration Guide 配置环境变量
   npm run dev
   

   部署到 Vercel 或 Tencent EdgeOne Pages 也只需点击按钮。
4. 使用 MCP 与 AI 代理集成：在 Claude Desktop 或 VS Code 中，添加 MCP 服务：

   {
     "mcpServers": {
       "drawio": {
         "command": "npx",
         "args": ["@next-ai-drawio/mcp-server@latest"]
       }
     }
   }
   

   然后直接对 Claude 说“创建一个用户认证流程图”，图表即实时显示在浏览器中。

详细 Provider 配置、管理员面板指南、FAQ 均在项目 README 中提供，上手路径清晰，适合个人及团队使用。