告別“手搓”流程圖:教你用AI和Mermaid,效率直接拉滿!
在數字化時代,流程圖是產品經理工作中不可或缺的工具,但傳統(tǒng)的流程圖繪制方式往往耗時費力,效率低下。隨著AI技術的飛速發(fā)展,現(xiàn)在有了更高效、更智能的解決方案。本文將介紹如何利用AI結合Mermaid語法,快速生成專業(yè)且美觀的流程圖。
今天分享的案例是:利用Mermaid語法進行AI畫流程圖, 這對于咱們產品工作來說非常實用,建議點贊、收藏,跟著學,你也能學會!
圖-??利用mermaid語法,一鍵繪制流程圖
每一次技術的躍遷,都意味著工作方式的迭代升級。
在這個信息爆炸、AI新能力快速涌現(xiàn)的時代,咱們的核心競爭力,將不再是處理信息的‘手速’,而是駕馭信息、創(chuàng)造洞察的‘腦力’!
這段時間,咱不是聊了點“AI產品技能樹”的實戰(zhàn)經驗嘛,從原型設計到產品方案匯報等。
好幾個同學特意留言反饋說很受啟發(fā),鏡哥咱這心里也暖洋洋的,就像郭德綱老師所說“江山父老能容我,不使人間造孽錢”?。。m然大家也沒買票打賞。。)
當然,也有不少同學私信,問我能不能再深入點,把產品架構、產品規(guī)劃、業(yè)務流程這些更核心的產品設計環(huán)節(jié),也掰開揉碎了講講怎么跟AI結合,看看AI能給咱們帶來啥樣的“神助攻”。
事實上,在AI時代巨變的洪流中,每一次技術的躍遷,都意味著工作方式的迭代升級,咱們的產品工作,也有太多可以插上智能翅膀的地方了!
這不,鏡哥立馬就安排上了!
今天,咱們就先來聊個高頻且讓不少產品經理“頭大”的環(huán)節(jié)——業(yè)務流程設計。
大家都知道,業(yè)務流程圖對咱們產品設計工作有多關鍵,那是你對業(yè)務的抽象、對市場的洞察,最終落地時的骨架和血肉。
可當你真沉浸到具體的業(yè)務場景里,你會發(fā)現(xiàn)這活兒雖然重要,但也挺耗時間、特磨人——因為一旦某個業(yè)務活動或規(guī)則調整了,整張流程圖可能就得跟著“大變臉”,甚至推倒重來!
咱們吭哧吭哧對著Visio、Axure搗鼓半天,畫出來不是密密麻麻像蜘蛛網,就是各種連線纏繞不清,改起來更是要了老命!
好消息是,這效率內耗,現(xiàn)在咱們也有了跟它一定程度上說“拜拜”的可能了!
“工欲善其事,必先利其器”。
鏡哥多說一句個人暴論:在AI無孔不入的當下,如果還偏執(zhí)地抱著老一套工具不放,甚至更自詡為古典匠人,都是在逆時代趨勢的不進則退,也更像是在“用戰(zhàn)術上的勤奮,掩蓋戰(zhàn)略上的懶惰”!。
事實上,鏡哥每次聽到團隊資深老同事說“擔心AI出錯”,我都想引用《堂吉柯德》里的一句話:魯莽也比怯懦更接近勇敢。
好,今天,鏡哥就給大家?guī)硪粋€能讓你畫流程圖效率“Duang”一下提升N個檔次的秘密武器——AI工具結合Mermaid語法!
一、Mermaid簡介
說到Mermaid,肯定有同學還覺得有點陌生,但了解之后你會發(fā)現(xiàn),它絕對是咱們產品經理的“超強輔助”!
簡單來說,Mermaid就是一個基于文本的圖表繪制工具。你不需要拖拽各種圖形,也不需要擔心連線歪七扭八,它能讓你像寫Markdown一樣,用簡單的文字描述(也就是所謂的“語法”)來快速生成各種圖表。
這包括但不限于咱們最常用的流程圖(Flowchart)、時序圖(Sequence Diagram)、類圖(Class Diagram)等等!
Mermaid的官網是 ??:
mermaid.js.org,官網上面有詳細的語法說明和各種示例。
Mermaid在線編輯器的地址為??:
https://www.mermaidchart.com/app/dashboard,大家后續(xù)可以通過編輯器地址來使用。
大家別看它是代碼,但有了AI加持后咱們上手非常快,因為其核心就是用文字來定義節(jié)點和它們之間的關系,然后神奇的事情就發(fā)生了——你的文字自動就“變身”成了漂亮的圖!
這種純文本的繪制方式,簡直是為我們產品經理量身定做的——改起來賊方便,版本管理也容易,而且還能和各種文檔、代碼平臺完美結合,想想就刺激不?
事實上,如今AI已然把Mermaid語法門檻極度降低,咱們甚至不需要懂Mermaid語法,只需要通過自然語言和AI交流,讓其幫你生成符合mermaid語法的代碼,而后通過在線編輯器即可實現(xiàn)。
二、通過案例,快速理解其價值和使用方法
這樣,咱們直接通過一個真實案例——電商履約流程,來快速理解Mermaid的使用方法和價值。
因為,鏡哥有個朋友老A,正好在一家電商公司做產品,他們前段時間要優(yōu)化一個復雜的訂單履約流程,涉及到用戶下單、支付、庫存扣減、物流發(fā)貨、用戶簽收等等十幾個環(huán)節(jié)。
而且中間還穿插各種異常處理,老A吭哧吭哧用Visio畫了兩天,密密麻麻鋪滿了三張A4紙,自己看著都眼暈,更別提給開發(fā)和運營團隊講解了。
那天晚上他跟我吐槽時,我說你用Mermaid啊。
怎么用?
你完全可以這樣操作:
首先,用你最習慣的自然語言,把腦子里關于業(yè)務流程的想法,毫無保留地“傾倒”給AI。
別擔心語法、邏輯,就像你跟同事口述一樣,把流程的來龍去脈、關鍵節(jié)點、決策分支都描述清楚。AI會像一個經驗豐富的業(yè)務顧問,幫你“查漏補缺”,梳理出清晰的文字版流程。
一旦你確認這份文字流程“沒毛病”,完全符合你的業(yè)務邏輯,那么,再發(fā)出指令,讓AI幫你把這份文字流程“翻譯”成 Mermaid語法代碼
第1步,通過自然語言和AI對話,確認業(yè)務流程的文字描述
首先,咱們還是先把業(yè)務流程文字描述確認清楚,確保流程描述沒問題,這是后續(xù)操作的前提。
當然,咱們同樣使用AI來輔助進行流程梳理,不僅能完善組織語言,甚至還能發(fā)現(xiàn)一些潛在的問題或忽略掉的流程環(huán)節(jié)。
鏡哥在這里依然推薦首選使用Gemini 2.5,同時,有條件的同學更推薦使用Cursor或Claude4.0,因為代碼報錯很少,效率很高。
圖-?? 利用Gemini快速梳理業(yè)務流程
第2步,繼續(xù)和AI對話,獲得Mermaid代碼。
當你確認業(yè)務流程符合你的要求后,咱們就可以直接讓AI幫你生成符合Mermaid語法的代碼了。
通常來說,各類AI Chat工具都能識別、生成Mermaid格式的內容,當然,鏡哥自己覺得效果最好的還是上面提到過的Gemini 2.5 Pro或Claude4.0。
比如,上述流程,通過Gemini生成的符合Mermaid語法的代碼可以如下,大家可以作為參考(也可以復制去測試體驗下):
graph TD subgraph”訂單創(chuàng)建與支付” userBrowse[用戶瀏覽商品]
–> submitOrder(提交訂單); submitOrder
–> createOrder{創(chuàng)建訂單}; createOrder
–> pendingPayment[待支付狀態(tài)]; pendingPayment
–> paymentGateway{調用支付網關}; paymentGateway
— 支付成功
–> paymentSuccess[支付成功]; paymentGateway
— 支付失敗/超時
–> orderClosed[訂單自動關閉];
end subgraph”訂單處理與風控” paymentSuccess
–> notifyWMS[通知WMS/ERP系統(tǒng)]; notifyWMS
–> validateOrder{訂單風控與庫存校驗}; validateOrder
— 校驗通過
–> lockInventory[鎖定庫存]; validateOrder
— 庫存不足/高風險
–> orderException[訂單異常]; orderException
–> manualReview[人工審核/客服聯(lián)系]; manualReview
— 審核通過
–> lockInventory; manualReview
— 審核失敗
–> cancelAndRefund[取消訂單并退款]; end subgraph”倉儲作業(yè) WMS” lockInventory
–> generatePickList[生成揀貨單]; generatePickList
–> warehousePicking[倉庫按單揀貨]; warehousePicking
–> packAndCheck[打包與復核]; packAndCheck
–> weighAndLabel[稱重并打印面單]; weighAndLabel
–> callLogisticsAPI{調用物流公司API}; callLogisticsAPI
— 下單成功
–> packageShippedOut[包裹出庫]; callLogisticsAPI
— 下單失敗 –> logisticsException[物流異常,人工處理]; end subgraph”物流與簽收” packageShippedOut
–> updateStatusShipped[更新訂單狀態(tài)為’已發(fā)貨’]; updateStatusShipped
–> notifyUserShipped[短信/App通知用戶]; packageShippedOut
–> handoverToCourier[包裹交接給物流公司]; handoverToCourier
–> inTransit[物流運輸中]; inTransit –> outForDelivery[到達目的站,開始派送]; outForDelivery
–> userSigns{用戶簽收}; end subgraph”訂單終態(tài)與售后” userSigns
— 正常簽收
–> confirmReceipt[確認收貨]; userSigns
— 拒收/異常
–> triggerReturn[觸發(fā)逆向物流-退貨]; confirmReceipt
–> orderComplete[訂單完成]; orderComplete
–> inviteForReview[邀請用戶評價]; triggerReturn
–> afterSalesProcess[進入售后處理流程]; end
圖-?? 利用Gemini2.5 Pro,輸出Mermaid代碼
將代碼復制到在線編輯器
接下來就簡單了,咱們只需將生成的代碼輕輕一復制,粘貼到任何一個支持Mermaid的在線編輯器(比如前面提到的 Mermaid Chart)。
一般情況在,幾乎一瞬間,很快一份專業(yè)又美觀的流程圖就立刻呈現(xiàn)在你眼前,效率簡直不要太高!
比如,根據Mermaid語法,上述流程可以快速生成。
圖-?? 根據Mermaid代碼,一鍵繪制流程圖
bug如何修復、是否需要開通會員?
當然,很多時候,AI生成的Mermaid代碼可能會有bug,這也很正常,官方提供了AI修復能力,但是一般需要會員,我一般直接復制bug信息,交給Gemini或cursor來修復。
基本上,修復兩三次,bug就能搞定。
這里多說一句,Mermaid Pro版本的會員是6.67刀(為啥有整有零呢),開通會員之后就可以使用AI來修復bug,而且不限制文件數量,要知道免費版本只能創(chuàng)建3個文件。
圖-?? Mermaid會員定價,可按需不買。。。
但有一說一,Mermaid日常使用的話,其實咱不開通會員也足夠了,因為支持導出PNG,最重要的是還不帶水印,這點要好評點贊。
所以,這樣的話,即便是限制3個文件,對咱們影響也不大,完全可以導出后刪除新建。
當然,不缺錢的同學當我沒說。
三、兩個小技巧
技巧一:生成圖片后,選擇自適應
一般來說,根據Mermaid語法生成的圖片,可能會有些排版不夠精致,這種情況下,我都會選擇自適應,基本就能達到我的要求。
自適應的入口參考下圖:
圖-?? Mermaid選擇自適應(Adaptive)
另外,自適應之后如果需要調整樣式,可以在主題里進行調整或自定義,這個咱就不過多展開了,大家可以自行測試,很簡單的。
技巧二:疊加《錄音分析大師》Buff,效率更近一步
還記得上次我給大家分享的那個「錄音分析大師」嗎?(沒看過的趕緊去補課:我用Gemini做了個「錄音分析大師」,會議紀要一鍵轉PRD,產品梳理效率直接拉滿?。?/p>
要知道,咱這個AI智能體,可不僅僅是整理會議紀要、梳理業(yè)務流程的“一把好手”!
實話跟大家講,我們團隊很多小伙伴現(xiàn)在就是利用咱這個“錄音分析大師”來搞定流程圖的!
你想想,開會或討論會上,大家七嘴八舌地聊業(yè)務流程,很多時候都是口語化的、非結構化的。
以前咱們是不是得把錄音轉文字,再手動梳理,然后一步步畫?費時費力不說,還容易漏掉細節(jié)。
現(xiàn)在不一樣了!我們直接把會議錄音轉成的文字稿“喂”給“錄音分析大師”,并且,你知道的,這個智能體,我已經給它設定好了“咒語”——如果你在Prompt里選擇或者明確指示它需要“梳理業(yè)務流程”,它不僅會幫你用文字描述一遍,更“騷”的是,它能直接給你輸出Mermaid語法的代碼!
這是什么概念?
這意味著,你們剛開完會,你甚至不用離開會議室,邊喝水邊操作幾分鐘,一份初版的流程圖可能就已經出來了!
團隊里的小伙伴用我的這種方法,那和開發(fā)溝通的效率極高,因為流程圖不再是“抽象藝術”,而是“所見即所得”,修改起來也極為方便。
你改個文字,流程圖自動就變了,比傳統(tǒng)拖拽式的工具效率高了不止一個量級!
正所謂,“好風憑借力,送我上青云。”
你看,只要你能善用AI工具,你的工作效率提升就不是一星半點,而是指數級的放大。
當然,Mermaid也好,其他AI應用也罷,都不是萬能的,我們在使用過程中也需要注意一些問題,比如,AI的理解能力有限有時候咱們還需要仔細Review AI生成的結果,進行人工修正。
再比如,Mermaid語法有一定的學習成本:雖然基本語法不難,但要繪制復雜的流程圖,仍然需要一定的學習和實踐。
但是,這些都不應該成為咱們排斥AI新應用的接口,相反的,主動的嘗試、高頻地使用、不斷地調優(yōu),才能真正提升我們的工作效率、激發(fā)AI最大潛能關鍵所在。
最后,鏡哥還想對各位峽谷同學說:
擁抱AI,不是一句空話,而是要真正將其融入到我們的日常工作中。學會使用AI工具結合Mermaid語法來繪制流程圖,只是我們在AI時代提升效率的一個小小嘗試。
這只是冰山一角,更大的效率革命才剛剛開始!未來,還有更多AI賦能產品經理的可能性等待我們去探索。
記住,工具永遠在變,但提升效率的底層邏輯不變。在這個信息爆炸、AI涌現(xiàn)的時代,我們的核心競爭力,將不再是處理信息的“手速”,而是駕馭信息、創(chuàng)造洞察的“腦力”!
還是那句老話:
進化,不是選擇,而是必然。與其被時代裹挾,不如主動出擊,成為定義未來的那批人!
本文由人人都是產品經理作者【產品大峽谷】,微信公眾號:【產品大峽谷】,原創(chuàng)/授權 發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!