Next AI Draw.io 三步上手：自然语言生成 draw.io 图表的完整实操

Next AI Draw.io 三步上手：自然语言生成 draw.io 图表的完整实操

【免费下载链接】next-ai-draw-ioA 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://gitcode.com/GitHub_Trending/ne/next-ai-draw-io

Next AI Draw.io 是一个基于 Next.js 的 AI 绘图工具：你用一句自然语言描述需求，它就生成或修改一张可编辑的 draw.io 图表。本文带你用最少的命令跑起来本地环境，看懂它真正能干什么，并只讲你部署时最可能踩的 3 个坑。

三步在本地跑起来

最短路径是源码方式，全程 3 条命令：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io && npm install cp env.example .env.local

然后在.env.local里只改 3 处，其余全部保持默认即可：

AI_PROVIDER=openai # 你的提供商：bedrock/openai/anthropic/google/deepseek 等 AI_MODEL=gpt-4o # 模型 ID，需与提供商匹配 OPENAI_API_KEY=sk-... # 对应提供商的 API Key

启动并访问：

npm run dev # 打开 http://localhost:6002

如果你更想要容器化的一键体验，一条docker run也能起服务（端口 3000）：

docker run -d -p 3000:3000 \ -e AI_PROVIDER=openai \ -e AI_MODEL=gpt-4o \ -e OPENAI_API_KEY=sk-... \ ghcr.io/dayuanjiang/next-ai-draw-io:latest

两种方式的区别：本地开发方式跑在 6002 端口，适合要改代码的开发者；Docker 方式跑在 3000 端口，适合只想用起来的用户。

它到底能干什么

结论先说：凡是需要"画出来给别人看"的场景，都可以先问它一嘴。三个真实可用的例子：

1. 一句话出流程图。输入"创建一个灯泡故障排查流程图"，它直接产出带判断分支（插头没插→插上、灯泡烧了→换灯泡）的完整流程图，节点、连线、配色都是 draw.io 原生对象，你可以继续拖拽编辑。

2. 云架构图自动配好官方图标。描述"一个用户访问 EC2 的 AWS 架构，EC2 连接 S3、Bedrock 和 DynamoDB"，它会用 AWS 官方图标库（aws4 库共 1031 个图形）生成标准云架构图，而不是手画方块。项目内置了 AWS、Azure、GCP、阿里云、Kubernetes、BPMN 等 33 个图形库、共 4000+ 个形状，索引在 docs/shape-libraries/README.md。

3. 把现成材料"翻译"成图表。它不只能从零画：上传一张现有图表的截图，AI 会复刻成可编辑的矢量图；上传 PDF 或文本文件（默认最多提取 150000 字符），可以从文档内容直接生成架构图。另外每次 AI 编辑前都会自动存档，改坏了可以一键回滚到任意历史版本。

关键配置与原理速览

你只需要关心的 6 个环境变量（其余都有默认值，见 env.example）：

原理一句话版：图表在底层就是一段 draw.io XML（<mxfile><diagram><mxCell .../></diagram></mxfile>）。你的对话由 app/api/chat/route.ts 接收，经 lib/ai-providers.ts 适配层调用你配置的模型，模型返回结构化的 XML 修改指令，前端再用 react-drawio 渲染出来。所以模型越强、格式越听话，出图质量越高——官方推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 这一档；其中 Claude 系列对云架构官方图标最熟，画 AWS/Azure/GCP 架构图优先选它。

多人共用部署时，管理员可用AI_MODELS_CONFIG环境变量或ai-models.json文件在服务端统一配模型，用户端就不再各自带 Key 了，配置细节在 docs/cn/admin-panel.md。

常见坑

只列最扎手的 3 个，每个都按"现象 → 定位 → 解决"走：

坑 1：内网/离线环境提示找不到embed.diagrams.net

• 现象：页面白屏或提示无法连接嵌入式编辑器。
• 定位：NEXT_PUBLIC_*变量是构建时打包进 JS 的，事后改.env无效，这是新手最常误判的点。
• 解决：自建一个jgraph/drawio容器（8080 端口），然后在docker-compose.yml的build.args里传入NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的服务器IP:8080/再重新构建。完整方案见 docs/cn/offline-deployment.md。

坑 2：本地模型只输出思考过程，就是不画

• 现象：对话正常、AI 也"想"了，但画布一直是空的。
• 定位：本项目靠 tool calling 触发绘图动作，小模型（<32B）或没开 tool calling 的服务（如 vLLM 默认配置）会跳过这一步。
• 解决：换 32B+ 参数模型，并在服务启动参数里开启工具调用（vLLM 需加--enable-auto-tool-choice）。

坑 3：导出 PDF 点了没反应

• 现象：点"导出 PDF"跳转一下然后无响应。
• 定位：嵌入式 draw.io 的 PDF 导出依赖外部转换服务，在 iframe 里走不通，属于平台限制而非你的配置问题。
• 解决：先导出 PNG 图片，再用浏览器"打印为 PDF"即可。

更多问题（如上传图片后报"未提供图片"——那是模型不支持视觉能力，换 GPT-5.2 / Claude 4.5 Sonnet / Gemini 3 Pro 这类多模态模型）在 docs/cn/FAQ.md 里有逐条解答。

延伸

到这里，你手上已经有一个能对话、能出图、能回滚的本地 AI 绘图环境了。想继续深入，从这几个入口进：

• 各提供商的 Key 与模型配置：docs/cn/ai-providers.md
• Docker 部署与多模型挂载：docs/cn/docker.md
• 给 Claude Desktop / Cursor 用的 MCP Server：packages/mcp-server/README.md

【免费下载链接】next-ai-draw-ioA 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://gitcode.com/GitHub_Trending/ne/next-ai-draw-io