用一句话生成架构图5 分钟跑通 Next AI Draw.io 的 AI 智能绘图完整指南【免费下载链接】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输入负载均衡器后挂 3 个 EC2 实例底层用 RDS几十秒后一张可编辑的云架构图就出现在画布上。这就是 AI 智能绘图给普通人的直接好处说人话进去专业图表出来。一句话定位它是什么和谁有关Next AI Draw.io 是一个开源的 Next.js Web 应用把大语言模型接进了 draw.io 编辑器。你用自然语言描述需求它负责生成、修改、增强图表你负责描述和验收。只要你需要画流程图、架构图、业务图哪怕完全不会绘图软件它就是你的画图代笔。上图是典型的 AI 生成产物EC2、S3、Bedrock、DynamoDB 组件和连线全部由一句提示词产出最快上手一条 Docker 命令启动 AI 绘图工具最省事的路径是 Docker。装好 Docker 后把下面这条命令里的 API Key 换成你自己的跑完打开浏览器访问http://localhost:3000就能开始对话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另外两种方式一句话带过嫌 Docker 麻烦可以先访问官方在线演示站体验支持填自己的 Key 绕过配额不想装任何东西、又在意数据不出本机就下载官方 Releases 里的桌面版Windows / macOS / Linux。完整部署细节见 docs/cn/docker.md。实战演示从一句提示词到一张可交付的架构图以画一张高可用 AWS 架构为例整个流程分三步。输入在左侧聊天面板里写一句自然语言比如创建一个包含负载均衡器、3 个 EC2 实例和 RDS 数据库的 AWS 高可用架构图。不用记任何语法也不用告诉它 XML 是什么。过程AI 会先规划支持推理的模型会把思考过程展示出来然后调用绘图工具输出 draw.io XML画布实时渲染出方框、云图标和连线。这一步背后有专门的云组件支持AWS、GCP、Azure 的官方图标都能识别不需要你手动找素材。产出一张可以直接拖拽、双击改文字、随时导出的架构图。它不是图片而是 draw.io 原生对象——不满意就说把 RDS 换成只读副本 主从结构AI 基于上一版增量修改而不是推倒重来。每次 AI 改动前都会自动留档画错了可以回滚到任意历史版本。换个非技术场景也一样成立输入画一个灯泡不亮的故障排查流程图得到的是这样的判断树流程图类需求同样是强项分支、判断、解决路径一次成型能力清单按帮你省什么分组分组能力对你意味着什么省时间自然语言生成 / 对话式修改不用学绘图软件操作省时间上传图片、PDF、文本文件自动转成图表旧文档、截图、论文都能变成新图更专业AWS / GCP / Azure 云架构图专项支持图标、组件名准确像架构师画的更专业动画连接线汇报演示时一眼看清数据流向有兜底图表历史版本AI 改动前自动存档改坏了随时回滚有兜底AI 推理过程展示知道它为什么这么画好下指令纠偏可嵌入MCP Server接入 Claude Desktop / Cursor / VS Code你平时用的 AI 编程工具也能直接帮你画图MCP 玩法值得一提把next-ai-drawio/mcp-server配进你现有的 AI 客户端配置示例见 packages/mcp-server/README.md之后在 Claude Code 里说一句画一个登录流程图图表直接在浏览器里实时出现不用来回切工具。它是怎么搭的技术架构与关键模块想了解原理的话核心链路其实很直白前端Next.js React 构建对话界面contexts/diagram-context.tsx 管理当前绘图会话状态图表用react-drawio渲染。后端app/api/chat/route.ts 是基于 Vercel AI SDK 的流式接口负责把你的对话转成 AI 请求、接收流式输出并驱动画布更新。协议图表本质是 draw.io 的 XMLAI 的全部工作就是生成和修改这段 XML。给模型看的 XML 结构说明在 app/api/chat/xml_guide.md校验逻辑在 lib/diagram-validator.ts。模型层lib/ai-providers.ts 把 16 家提供商Bedrock、OpenAI、Anthropic、Google、DeepSeek、Ollama、OpenRouter 等统一成一套接口切换模型只改配置不动代码。按团队需求配置多提供商、管理面板与配额自己一个人用填一个 API Key 就够了。团队共享部署时常用配置如下场景做法参考全员共享模型用户不用各自掏 Key用环境变量AI_MODELS_CONFIGJSON或ai-models.json配服务端模型单一提供商可用AI_MODEL写逗号分隔的模型 IDdocs/cn/ai-providers.md网页上管配置不碰.env设置ADMIN_PASSWORD后访问/admin可管理模型、访问码、功能开关、配额设置写入data/settings.json立即生效docs/cn/admin-panel.md控制用量配额与访问码管理基于 DynamoDB 的配额模块防止共享实例被刷爆管理面板配额区块用户自带 Key用户在聊天面板设置页填入Key 只存浏览器本地不上服务器—配置优先级记住一条即可面板保存的值 环境变量 内置默认值。你可能踩的坑和实用技巧模型能力是硬门槛。draw.io XML 是严格的长格式输出小模型经常画坏。README 建议 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 这个级别。选模型时优先挑这些而不是贪便宜用最快的。画云架构Claude 系列最稳。它对带 AWS、Azure、GCP 官方图标的架构图做了专门训练同类模型里出图质量最接近架构师手绘。内网 / 离线环境注意外部依赖。应用加载 draw.io 编辑器依赖embed.diagrams.net完全隔离的网络环境要走离线部署方案见 docs/cn/offline-deployment.md。部署平台决定了配置方式。Docker 部署时面板可写data/目录持久化Vercel、Cloudflare Workers 这类无盘平台上面板是只读的只能走环境变量。另外面板里的 API Key 是明文存在data/settings.json的这个文件要管好。适合谁不适合谁适合需要频繁出图但不会绘图软件的产品、运营、技术支持想快速把系统结构讲清楚的架构师、开发有私有化 / 离线部署要求的企业团队已经在用 Claude Code、Cursor 的 AI 重度用户MCP 接入后画图变成一句话的事不太适合需要像素级精调版式的专业制图场景——它省的是从 0 到 80 分的时间最后 20 分你还是要用 draw.io 本体的手动物料去打磨想要零配置零成本直接白嫖的用户——你至少得有一个大模型 API Key演示站有免费额度但有限制需要实时交互式仪表盘监控、BI 类图表的人那不是它的赛道收尾Next AI Draw.io 把会画 draw.io这件事的门槛降到了会说人话。部署只要一条命令团队共享只要一份配置。现在就打开官方演示站输入一句画一个用户登录流程图两分钟内你就能看到自己第一张 AI 生成的图。【免费下载链接】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），仅供参考