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-ioNext AI Draw.io 是一个把大语言模型和 draw.io 结合的 AI 绘图工具。你用自然语言描述需求——画一个包含负载均衡器、3 个 EC2 实例和 RDS 数据库的 AWS 高可用架构——AI 自动生成一张完整的、可编辑的图表之后还能继续通过对话修改。本文面向想快速出图的技术用户和产品同学把功能、部署和配置讲清楚。项目速览这个 AI 图表工具适合谁是什么基于 Next.js 的 Web 应用AI 对话 draw.io 编辑器支持在线演示、桌面应用Windows / macOS / Linux、Docker 自托管三种用法给谁用需要画架构图、流程图的技术人员以及不想学绘图操作、只想描述需求的普通用户亮点一支持 OpenAI、Claude、Google Gemini、字节跳动豆包、AWS Bedrock 等 16 家 AI 提供商改一个环境变量即可切换亮点二图表历史版本管理AI 每次修改都有记录随时回滚到任意版本亮点三可配合 Ollama 完全本地化运行数据不出本机能力详解AI 图表生成具体能做什么按使用价值从高到低几个核心能力一句话生成图表输入做一个微服务架构包含 API 网关、用户服务、订单服务和支付服务 输出带方框、命名和通信箭头的完整架构图所有元素都能在编辑器里继续拖拽、改名、换色。识别现有图表并重绘上传一张图表截图AI 识别其中的组件和连线重建为可编辑的 draw.io 格式顺带可以优化布局、补充注释。静态图片 → 可编辑图表是日常最高频的用法。从 PDF / 文本文件提取内容出图上传技术文档或需求文本AI 提取内容后生成对应图表适合把会议纪要、设计文档快速变成可分享的图。展示 AI 推理过程对支持推理的模型Claude、OpenAI o 系列、Gemini 等界面会流式展示思考过程你能看懂 AI 为什么这样布局再针对性地提修改意见。版本化的图表历史每次 AI 编辑都会记录一版历史可以对比、恢复。改坏了也不怕回滚到上一版即可。三分钟本地部署一条 Docker 命令跑起 AI 绘图工具 最短路径是 Docker。把环境变量填好一条命令即可docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest浏览器打开http://localhost:3000就能用。完整配置见官方文档docs/cn/docker.md。不同使用习惯对应四条并列路径方式适用人群操作步骤在线演示快速尝鲜、不想装任何东西直接访问官方演示站点可填自己的 API key 解除演示配额限制桌面应用高频使用、需要离线从项目 Releases 页面下载对应平台安装包Docker 自托管团队内部部署上面的单条命令本地开发想看源码 / 二次开发clone 装依赖 起 dev server共 4 步本地开发的四步git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local npm run dev内网或离线环境需要把编辑器指向自建的 draw.io 服务相关构建参数见离线部署指南docs/cn/offline-deployment.md。实战演示从架构评审到故障排查的三个出图场景场景一给架构评审画云架构图告诉 AI用户请求经过 EC2EC2 读写 S3、调用 Bedrock 大模型会话存 DynamoDB几秒后得到一张完整的 AWS 架构图关键点是生成的不是一张图片而是标准 draw.io 数据所以后续所有调整都在编辑器里完成不需要重新让 AI 画一遍。场景二给支持团队出故障排查流程图一句灯泡不亮的排查流程就能生成规范的判断流程图判断分支、Yes/No 标签、终点动作都自动排好了把业务内容替换进去就能直接发出去。场景三在 IDE 里让 AI Agent 顺手画图项目自带 MCP Serverpackages/mcp-server/。在 Claude Desktop、Cursor、VS Code 里加一条配置后直接在 IDE 里说画一个用户登录流程图图表会实时出现在浏览器里。写代码和画流程图的 AI 可以是同一个不用来回切窗口。技术亮点AI 到底是怎么画图的实现思路不复杂但有两个值得注意的设计图表就是 XML。draw.io 图表本质上是一段 XML 结构AI 并不画图而是通过 tool calling 生成和修改这段 XML再由 react-drawio 渲染出来。这解释了为什么输出结果天然可编辑。多提供商统一走 Vercel AI SDK。流式响应、推理展示、工具调用都由同一套 SDK 驱动新增提供商只需适配一层。核心模块位置聊天 API 在 app/api/chat/绘图会话状态在 contexts/diagram-context.tsx提供商适配在 lib/ai-providers.ts。进阶配置多模型选择与管理员面板 ⚙️提供商怎么选提供商特点建议场景Anthropic Claude针对 draw.io 云架构图标AWS / Azure / GCP训练过画云架构图的首选OpenAI通用能力强、响应快日常图表生成Google Gemini多模态图像理解好识图重绘、创意图表字节跳动豆包注册送 50 万免费 Token中文用户的免费方案Ollama完全本地、无需 API key隐私敏感、离线环境AWS Bedrock企业级、默认提供商生产环境部署除 Bedrock 和 OpenRouter 外其余提供商都支持自定义端点方便接入 OpenAI 兼容服务。每个提供商的环境变量示例见配置指南docs/cn/ai-providers.md。一个实用提醒生成图表要求模型输出长文本并严格遵守格式约束建议使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 这一档的强模型本地模型至少 32B 参数并开启 tool calling。管理员面板设置ADMIN_PASSWORD环境变量后访问/admin路径即可在网页上管理服务端多模型配置所有用户共享无需每人填 key访问密码与访问码功能开关与用量配额不需要手改.env。详细说明见docs/cn/admin-panel.md。常见问题与排查Q本地小模型只思考不画图怎么办多为两个原因模型太小建议 32B或模型服务没开 tool calling。以 vLLM 为例加--enable-auto-tool-choice启动即可。Q内网部署提示访问不到 embed.diagrams.netNEXT_PUBLIC_*是构建时变量运行时设置无效必须在构建时通过 docker-compose 的build.args传入自建 draw.io 地址。详见docs/cn/FAQ.md。Q导出 PDF 无响应嵌入式编辑器不支持直接导出 PDF先导出 PNG 再打印为 PDF 即可。Q数据安全吗Docker / 本地部署时数据全部留在你自己的服务器在线演示填自己的 API key 时key 只存在浏览器本地不落服务器。下一步Next AI Draw.io 把画图变成了描述图架构评审、流程梳理、存量图片转可编辑图表都能少花不少时间。先到官方演示站点体验一次填上自己的 API key 解除配额限制团队部署按 docs/cn/docker.md 一条命令跑起来配置你顺手的模型按 docs/cn/ai-providers.md 选提供商填 key【免费下载链接】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），仅供参考