图片转流程图 他真的实现了

用 AI 自动生成流程图？这款开源工具做到了！

文 / 陈文茂
发布时间：2025 年 12 月 2 日

最近一直在思考一个问题：有没有可能通过自然语言，或者一张草图，自动生成结构清晰的流程图或架构图？
没想到，真的有开发者把这件事做成了——而且做得相当出色！

今天要向大家强烈推荐一款开源项目：**next-ai-draw-io**。它将大语言模型（LLM）与 draw. Io 深度结合，真正实现了“说画就画”的智能绘图体验。

🌟 一句话概括

你只需输入一段文字描述（比如“画一个用户登录的流程图”），AI 就会自动生成对应的 draw. Io 流程图，并且支持上传图片反向生成结构化图表，甚至还能添加动画连接线！

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

Demo 界面截图

我亲自试用后，效果惊艳——生成的流程逻辑清晰、图标规范。

🚀 核心功能亮点

  • 自然语言生成图表：输入文字指令，AI 自动生成 draw. Io 兼容的 XML 图表。
  • 图片转流程图：上传手绘草图或截图，AI 自动识别并重建为可编辑的结构化图表。
  • 多模型支持：兼容 OpenAI、Anthropic（Claude）、Google AI、Azure、Ollama、DeepSeek 等主流大模型。

    特别推荐使用 Claude Sonnet 4.5：它在训练时专门学习过 draw. Io 的 AWS 图标，画云架构图最准！

  • 版本历史 & 实时聊天交互：每次修改都保留历史记录，还能在聊天窗口中实时调整图形。
  • 动画连接线：支持生成带动态效果的连接线，让复杂系统架构“活”起来。

💡 技术栈 & 原理简析

  • 前端框架：Next. Js
  • 绘图引擎：react-drawio（基于 draw. Io）
  • AI 交互：**@ai-sdk/react**
  • 数据格式：所有图表以 draw. Io 的 XML 格式存储和渲染，完全兼容官方编辑器

整个流程是：用户输入 → LLM 理解意图 → 生成/修改 XML → 实时渲染图表。

🛠️ 如何本地部署？

  1. 克隆项目：

    1
    2
    git clone https://github.com/DayuanJiang/next-ai-draw-io
    cd next-ai-draw-io

  2. 安装依赖：

    1
    npm install

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

    1
    cp env.example .env.local

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

  4. 启动服务：

    1
    npm run dev

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

项目也支持一键部署到 Vercel（推荐）：点击这里快速部署

📌 为什么值得关注？

在知识管理、系统设计、技术分享等场景中，图表是信息传递效率最高的媒介之一。但传统绘图工具门槛高、流程繁琐。而 next-ai-draw-io 正在用 AI 降低这一门槛——让“表达想法”和“可视化呈现”无缝衔接。

对我个人而言，它完美契合了我正在构建的 “AI + 个体知识管理”体系：语音记录思考 → AI 提炼要点 → 自动生成概念图/流程图 → 存入 Obsidian。这正是“记录 → 整理 → 复盘”闭环的关键一环。

✅ 结语

如果你也经常需要画流程图、系统架构图、思维导图，或者希望将手绘草图快速数字化，强烈建议你去试试这个项目！

开源地址：👉 https://github.com/DayuanJiang/next-ai-draw-io
在线体验：👉 https://next-ai-draw-io.vercel.app

工具推荐
#工具推荐 #流程图
图片转流程图 他真的实现了
https://maoyu92.github.io/2025/12/02/03 工具推荐/图片转流程图 他真的实现了/
作者
陈文茂
发布于
2025年12月2日
许可协议