用 AI 自动生成流程图？这款开源工具做到了！
你是不是也有以下需求：通过自然语言，或者一张草图，自动生成结构清晰的流程图或架构图？ 没想到，真的有开发者把这件事做成了，做得很好而且开源！
今天要向大家强烈推荐一款开源项目：next-ai-draw-io。它将大语言模型（LLM）与 draw.io 深度结合，真正实现了"说画就画"的智能绘图体验。
🌟 一句话概括
你只需输入一段文字描述（比如"画一个用户登录的流程图"），AI 就会自动生成对应的 draw.io 流程图，并且支持上传图片反向生成结构化图表。
"
Demo 地址 👉 https://next-ai-draw-io.vercel.app
我试用后，效果非常好，可以利用上传的图片快速生成类似的可编辑的流程图。
测试效果
🚀 核心功能亮点
-
自然语言生成图表：输入文字指令，AI 自动生成 draw.io 兼容的 XML 图表。
-
图片转流程图：上传手绘草图或截图，AI 自动识别并重建为可编辑的结构化图表。
-
多模型支持：兼容 OpenAI、Anthropic（Claude）、Google AI、Azure、Ollama、DeepSeek 等主流大模型。
-
版本历史 & 实时聊天交互：每次修改都保留历史记录，还能在聊天窗口中实时调整图形。
-
动画连接线：支持生成带动态效果的连接线，让复杂系统架构"活"起来。
💡 技术栈 & 原理简析
-
前端框架：Next.js
-
绘图引擎：react-drawio（基于 draw.io）
-
AI 交互：ai-sdk/react
-
数据格式：所有图表以 draw.io 的 XML 格式存储和渲染，完全兼容官方编辑器
整个流程是：用户输入 → LLM 理解意图 → 生成/修改 XML → 实时渲染图表。
🛠️ 如何本地部署？
-
克隆项目：
git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-io -
安装依赖：
npm install -
配置 AI 提供商（如 OpenAI）：
cp env.example .env.local编辑
.env.local，填入你的 API Key、模型名称等。 -
启动服务：
npm run dev访问
http://localhost:3000即可开始绘图！
开源地址：
👉 https://github.com/DayuanJiang/next-ai-draw-io在线体验：
👉 https://next-ai-draw-io.vercel.app
看着涨🌟速度就知道不简单，快去试试吧~
往期相关