怎么用 AI 画业务流程图?开源一个我们自己做的流程图 AI 工具!

1、 使用 Gemini， 借助插件直接渲染流程图

这个方法最简单，装个 Chrome 插件就行，名字叫 Voyager。

关于这个插件，我推荐过很多同学，说句题外话，这个插件不仅是为画流程图专门设计的，它是给 Gemini 整个用户体验做增强用的，装上之后 Gemini 网页会多出来一堆能力：文件夹管理对话、提示词库、时间线导航、对话导出 PDF、去除 Gemini 生成图片的水印。

这些能力真的超级强，我个人觉得：堪称 Gemini 的最强 CP。

算了，作为贴心人设的镜哥，咱还是服务到位吧，➡️  你可以直接再 chrome 应用商店添加：

https://chromewebstore.google.com/detail/voyager/iifacdnjakkhjjiengaffnegbndgingi?utm_source=github&utm_medium=docs&utm_campaign=organic_growth&utm_content=zh

言归正传，它有一个能力跟流程图直接相关：自动在 Gemini 网页里渲染 Markdown 和 Mermaid 代码。

啥意思呢？

你让 Gemini 帮你画流程图，它会输出一段 Mermaid 代码。原本你得复制这段代码、切到一个外部渲染网站、再粘贴、再看图。

但你安装了 Voyager 之后，Gemini 除了输出 Mermaid 代码块，插件自己就把图渲染出来了，直接在对话框里看，不用切网站。

工作流从五步压缩到两步。

嗯，这样确实很丝滑。

但这种方式的短板也很明确。

第一，渲染出来的图效果一般。

Voyager 用的是 Mermaid 默认样式，颜色、字体、节点形状都很朴素，你想拿来贴到正式的 PRD 或者方案文档里，美观度上确实不尽人意。 

第二，不好修改。

插件渲染的是 Mermaid 代码的结果，你想改样式，得回头去改 Mermaid 代码，再让它重新渲染。这对不写代码的 PM 来说，多少还是有些门槛的。

所以这一招更像个信息差小补丁。如果你本来就重度用 Gemini，装一个能省点切网站的麻烦。如果你的核心目的就是画图，那这招不够。

2、Mermaid 语法 + 在线编辑器，日常画图的主力方案

这个方法的核心就两步：

1️⃣用 Gemini /ChatGPT把自然语言翻译成 Mermaid 语法。

2️⃣再贴到 mermaid.live 渲染出图。

Mermaid 是啥？

简单说，就是一段代码描述节点和箭头，跑一下就能渲染成图。它原本是程序员圈子里在用的工具，因为写「代码」对工程师而言很自然。

但 Mermaid 的语法对 PM 来说是有门槛的，flowchart TD A-->B[判断] 这种写法，PM 学起来累，记起来更累。

AI 来了之后，这道门槛被压平了。

你压根不用学语法，你只要把业务流程用人话说清楚，AI 自己会翻译成 Mermaid 代码。

举个例子，咱用一个电商购物全流程做演示。

打开 Gemini，把下面这段提示词粘进去：

你是一个 Mermaid 流程图专家。请把下面这段业务描述转成可直接渲染的 Mermaid 代码：业务描述：用户加入购物车 → 提交订单 → 系统校验库存 →(库存足) 进入支付 →(支付成功) 物流发货 → 用户确认收货 →完成订单 ;(库存不足) 返回购物车提示要求：1. 用 flowchart TD 语法2. 判断节点用菱形表示3. 关键节点加简短说明4. 直接输出代码，不要解释

Gemini 3 秒就会返回一段 Mermaid 代码。

把这段代码复制下来，然后打开：https://mermaid.ai/或者 mermaid.live，一张完整的电商购物流程图就出来了。

如果你需要画泳道图或时序图，提示词里把 flowchart TD 换成 sequenceDiagram，让 Gemini 按几个角色分泳道生成，再贴回去就行了。

另外，上面那两个网站，我个人更推荐：https://mermaid.ai/，因为这个网站可以进一步修改样式。

当然，整体上，这个方法2比 方法 1 的Gemini 插件的优点还是非常明显的：渲染效果比 Voyager 好不少、可以下载图片、关键样式（节点颜色、布局方向）能在编辑器里调一调。 

不过，同样的，短板也得说清楚。

在线 Mermaid 编辑器里，想要更高级的编辑能力、保存项目、批量导出，往往得开会员。免费版偶尔会撞次数限制，以及 AI 修正语法错误等限制。。

不过，对日常使用而言依然够用，是咱团队在第三招做出来之前的主力方案。

3、 我们Vibe Coding 的内部工具，现在开源

另外想分享的一个，就是我们团队自己做的一个小项目，其实我们内部用的很高频。

这是斌哥前段时间用 ClaudeVibe Coding 的，定位到核心就两件事：

首先，要能自然语言输出业务流程图或者泳道图，当然，mermaid 语法也要支持（保证业务节点不丢、不重命名等）；

另外，渲染图这一步要用咱团队自训的样式，要美观，并且可以直接下载为 png（不是 Mermaid 默认那种朴素的，而是更接近 ProcessOn 美观度的）。

当然，说实话，这个项目的功能逻辑并不复杂，甚至相对比较简单。

核心的业务流程，基本上就是三个步骤。

1️⃣首先，用户输入自然语言，或者是 Mermaid的语法。

2️⃣然后配置好大模型后进行调用，自动按照我们预设的模板输出结构化代码。

3️⃣接着，前端按照预设的样式进行渲染，生成对应的业务流程图或者泳道图。之后我们就可以把它下载下来使用。

说实话，我们自己日常使用比较高频，基本能满足我们的需求。

当然，关于图片的模板，大家每家的业务场景可能都不一样，对美观的定义也有所不同。而且我个人觉得这个项目也有很多需要优化的点。

另一方面，镜哥作为AI学习者/AI 创业者，最近我看到很多人都在做一些开源，我也从开源的社区，尤其是开源的Skills等等，学到了很多，包括前段时间卡兹克等一众大佬都在开源自己的一些项目。

这也侧面影响着我，让我感觉所有人是一个集合的感觉特别强烈，所以我们准备把它开源出来。

我们也知道这个小项目存在很多不足，主要也是希望能给大家提供一个思路参考，让大家稍微节省一点精力，而且特别推荐大家可以结合自己的情况做进一步的调整。

📦 开源地址：https://github.com/DPXJ/ai-pmtools-swimlane

顺便立个不扣绩效的 KPI：镜哥后续争取也多做一些开源的分享、短视频直播啥的。

另外，有的同学可能对AI的了解不是特别多（先透露一下，我们也在为这类产品同学做一个AI提效系列课程），比如，拉取项目，自己还没有 Vibe Coding 过等等。

于是，我们也在服务器上做了部署，大家可以直接去体验，模型我们自己已配置好，开箱即用/完全免费，而且后续我们还会持续迭代。

只是希望对你能有一点点参考就行。

🌐 在线体验：https://swimlane.shangbianai.com

最后，可能还有关于AI化业务流程中，存在一些更好的方法，我可能也不知道，也欢迎大家在评论区分享。

希望大家都能够利用好 AI，都能在 AI 时代更好的成长！