用 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 → 实时渲染图表。

🛠️ 如何本地部署？

1. 克隆项目：

   git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-io

2. 安装依赖：

   npm install

3. 配置 AI 提供商（如 OpenAI）：

   cp env.example .env.local

   编辑 .env.local，填入你的 API Key、模型名称等。

4. 启动服务：

   npm run dev

   访问 http://localhost:3000 即可开始绘图！

开源地址：

👉 https://github.com/DayuanJiang/next-ai-draw-io在线体验：

👉 https://next-ai-draw-io.vercel.app

看着涨🌟速度就知道不简单，快去试试吧~

   往期相关

ProcessOn + DeepSeek：飞速提升流程图制作效率

Deepseek + Napkin 轻松打造高颜值流程图

deepseek + mermaid 自动绘制流程图

D2 简洁而强大的脚本流程图工具

obsidian  excalidraw 绘制思维导图

ProcessOn + DeepSeek：飞速提升流程图制作效率