Next AI Draw.io：自然语言驱动的 draw.io 图表工作台
next.js Web 應用程式將 AI 功能與 draw.io 圖表整合在一起。該應用程式可讓您透過自然語言命令和人工智慧輔助視覺化來建立、修改和增強圖表。
秒懂
- 它是什麼？
- DayuanJiang/next-ai-draw-io 用 TypeScript 与 Next.js 把 LLM 接入 draw.io，支持聊天改图、MCP 接入和多供应商部署。
- 適合誰用？
- Next AI Draw.io 适合需要快速把文字需求转成 draw.io XML 并人工校对的场景，不适合把生成图直接当作无需审阅的正式架构交付物。先在 v0.4.16 上跑 npm run dev，用 Settings 填入自有 API Key，分别测试创建、修改和 MCP 浏览器实时出图，并检查敏感文本是否进入模型请求。
- 可以商用嗎？
- 可以。Apache-2.0 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫最近一次提交在 1 天前。
- 用什麼語言寫的？
- 主要是 TypeScript（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月15日）與我們的分析，不構成法律意見。
開源專案深度解析
Next.js 页面承载 draw.io 与 LLM 对话
DayuanJiang/next-ai-draw-io 是一个 TypeScript Web 应用，README 描述为把 AI 能力接入 draw.io，用户可用自然语言创建、修改和增强图表。项目主页为 next-ai-drawio.jiang.jp，许可证 Apache-2.0。README 说明演示站由字节豆包赞助 API，当前演示模型为 glm-4.7；Atlas Cloud 也提供 OpenAI 兼容接口连接 DeepSeek、Qwen、GLM 等。
图表在应用内以 XML 表示，由 react-drawio 渲染，Vercel AI SDK 负责流式响应。README 未给出图表准确率基准，复杂架构仍需人工检查布局与语义。对团队而言，next-ai-draw-io 的价值在于把口述需求变成可编辑的 draw.io 源文件，而不是替代架构评审。上线前应明确哪些 diagram 允许经模型生成、哪些必须手工绘制，并在流程里保留人工 diff 与 v0.4.16 版本记录。若组织禁止把内部架构描述发送到公有模型，自托管与 BYOK 模式更合适，但仍需审计哪些 prompt 会经第三方 API 转发。
README 目录含 Support、FAQ、Star History，素材截断处未给出完整错误码表。Sponsors 感谢 ByteDance Doubao 赞助 demo API，Atlas Cloud 提供多模型 OpenAI 兼容接口与 Coding Plan。GitHub 自报 stars 35373、openIssues 185、默认 main、最近 push 2026-05-21 对齐 v0.4.16。
对团队而言，next-ai-draw-io 的价值在于把口述需求变成可编辑的 draw.io 源文件，而不是替代架构评审。上线前应明确哪些 diagram 允许经模型生成、哪些必须手工绘制，并在流程里保留人工 diff 与 v0.4.16 版本记录。
若组织禁止把内部架构描述发送到公有模型，next-ai-draw-io 的自托管与 BYOK 模式更合适，但仍需审计哪些 prompt 会经第三方 API 转发。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 1 节补充）
八项功能覆盖上传、历史与云架构图
README 列出 LLM 图表创建、图像复制现有图、PDF 与文本上传、支持模型的推理过程展示、带版本控制的 Diagram History、交互聊天、AWS/GCP/Azure 云架构图，以及 Animated Connectors。示例提示包括 RAG 架构、React 加 AWS Serverless 认证流程、Transformer 动画连接器等。
README 还写明任务需要模型具备强长文本生成与严格格式约束，推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1，但未承诺输出始终符合 draw.io 语法。图像复制、PDF 与文本上传意味着输入源多样，隐私审查不能只看聊天框。试用时应列出允许上传的文件类型，并记录某次上传是否导致节点布局错乱或文本截断。Diagram History 功能意味着多次 AI 编辑会留版本，清理策略要由团队定义，避免旧版 diagram 含过时系统名仍被分享。
How It Works 描述 AI 把自然语言转为 draw.io XML 的处理链，完整步骤需读 GitHub 未截断 README。Cloudflare Workers 指南独立，edge 对流式 AI 响应的限制部署前要单独评估。
图像复制、PDF 与文本上传意味着输入源多样，隐私审查不能只看聊天框。试用 next-ai-draw-io 时应列出允许上传的文件类型，并记录某次上传是否导致节点布局错乱或文本截断。
Diagram History 功能意味着多次 AI 编辑会留版本，清理策略要由团队定义，避免旧版 diagram 含过时系统名仍被分享。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 2 节补充）
MCP Server 让 Cursor 与 Claude Code 出图
项目提供 @next-ai-drawio/mcp-server，README 给出 mcpServers 配置：command 为 npx，args 为 @next-ai-drawio/mcp-server@latest。Claude Code CLI 可执行 claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest，随后用自然语言要求生成流程图，图表会在浏览器实时显示。更多客户端配置见 packages/mcp-server/README.md。
集成时应先确认 npx 能拉取最新包，并观察 MCP 失败时是否有明确错误；README 未描述协议级重试策略。MCP 接入后，Cursor 与 Claude Code 的浏览器会话边界需要单独测试：断网、重启 @next-ai-drawio/mcp-server 或切换模型时，旧 diagram 会话是否残留，README 未说明，需在 localhost:6002 实测。桌面 Releases 与 Docker docs/en/docker.md 路径不同，选型记录应写明用的是哪一条安装链，以免混用环境变量文件。
演示站 Settings BYOK 可绕过 demo 用量限制；Atlas Cloud 赞助段链 console/coding-plan。中文 README 在 docs/cn/README_CN.md，日文 docs/ja/README_JA.md。
MCP 接入后，Cursor 与 Claude Code 的浏览器会话边界需要单独测试：断网、重启 @next-ai-drawio/mcp-server 或切换模型时，旧 diagram 会话是否残留，README 未说明，需在 localhost:6002 实测。
桌面 Releases 与 Docker docs/en/docker.md 路径不同，选型记录应写明用的是哪一条安装链，以免混用环境变量文件。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 3 节补充）
演示站 BYOK 与 npm run dev 本地链
在线演示无需安装，用户可在聊天面板 Settings 配置 provider 与 API Key；README 称密钥仅存浏览器本地，不上传服务器。桌面版可从 Releases 下载 Windows、macOS、Linux 包，Docker 步骤在 docs/en/docker.md。
本地开发命令为 git clone、npm install、cp env.example .env.local、npm run dev，浏览器访问 http://localhost:6002。各供应商细节见 docs/en/ai-providers.md。试用前应先复制 env.example，避免把生产密钥写进 .env.local 并提交。本地链路与演示站 next-ai-drawio.jiang.jp 的差异主要在 API Key 存放位置。自托管要把 env.example 变量与 docs/en/ai-providers.md 写进部署清单，避免只配默认 Bedrock 却走 OpenRouter。Cloudflare Workers 指南未内嵌在 README，部署者需单独打开链接核对 edge runtime 限制是否影响 AI 流式响应。
README 目录含 Support、FAQ、Star History，素材截断处未给出完整错误码表。Sponsors 感谢 ByteDance Doubao 赞助 demo API，Atlas Cloud 提供多模型 OpenAI 兼容接口与 Coding Plan。GitHub 自报 stars 35373、openIssues 185、默认 main、最近 push 2026-05-21 对齐 v0.4.16。（补充1）
本地链路与演示站 next-ai-drawio.jiang.jp 的差异主要在 API Key 存放位置。自托管要把 env.example 变量与 docs/en/ai-providers.md 写进部署清单，避免只配默认 Bedrock 却走 OpenRouter。
Cloudflare Workers 指南未内嵌在 README，部署者需单独打开链接核对 edge runtime 限制是否影响 AI 流式响应。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 4 节补充）
多供应商、AI_MODELS_CONFIG 与 /admin
README 列出的供应商包括字节豆包、AWS Bedrock（默认）、OpenAI、Anthropic、Google AI、Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、ModelScope、SGLang、Vercel AI Gateway。除 AWS Bedrock 与 OpenRouter 外均支持自定义端点。
服务端多模型可通过 AI_MODELS_CONFIG（JSON 环境变量）或 ai-models.json 配置；AI_MODEL 逗号列表可做单供应商快速设置。设置 ADMIN_PASSWORD 后访问 /admin 可管理模型、访问码、功能、可观测性与配额，无需手改 .env。多模型并存时，/admin 面板能否限制访问码、观测 token 用量，会直接影响共享实例成本。多人共用部署时，应为每次 next-ai-draw-io 生成记录 model id 与 prompt 摘要。AI_MODELS_CONFIG JSON 语法错误会导致 /admin 无法加载模型列表，变更前应在 staging 用 jq 校验文件。
How It Works 描述 AI 把自然语言转为 draw.io XML 的处理链，完整步骤需读 GitHub 未截断 README。Cloudflare Workers 指南独立，edge 对流式 AI 响应的限制部署前要单独评估。（补充2）
多模型并存时，/admin 面板能否限制访问码、观测 token 用量，会直接影响共享实例成本。多人共用部署时，应为每次 next-ai-draw-io 生成记录 model id 与 prompt 摘要。
AI_MODELS_CONFIG JSON 语法错误会导致 /admin 无法加载模型列表，变更前应在 staging 用 jq 校验文件。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 5 节补充）
EdgeOne、Vercel 与 Cloudflare Workers 部署
README 记录三种部署：腾讯 EdgeOne Pages 提供一键按钮，文档链接 pages.edgeone.ai；Vercel 需在控制台设置与 .env.local 一致的环境变量；Cloudflare Workers 见单独指南。EdgeOne 部署说明提到 DeepSeek 模型每日免费配额，但 README 未描述各平台并发或冷启动表现。
自托管时应固定 release 标签（如 v0.4.16）并记录所用模型与 API 端点，便于回溯生成结果。EdgeOne、Vercel、Cloudflare 一键部署降低门槛，但不等于生产就绪。EdgeOne DeepSeek 免费配额是平台促销，迁移时要重新核对与 .env.local 一致的环境变量名。Animated Connectors 示例依赖模型理解动画语义，试用时应单独跑一条 animated connector 提示，检查 draw.io 是否真的生成动画而非静态线。
EdgeOne、Vercel、Cloudflare 一键部署降低门槛，但不等于生产就绪。EdgeOne DeepSeek 免费配额是平台促销，迁移时要重新核对与 .env.local 一致的环境变量名。
Animated Connectors 示例依赖模型理解动画语义，试用时应单独跑一条 animated connector 提示，检查 draw.io 是否真的生成动画而非静态线。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 6 节补充）
Apache-2.0 许可与 v0.4.16 试用核对
项目采用 Apache-2.0，README 摘录授予复制、衍生、公开表演、再许可与分发等权利，但未提供安全或 SLA 声明。试用建议：在 localhost:6002 用两条不同复杂度的提示各生成一图，导出 XML 后在 draw.io 打开检查节点与连线；若走 MCP，记录 claude mcp add 后的浏览器会话是否稳定。
涉及内部架构图时，应确认上传的 PDF、图片与聊天内容不会进入不受控的第三方模型账户。Apache-2.0 允许商业使用，但不保证模型输出版权。对外发布 diagram 前，应确认 XML 导出可在独立 draw.io 打开，且不含内部敏感拓扑；npm run dev 本地试跑应覆盖创建与修改各一次。多语言 README 在 docs/cn 与 docs/ja，中文团队可对照 CN 文档核对功能列表是否与 main README 同步更新。
Apache-2.0 允许商业使用，但不保证模型输出版权。对外发布 diagram 前，应确认 XML 导出可在独立 draw.io 打开，且不含内部敏感拓扑；npm run dev 本地试跑应覆盖创建与修改各一次。
多语言 README 在 docs/cn 与 docs/ja，中文团队可对照 CN 文档核对功能列表是否与 main README 同步更新。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 7 节补充）
Examples 表格与 EdgeOne 一键部署参数
README Examples 表格展示 animated connector transformer 架构图、RAG chat application 数据 ingestion 连接图、React 配合 AWS Serverless 认证流程、Henry Chesbrough Open Innovation 模型，以及 cat sketch 等轻量提示，说明 next-ai-draw-io 既服务架构师也允许趣味出图。Multi-Provider 段写明 Server-Side Multi-Model Configuration 可写 AI_MODELS_CONFIG JSON 或 ai-models.json，Admin Panel 在设置 ADMIN_PASSWORD 后通过 /admin 管理模型与配额而无需手改 .env。Deploy to EdgeOne Pages 按钮链到 edgeone.ai/pages/new 并预填 GitHub 仓库 URL，README 还链 Tencent pages.edgeone.ai deployment-overview 文档。Desktop Releases 覆盖 Windows、macOS、Linux 三端；Image-Based Diagram Replication 与 PDF Text File Upload 代表多模态输入，企业试用 next-ai-draw-io 时应分别记录图片与 PDF 是否含敏感字段。AI Reasoning Display 仅在 OpenAI o1/o3、Gemini、Claude 等受支持模型上可见，更换 provider 后应重复同一条复杂提示对比 XML 输出差异。
本节要点应写入团队内部 wiki，并与 next-ai-draw-io 仓库 tag 对照；任何模型供应商切换都要重新跑一遍创建与修改用例，保存浏览器网络面板里对 API 的请求摘要（脱敏后）以便审计。（第 8 节补充）
編輯結論
Next AI Draw.io 适合需要快速把文字需求转成 draw.io XML 并人工校对的场景，不适合把生成图直接当作无需审阅的正式架构交付物。先在 v0.4.16 上跑 npm run dev，用 Settings 填入自有 API Key，分别测试创建、修改和 MCP 浏览器实时出图，并检查敏感文本是否进入模型请求。
社群筆記