摘要:在数字化时代,流程图是产品经理工作中不可或缺的工具,但传统的流程图绘制方式往往耗时费力,效率低下。随着AI技术的飞速发展,现在有了更高效、更智能的解决方案。本文将介绍如何利用AI结合Mermaid语法,快速生成专业且美观的流程图。
在数字化时代,流程图是产品经理工作中不可或缺的工具,但传统的流程图绘制方式往往耗时费力,效率低下。随着AI技术的飞速发展,现在有了更高效、更智能的解决方案。本文将介绍如何利用AI结合Mermaid语法,快速生成专业且美观的流程图。
今天分享的案例是:利用Mermaid语法进行AI画流程图, 这对于咱们产品工作来说非常实用,建议点赞、收藏,跟着学,你也能学会!
图-⬆️利用mermaid语法,一键绘制流程图
在这个信息爆炸、AI新能力快速涌现的时代,咱们的核心竞争力,将不再是处理信息的‘手速’,而是驾驭信息、创造洞察的‘脑力’!
这段时间,咱不是聊了点“AI产品技能树”的实战经验嘛,从原型设计到产品方案汇报等。
好几个同学特意留言反馈说很受启发,镜哥咱这心里也暖洋洋的,就像郭德纲老师所说“江山父老能容我,不使人间造孽钱”啊!(虽然大家也没买票打赏。。)
当然,也有不少同学私信,问我能不能再深入点,把产品架构、产品规划、业务流程这些更核心的产品设计环节,也掰开揉碎了讲讲怎么跟AI结合,看看AI能给咱们带来啥样的“神助攻”。
事实上,在AI时代巨变的洪流中,每一次技术的跃迁,都意味着工作方式的迭代升级,咱们的产品工作,也有太多可以插上智能翅膀的地方了!
这不,镜哥立马就安排上了!
今天,咱们就先来聊个高频且让不少产品经理“头大”的环节——业务流程设计。
大家都知道,业务流程图对咱们产品设计工作有多关键,那是你对业务的抽象、对市场的洞察,最终落地时的骨架和血肉。
可当你真沉浸到具体的业务场景里,你会发现这活儿虽然重要,但也挺耗时间、特磨人——因为一旦某个业务活动或规则调整了,整张流程图可能就得跟着“大变脸”,甚至推倒重来!
咱们吭哧吭哧对着Visio、Axure捣鼓半天,画出来不是密密麻麻像蜘蛛网,就是各种连线缠绕不清,改起来更是要了老命!
好消息是,这效率内耗,现在咱们也有了跟它一定程度上说“拜拜”的可能了!
“工欲善其事,必先利其器”。
镜哥多说一句个人暴论:在AI无孔不入的当下,如果还偏执地抱着老一套工具不放,甚至更自诩为古典匠人,都是在逆时代趋势的不进则退,也更像是在“用战术上的勤奋,掩盖战略上的懒惰”!。
事实上,镜哥每次听到团队资深老同事说“担心AI出错”,我都想引用《堂吉柯德》里的一句话:鲁莽也比怯懦更接近勇敢。
好,今天,镜哥就给大家带来一个能让你画流程图效率“Duang”一下提升N个档次的秘密武器——AI工具结合Mermaid语法!
说到Mermaid,肯定有同学还觉得有点陌生,但了解之后你会发现,它绝对是咱们产品经理的“超强辅助”!
简单来说,Mermaid就是一个基于文本的图表绘制工具。你不需要拖拽各种图形,也不需要担心连线歪七扭八,它能让你像写Markdown一样,用简单的文字描述(也就是所谓的“语法”)来快速生成各种图表。
这包括但不限于咱们最常用的流程图(Flowchart)、时序图(Sequence Diagram)、类图(Class Diagram)等等!
Mermaid的官网是 ⬇️:
mermaid.js.org,官网上面有详细的语法说明和各种示例。
Mermaid在线编辑器的地址为⬇️:
https://www.mermaidchart.com/app/dashboard,大家后续可以通过编辑器地址来使用。
大家别看它是代码,但有了AI加持后咱们上手非常快,因为其核心就是用文字来定义节点和它们之间的关系,然后神奇的事情就发生了——你的文字自动就“变身”成了漂亮的图!
这种纯文本的绘制方式,简直是为我们产品经理量身定做的——改起来贼方便,版本管理也容易,而且还能和各种文档、代码平台完美结合,想想就刺激不?
事实上,如今AI已然把Mermaid语法门槛极度降低,咱们甚至不需要懂Mermaid语法,只需要通过自然语言和AI交流,让其帮你生成符合mermaid语法的代码,而后通过在线编辑器即可实现。
因为,镜哥有个朋友老A,正好在一家电商公司做产品,他们前段时间要优化一个复杂的订单履约流程,涉及到用户下单、支付、库存扣减、物流发货、用户签收等等十几个环节。
而且中间还穿插各种异常处理,老A吭哧吭哧用Visio画了两天,密密麻麻铺满了三张A4纸,自己看着都眼晕,更别提给开发和运营团队讲解了。
那天晚上他跟我吐槽时,我说你用Mermaid啊。
怎么用?
你完全可以这样操作:
首先,用你最习惯的自然语言,把脑子里关于业务流程的想法,毫无保留地“倾倒”给AI。
别担心语法、逻辑,就像你跟同事口述一样,把流程的来龙去脉、关键节点、决策分支都描述清楚。AI会像一个经验丰富的业务顾问,帮你“查漏补缺”,梳理出清晰的文字版流程。
一旦你确认这份文字流程“没毛病”,完全符合你的业务逻辑,那么,再发出指令,让AI帮你把这份文字流程“翻译”成 Mermaid语法代码
第1步,通过自然语言和AI对话,确认业务流程的文字描述首先,咱们还是先把业务流程文字描述确认清楚,确保流程描述没问题,这是后续操作的前提。
当然,咱们同样使用AI来辅助进行流程梳理,不仅能完善组织语言,甚至还能发现一些潜在的问题或忽略掉的流程环节。
镜哥在这里依然推荐首选使用Gemini 2.5,同时,有条件的同学更推荐使用Cursor或Claude4.0,因为代码报错很少,效率很高。
图-⬆️ 利用Gemini快速梳理业务流程
第2步,继续和AI对话,获得Mermaid代码。当你确认业务流程符合你的要求后,咱们就可以直接让AI帮你生成符合Mermaid语法的代码了。
通常来说,各类AI Chat工具都能识别、生成Mermaid格式的内容,当然,镜哥自己觉得效果最好的还是上面提到过的Gemini 2.5 Pro或Claude4.0。
比如,上述流程,通过Gemini生成的符合Mermaid语法的代码可以如下,大家可以作为参考(也可以复制去测试体验下):
graph TD subgraph”订单创建与支付” userBrowse[用户浏览商品]
–> submitorder(提交订单); submitOrder
–> createOrder{创建订单}; createOrder
–> pendingPayment[待支付状态]; pendingPayment
–> paymentGateway{调用支付网关}; paymentGateway
— 支付成功
–> paymentSuccess[支付成功]; paymentGateway
— 支付失败/超时
–> orderClosed[订单自动关闭];
end subgraph”订单处理与风控” paymentSuccess
–> notifyWMS[通知WMS/ERP系统]; notifyWMS
–> validateOrder{订单风控与库存校验}; validateOrder
— 校验通过
–> lockInventory[锁定库存]; validateOrder
— 库存不足/高风险
–> orderException[订单异常]; orderException
–> manualReview[人工审核/客服联系]; manualReview
— 审核通过
–> lockInventory; manualReview
— 审核失败
–> cancelAndRefund[取消订单并退款]; end subgraph”仓储作业 WMS” lockInventory
–> generatePickList[生成拣货单]; generatePickList
–> warehousePicking[仓库按单拣货]; warehousePicking
–> packAndCheck[打包与复核]; packAndCheck
–> weighAndLabel[称重并打印面单]; weighAndLabel
–> calllogisticsAPI{调用物流公司API}; callLogisticsAPI
— 下单成功
–> packageShippedOut[包裹出库]; callLogisticsAPI
— 下单失败 –> logisticsException[物流异常,人工处理]; end subgraph”物流与签收” packageShippedOut
–> updateStatusShipped[更新订单状态为’已发货’]; updateStatusShipped
–> notifyUserShipped[短信/App通知用户]; packageShippedOut
–> handoverToCourier[包裹交接给物流公司]; handoverToCourier
–> inTransit[物流运输中]; inTransit –> outForDelivery[到达目的站,开始派送]; outForDelivery
–> userSigns{用户签收}; end subgraph”订单终态与售后” userSigns
— 正常签收
–> confirmReceipt[确认收货]; userSigns
— 拒收/异常
–> triggerReturn[触发逆向物流-退货]; confirmReceipt
–> orderComplete[订单完成]; orderComplete
–> inviteForReview[邀请用户评价]; triggerReturn
–> afterSalesProcess[进入售后处理流程]; end
图-⬆️ 利用Gemini2.5 Pro,输出Mermaid代码
接下来就简单了,咱们只需将生成的代码轻轻一复制,粘贴到任何一个支持Mermaid的在线编辑器(比如前面提到的 Mermaid Chart)。
一般情况在,几乎一瞬间,很快一份专业又美观的流程图就立刻呈现在你眼前,效率简直不要太高!
比如,根据Mermaid语法,上述流程可以快速生成。
图-⬆️ 根据Mermaid代码,一键绘制流程图
bug如何修复、是否需要开通会员?当然,很多时候,AI生成的Mermaid代码可能会有bug,这也很正常,官方提供了AI修复能力,但是一般需要会员,我一般直接复制bug信息,交给Gemini或cursor来修复。
基本上,修复两三次,bug就能搞定。
这里多说一句,Mermaid Pro版本的会员是6.67刀(为啥有整有零呢),开通会员之后就可以使用AI来修复bug,而且不限制文件数量,要知道免费版本只能创建3个文件。
图-⬆️ Mermaid会员定价,可按需不买。。。
但有一说一,Mermaid日常使用的话,其实咱不开通会员也足够了,因为支持导出PNG,最重要的是还不带水印,这点要好评点赞。
所以,这样的话,即便是限制3个文件,对咱们影响也不大,完全可以导出后删除新建。
当然,不缺钱的同学当我没说。
一般来说,根据Mermaid语法生成的图片,可能会有些排版不够精致,这种情况下,我都会选择自适应,基本就能达到我的要求。
自适应的入口参考下图:
图-⬆️ Mermaid选择自适应(Adaptive)
另外,自适应之后如果需要调整样式,可以在主题里进行调整或自定义,这个咱就不过多展开了,大家可以自行测试,很简单的。
技巧二:叠加《录音分析大师》Buff,效率更近一步还记得上次我给大家分享的那个「录音分析大师」吗?(没看过的赶紧去补课:我用Gemini做了个「录音分析大师」,会议纪要一键转PRD,产品梳理效率直接拉满!)。
要知道,咱这个AI智能体,可不仅仅是整理会议纪要、梳理业务流程的“一把好手”!
实话跟大家讲,我们团队很多小伙伴现在就是利用咱这个“录音分析大师”来搞定流程图的!
你想想,开会或讨论会上,大家七嘴八舌地聊业务流程,很多时候都是口语化的、非结构化的。
以前咱们是不是得把录音转文字,再手动梳理,然后一步步画?费时费力不说,还容易漏掉细节。
现在不一样了!我们直接把会议录音转成的文字稿“喂”给“录音分析大师”,并且,你知道的,这个智能体,我已经给它设定好了“咒语”——如果你在Prompt里选择或者明确指示它需要“梳理业务流程”,它不仅会帮你用文字描述一遍,更“骚”的是,它能直接给你输出Mermaid语法的代码!
这是什么概念?
这意味着,你们刚开完会,你甚至不用离开会议室,边喝水边操作几分钟,一份初版的流程图可能就已经出来了!
团队里的小伙伴用我的这种方法,那和开发沟通的效率极高,因为流程图不再是“抽象艺术”,而是“所见即所得”,修改起来也极为方便。
你改个文字,流程图自动就变了,比传统拖拽式的工具效率高了不止一个量级!
正所谓,“好风凭借力,送我上青云。”
你看,只要你能善用AI工具,你的工作效率提升就不是一星半点,而是指数级的放大。
当然,Mermaid也好,其他AI应用也罢,都不是万能的,我们在使用过程中也需要注意一些问题,比如,AI的理解能力有限有时候咱们还需要仔细Review AI生成的结果,进行人工修正。
再比如,Mermaid语法有一定的学习成本:虽然基本语法不难,但要绘制复杂的流程图,仍然需要一定的学习和实践。
但是,这些都不应该成为咱们排斥AI新应用的接口,相反的,主动的尝试、高频地使用、不断地调优,才能真正提升我们的工作效率、激发AI最大潜能关键所在。
最后,镜哥还想对各位峡谷同学说:拥抱AI,不是一句空话,而是要真正将其融入到我们的日常工作中。学会使用AI工具结合Mermaid语法来绘制流程图,只是我们在AI时代提升效率的一个小小尝试。
这只是冰山一角,更大的效率革命才刚刚开始!未来,还有更多AI赋能产品经理的可能性等待我们去探索。
记住,工具永远在变,但提升效率的底层逻辑不变。在这个信息爆炸、AI涌现的时代,我们的核心竞争力,将不再是处理信息的“手速”,而是驾驭信息、创造洞察的“脑力”!
还是那句老话:
进化,不是选择,而是必然。与其被时代裹挟,不如主动出击,成为定义未来的那批人!
来源:人人都是产品经理一点号