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
Next AI Draw.io 是一个把 draw.io 接到对话里的 Next.js 网页应用：你在聊天框里说一句需求，它直接产出可编辑的 draw.io 图，不用自己拖框、连线、对齐网格。如果你开会、写文档、备课时经常要出架构图或流程图，又不想花时间学绘图工具，这套东西就是替你动手的那个。它生成的不是图片，是标准 draw.io XML，导出后还能在 draw.io 里继续手改，或者发给同事接着画。
一句话说清它是什么
"把 draw.io 变成一个会听话的画板"
- 自然语言出图：用一句中文或英文描述需求，AI 直接生成 draw.io XML
- 图片复刻：上传截图或旧图，AI 把它重画并增强成可编辑版本
- 文档转图：上传 PDF 或文本文件，自动提取内容并整理成图
- 版本回滚：每次 AI 改动都留痕，可恢复到任意一版之前的状态
- 多模型：接 OpenAI、Anthropic、Google、字节跳动豆包等 16 家以上 AI 提供商
30 秒上手
入口有三个：官方 Demo 站（免安装，可自带 API Key 解除用量限制）、桌面应用（Windows / macOS / Linux 三平台），以及 Docker 自部署。最可控的是 Docker，1 条命令：
docker run -d -p 3000:3000 \ -e AI_PROVIDER=openai \ -e AI_MODEL=gpt-4o \ -e OPENAI_API_KEY=<你的值> \ ghcr.io/dayuanjiang/next-ai-draw-io:latest首次运行要拉镜像，一般 1～2 分钟，然后浏览器打开 http://localhost:3000 即可。最常见的第一个坑是"AI 只思考不画图"，原因通常是模型太小（建议 32B 参数以上）或模型服务没开 tool calling。
它真正好用的几个场景
后端同学：把口头描述变成可评审的架构图
你输入："画一个 AWS 高可用架构，包含负载均衡器、3 台 EC2 实例和 RDS 数据库"
它输出：带 AWS 官方组件图标和完整连线关系的云架构图。自然语言生成架构图是它最能打的环节，Claude 系列在云厂商图标上训练过，出图最稳。
产品同学：丢一份文档，AI 画流程图
你输入：上传 PDF 需求文档，附一句"把订单处理流程整理成流程图，要包含库存检查和支付验证"
它输出：一张每个步骤、分支、终点都是可编辑节点的完整流程图，不用逐字口述内容。
老师：把课本概念变成课件插图
你输入："画一个灯泡故障排查流程图，每步检查都要有是/否判断"
它输出：主干清晰、判断分支分明的排查图，直接粘进课件就能用。
配置与扩展（按需选读）
| 选项 | 默认值 | 什么时候改它 |
|---|---|---|
AI_PROVIDER | bedrock | 用非 AWS 的提供商（openai / anthropic / google / doubao 等） |
AI_MODEL | bedrock 的 claude-sonnet-4-5 | 想换模型，或逗号分隔填多个做候选 |
MAX_OUTPUT_TOKENS | 64000 | 大图被截断、输出不完整时 |
ADMIN_PASSWORD | 不设置（面板禁用） | 要开 /admin 面板在线管模型、访问码、配额 |
NEXT_PUBLIC_DRAWIO_BASE_URL | embed.diagrams.net | 离线内网，要指向自建 draw.io |
大多数人不用碰这张表：任选一个提供商和 1 个能画的模型就能用。团队部署时设一下ADMIN_PASSWORD，就能在/admin页面里改模型、访问码和配额，保存即生效、不用重启。
技术侧一瞥（给想深挖的人）
app/api/chat/route.ts：聊天请求入口，用 Vercel AI SDK 做流式响应并对接绘图工具调用lib/ai-providers.ts：16 家以上 AI 提供商的适配层，统一各家 key 和 endpoint 差异lib/system-prompts.ts与lib/validation-prompts.ts：系统提示词与校验提示词，约束模型写出合法的 draw.io XMLlib/diagram-validator.ts：渲染前校验 AI 产出的 XML，挡住残缺输出packages/mcp-server/：把绘图操作封装成 MCP 服务器，Claude Desktop、Cursor、VS Code 里的 AI agent 可直接驱动它画图
踩坑提醒
- PDF 导出没反应：Web 版点导出 PDF 后卡住，因为嵌入的 iframe 调不到外部转换服务；先导出 PNG，再打印转 PDF。
- 内网部署打不开画布：
NEXT_PUBLIC_*是构建时变量，运行时设置无效；必须在 docker build 的 args 里传入，指向自建 draw.io 地址。 - 模型只思考不画图：本地小模型跟不上 tool calling 指令；换 32B 以上参数的模型，并在 vLLM 等服务端开启 tool calling。
接下来你可以
- 读 AI 提供商配置指南，选一个最适合你的模型
- 翻 常见问题，离线部署、图片识别的限制都写在那
- 本地跑起来：
git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io，然后npm install和npm run dev，端口 6002
画板已经备好，你只差一句话。
【免费下载链接】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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
