Next AI Draw.io 使用指南：如何用自然语言快速生成架构图-平芜编程栈

Next AI 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

写架构评审文档时，我通常在 draw.io 里拖框、对齐连接线要拖上几十分钟，还经常因为一条连线的端点错位返工。Next AI Draw.io 把这个环节搬进了对话里：你用一句话描述架构，AI 直接生成一张完整、可编辑的 draw.io 图表。这篇指南带你从零走到能实际用，覆盖安装、三个真正上手的玩法，以及模型配置上的常见坑。

它是什么：自然语言接上 draw.io

Next AI Draw.io 是一个基于 Next.js 与 draw.io 的网页应用：左侧聊天面板输入需求，AI 输出 draw.io XML，右侧画布实时渲染。它替你省掉的是手工摆元件、对齐连线和版本对照的整段流程——你只负责把图描述清楚，历史版本随时可回退。

你原来的流程	换成 Next AI Draw.io
手工拖框、逐条对齐连线	一句话生成整张图
改一版存一个副本，旧版容易丢	每次 AI 编辑都有历史，可一键恢复
照着 PDF 文档重画一张图	上传 PDF 或图片，AI 复刻成可编辑图

三条命令跑起来

最短路径是源码部署。克隆仓库后，把AI_PROVIDER、AI_MODEL和对应的 API key 填进.env.local，env.example 里每个 provider 都有注释示例可直接照抄。

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install npm run dev

浏览器打开 http://localhost:6002 就能用。不想装 Node 环境的话，Docker 效果等价：

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

第一次打开界面，在聊天框输入"画一张 React + AWS 的鉴权流程图"，出一张图就算配置成功。

三个真正上手的玩法

玩法一：一句话出一张架构图

描述时把三件事说清楚：图是什么类型、包含哪些组件、组件之间什么关系。比如"画一张 AWS 架构图：用户请求先到 EC2，EC2 分别调用 S3、Bedrock 和 DynamoDB"。下面这张就是类似描述生成的结果，VPC 边界和调用方向都在。

云架构图想效果好，优先选 Claude 系列——官方说明它见过 AWS、Azure、GCP 的官方图标，画得更准。

玩法二：对话里逐轮改图

第一版通常只有八成满意。别重画，直接说"把 S3 挪到左上""给数据库加一条动画连线"。每轮对话只改动 XML 的局部，画布实时更新；哪一轮改坏了，在历史面板回退到该次 AI 编辑前的任意版本即可，比在 draw.io 里手改更安全。

玩法三：拿旧图当底稿

手头已有现成图表要改造时，直接把 PDF、文本文件或图片传进聊天框，AI 会提取内容并重新画成 draw.io 格式的图。一张截图进、一张可编辑的图出，改布局比从零开始快得多。

进阶细节：换模型只改一行，还有两个坑

换模型改一行配置：AI_PROVIDER换成anthropic、deepseek、ollama、openrouter等，AI_MODEL跟着换就行。各 provider 的环境变量组合都写在 docs/cn/ai-providers.md。团队共用服务端模型则配置AI_MODELS_CONFIG，用户不用自带 key；再设置ADMIN_PASSWORD，就能在/admin面板里管模型、访问码和配额，不用手改.env，细节见 docs/cn/admin-panel.md。

坑一：模型只思考不画图。本地小模型经常接不住 tool calling 指令，官方 FAQ 的建议是上 32B 参数以上的模型，并在推理服务里开启 tool calling，见 docs/cn/FAQ.md。

坑二：改了 draw.io 地址不生效。NEXT_PUBLIC_DRAWIO_BASE_URL是构建时变量，运行时设置无效，必须在构建阶段传入（比如 docker-compose 的args），内网离线部署最容易踩这个。

想让 Agent 替你画图：在 Claude Desktop、Cursor 或 VS Code 里用npx @next-ai-drawio/mcp-server@latest注册 MCP 服务器，让 Agent 直接在浏览器里生成图表，客户端配置见 packages/mcp-server/README.md。