企业官网建设流程全解析

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

你刚对 AI 说了一句“画个灯不亮的排查流程图”，几秒后画布上出现了一张带判断分支和“换灯泡”步骤的完整流程图。这就是 Next AI Draw.io，一个把自然语言生成图表的 AI 绘图工具：你说一句话，它出一张图，鼠标都不用动。

Next AI Draw.io 是什么：自然语言生成图表的 AI 绘图工具

一句话就是：它基于 Next.js + draw.io + Vercel AI SDK，让大模型直接生成和修改 draw.io 图表，再在浏览器里实时渲染出来。它解决的是那个很具体的问题——你脑子里架构已经想清楚了，却要手动拖两小时方框和连线。

它跟普通“截图转图”工具的核心差异有三点：第一，不只是生成，还能在已有图上改，直接说“把数据库换成 PostgreSQL”就能就地修改；第二，支持 OpenAI、Claude、Gemini、AWS Bedrock、DeepSeek、Ollama 等多家模型，你按自己的密钥选用；第三，每次修改都有版本记录，改砸了可以回滚。

自然语言 AI 绘图能干什么：这 5 句话你可以直接说

一句话画出 AWS 三层架构图

你可以直接对它说：“画一个 AWS 三层架构图：负载均衡器、两台应用服务器、一个带只读副本的主数据库。”

系统实际会做的事：AI 输出一段 draw.io 的 XML，把每个组件用对应的图标摆好位置，再自动画上组件之间的数据流向。你拿到手就是一张能直接贴进技术方案评审的架构图。

AI 生成流程图实战：灯不亮的排查流程

你可以直接对它说：“做个灯不亮故障的排查流程图。”

系统实际会做的事：它识别出“排查”这类需求需要决策节点，于是画出“灯插上了吗？”“灯泡坏了吗？”两个菱形判断框，每个分支都标清楚 Yes/No 走向。你全程只说了一句话，不用操心该用哪种形状。

把已有图里的 MySQL 换成 PostgreSQL

你可以直接对它说：“把这张图里的数据库从 MySQL 换成 PostgreSQL，别的都别动。”

系统实际会做的事：它先读取当前图的结构，定位到数据库所在节点，把图标和标签换成 PostgreSQL，其他元素的位置与连接线原样保留。你不用记元素 id，AI 自己找。

一句话画 UML 序列图和网络拓扑图

你可以直接对它说：“画一个用户登录加 MFA 验证的 UML 序列图”，或者“画一个双子网经防火墙互通的网络拓扑图”。

系统实际会做的事：从内置的形状库资源里挑选对应图元——AWS、Azure、GCP、流程图、BPMN 等 30 多套专业图标都在里面，所以画出来的图符合行业习惯，而不是一堆圆角矩形。

把截图或 PDF 变成可编辑的图

你也可以上传一张现有架构图的截图、一个 PDF 或文本文件，然后说：“把它转成可编辑的图。”

系统实际会做的事：AI 识别图里的元素和连线关系，重建为 draw.io 对象，之后你就能继续用自然语言改它。文档里那张几年前的旧架构图，可以直接“复活”成可持续维护的版本。

自然语言如何变成图：从你的一句话到成图

你可以把这条链路理解成“提需求的人、拿笔的人、印刷机”。你用自然语言提需求；AI 解析意图——要什么图、有哪些元素、彼此怎么连——然后写下绘图指令（draw.io 能识别的 XML）；前端一边接收指令流，一边在画布上渲染出图，布局、样式、连线它自己处理。

关键的代码入口是聊天处理路由：它负责组装提示词、处理流式响应、校验图表 XML 后再交给前端。你能选哪些模型、密钥怎么配，统一收在AI 提供商配置里，换模型不用改业务代码。

三步跑起来：Docker 部署 Next AI Draw.io 本地环境

⚡ 不想碰代码的话，Docker 是最短路径：

1. 安装 Docker（已有则跳过）；
2. 准备一个 AI 提供商的 API key（以 OpenAI 为例）；
3. 执行下面的命令，把 key 换成你自己的：

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

4. 浏览器打开 http://localhost:3000 ，输入一句话，画第一张图。

如果你想读源码或者二开：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io && npm install cp env.example .env.local # 填入你的 AI key npm run dev

Next AI Draw.io 适合谁，边界在哪

✅ 适合谁：经常要出架构图的架构师、需要在文档和 README 里配图赶工期的开发者、要画流程图的写技术文档的人。一句话：脑子里有清晰想法、但不想动手拖方框的人。

两个边界，如实说：

• 它依赖外部 AI 模型的生成能力，成图质量跟所选模型强相关（画云架构图时 Claude 系列明显更稳），而且你需要自备 API key（或用演示站内置额度）。
• 超复杂的图——上百个元素、对像素级排版有要求的——AI 给出的结果仍需你在 draw.io 画布里手动微调。把它当成“完成 80%”，最后 20% 你自己收个尾。

让设计回到设计

你不用再去背 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