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.ioNext 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.localenv.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_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest第一次打开界面在聊天框输入画一张 React AWS 的鉴权流程图出一张图就算配置成功。三个真正上手的玩法玩法一一句话出一张架构图描述时把三件事说清楚图是什么类型、包含哪些组件、组件之间什么关系。比如画一张 AWS 架构图用户请求先到 EC2EC2 分别调用 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-serverlatest注册 MCP 服务器让 Agent 直接在浏览器里生成图表客户端配置见 packages/mcp-server/README.md。谁适合用它架构师、开发工程师云架构图、组件关系图、API 流程图边聊边改业务、产品同学把流程描述变成流程图和决策树不用学 draw.io培训、内容创作者把 PDF 资料转成可编辑的示意图团队管理员配一套服务端模型和管理面板全组共用下一步先在终端跑上面那几条命令用一句话出一张架构图然后在对话里继续打磨。想深入的话翻 docs/cn/ai-providers.md 选模型翻packages/mcp-server/把 Agent 接进来基本就是它的全部用法了。【免费下载链接】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），仅供参考