本文將介紹一種新興的高效工具組合：AI與Mermaid。通過結(jié)合人工智能的強大生成能力和Mermaid簡潔高效的文本圖表繪制功能，產(chǎn)品經(jīng)理可以大幅提升工作效率，快速生成清晰的業(yè)務流程圖、系統(tǒng)交互圖、項目進度圖等多種圖表，同時減少因需求變更帶來的重復工作。

作為一名產(chǎn)品經(jīng)理，你是否曾經(jīng)為了向開發(fā)團隊解釋一個復雜的業(yè)務流程而絞盡腦汁？或者在產(chǎn)品評審會上，因為一張不夠直觀的流程圖而被質(zhì)疑？又或者，你花了大量時間制作精美的流程圖，卻發(fā)現(xiàn)一個小小的需求變更就要重新繪制整個圖表？

在過去的星球知識分享或者是公眾號文章中，我曾經(jīng)推薦過很多次Mermaid的這個工具，但是有不少朋友因為記不住它的語法規(guī)則，不知道怎么高效率的輸出相關圖形，所以就沒什么動力去學習和使用它。但是隨著大語言模型的持續(xù)迭代發(fā)展，現(xiàn)在的主流大語言模型及相關的產(chǎn)品都可以通過文字描述快速生成合適的Mermaid代碼，從而大大降低了文本繪圖的難度和門檻。

所以今天，我非常想再次給大家安利和推薦一下Mermaid這個產(chǎn)品，以及如何將它與AI結(jié)合，大幅提升我們?nèi)粘５墓ぷ餍省?/p>

什么是Mermaid？

Mermaid是一種基于文本的圖表繪制工具，它允許我們使用類似于Markdown的語法來創(chuàng)建各種類型的圖表。簡單來說，你只需要寫一些特定格式的文本，Mermaid就能自動將其轉(zhuǎn)換為美觀的圖表。

比如，當我需要繪制一個簡單的流程圖時，只需要寫這樣的代碼：

這段代碼會自動生成一個從上到下的流程圖，清晰地展示訂單處理的基本流程。

你可能會想，這不就是寫代碼嗎？作為產(chǎn)品經(jīng)理，我們需要學習編程？別擔心，Mermaid的語法非常簡單直觀，更像是在寫結(jié)構(gòu)化的文本，而不是編程。即使你沒有任何編程基礎，也能在短時間內(nèi)掌握它的基本用法。

Mermaid支持多種圖表類型，包括但不限于：

• 流程圖（Flowchart）
• 時序圖（Sequence Diagram）
• 甘特圖（Gantt Chart）
• 類圖（Class Diagram）
• 狀態(tài)圖（State Diagram）
• 餅圖（Pie Chart）
• 用戶旅程圖（User Journey）

這些圖表類型幾乎覆蓋了我們在產(chǎn)品工作中需要用到的所有圖表形式。無論是梳理業(yè)務流程、描述系統(tǒng)交互、規(guī)劃項目進度，還是展示數(shù)據(jù)分布，Mermaid都能勝任。

Mermaid是一種基于文本的圖表繪制工具，使用簡單的語法就能創(chuàng)建各種專業(yè)圖表，無需編程基礎，適合產(chǎn)品經(jīng)理日常工作使用。

為什么要學習Mermaid？

大多數(shù)產(chǎn)品經(jīng)理在繪制流程圖時，選擇的工具選擇通常是Visio、ProcessOn、Axure或者Draw.io這類專業(yè)繪圖軟件。它們功能強大，但使用起來也有一些痛點：

• 修改成本高：當業(yè)務流程有變更時（這在供應鏈領域幾乎是家常便飯），需要重新調(diào)整圖形、連線，有時甚至需要重新繪制整個圖表。
• 版本管理困難：圖形文件通常以二進制格式保存，無法像代碼一樣進行差異比較和版本控制。
• 協(xié)作不便：團隊成員要么需要安裝相同的軟件，要么需要依賴特定的在線平臺。
• 與文檔分離：圖表通常需要單獨導出為圖片，然后插入到文檔中，這使得后續(xù)維護變得復雜。

而Mermaid恰好解決了這些問題：

首先，Mermaid是基于文本的，這意味著你可以像編輯文本一樣編輯圖表。當業(yè)務流程發(fā)生變化時，你只需要修改相應的文本描述，而不是重新調(diào)整圖形元素。比如，在上面的訂單處理流程中，如果我們需要增加一個”客戶確認”的步驟，只需要添加一行文本即可。

其次，由于Mermaid圖表本質(zhì)上是文本，它可以輕松地納入版本控制系統(tǒng)（如Git）。你可以清晰地看到每次修改的內(nèi)容，追蹤圖表的演變歷程，甚至可以回滾到之前的版本。

第三，Mermaid的文本特性使得協(xié)作變得簡單。團隊成員可以直接在文本編輯器中修改圖表描述，無需依賴特定的繪圖軟件。而且，許多常用的文檔工具（如語雀、飛書、釘釘、Notion、Confluence）都已經(jīng)內(nèi)置了Mermaid支持，使得分享和協(xié)作更加便捷。

最后，Mermaid可以直接嵌入到Markdown文檔中，成為文檔的一部分。這意味著你的圖表和文檔是一體的，可以一起維護和更新，大大降低了文檔維護的成本。

在供應鏈領域，我們經(jīng)常需要處理復雜的業(yè)務流程和系統(tǒng)交互。比如，一個完整的訂單履約流程可能涉及訂單管理系統(tǒng)（OMS）、倉庫管理系統(tǒng)（WMS）、運輸管理系統(tǒng)（TMS）等多個系統(tǒng)的協(xié)作。使用Mermaid，我們可以清晰地描述這些系統(tǒng)之間的交互，并且在業(yè)務變更時快速調(diào)整圖表。

這個時序圖清晰地展示了訂單從客戶下單到最終配送的整個流程，以及各個系統(tǒng)之間的交互。如果流程有變更，我們只需要修改相應的文本描述即可。

小結(jié)：學習Mermaid能夠幫助產(chǎn)品經(jīng)理解決傳統(tǒng)繪圖工具的痛點，包括修改成本高、版本管理困難、協(xié)作不便和與文檔分離等問題。特別是在供應鏈這樣流程復雜且經(jīng)常變更的領域，Mermaid的優(yōu)勢更加明顯。

Mermaid在產(chǎn)品工作中的高頻場景

作為供應鏈產(chǎn)品經(jīng)理，我們的日常工作涉及多種場景，Mermaid在這些場景中都能發(fā)揮重要作用。下面，我將結(jié)合實際案例，分享Mermaid在幾個高頻工作場景中的應用。

1. 業(yè)務流程梳理

在開始一個新項目或優(yōu)化現(xiàn)有系統(tǒng)時，梳理業(yè)務流程是必不可少的步驟。傳統(tǒng)的方式是使用流程圖軟件繪制，但這往往耗時且難以迭代。

以庫存管理為例，我曾經(jīng)需要梳理一個從采購計劃到庫存調(diào)撥的完整流程。使用Mermaid，我可以這樣描述：

graph LR? ?
A[銷售預測] –> B[需求計劃]? ?
B –> C[采購計劃]? ?
C –> D[采購訂單]? ?
D –> E[入庫]? ?
E –> F[庫存管理]? ?
F –> G{庫存是否充足?}? ?
G –>|是| H[正常銷售]? ?
G –>|否| I[庫存調(diào)撥]? ?
I –> J[緊急采購]? ?
J –> D? ?
I –> K[調(diào)整銷售策略]

這個流程圖清晰地展示了庫存管理的主要環(huán)節(jié)和決策點。當我與業(yè)務部門討論時，可以直接在會議中修改這個圖表，實時反映大家的意見。

更重要的是，這個流程圖可以作為產(chǎn)品需求文檔的一部分，幫助開發(fā)團隊理解業(yè)務邏輯。當流程有變更時，我只需要修改相應的文本描述，而不是重新繪制整個圖表。

2. 系統(tǒng)交互設計

在供應鏈系統(tǒng)中，不同模塊之間的交互往往非常復雜。使用Mermaid的時序圖，我們可以清晰地描述這些交互。

比如，在設計一個跨倉調(diào)撥功能時，我需要整理調(diào)出倉，在途庫存，調(diào)入倉這三個核心對象的交互流程：

這個時序圖不僅展示了主體之間的交互順序，還明確了每個主體的職責邊界。在與開發(fā)團隊溝通時，這樣的圖表能夠幫助大家快速達成共識，避免理解偏差。

3. 狀態(tài)流轉(zhuǎn)設計

在供應鏈系統(tǒng)中，訂單、庫存、物流等實體往往有復雜的狀態(tài)流轉(zhuǎn)。使用Mermaid的狀態(tài)圖，我們可以直觀地展示這些狀態(tài)及其轉(zhuǎn)換條件。

以訂單狀態(tài)為例：

這個狀態(tài)圖清晰地展示了訂單從創(chuàng)建到結(jié)束的所有可能狀態(tài)和轉(zhuǎn)換路徑。在設計訂單管理系統(tǒng)時，這樣的圖表能夠幫助我們確保覆蓋所有狀態(tài)轉(zhuǎn)換場景，避免遺漏。

4. 項目規(guī)劃與進度跟蹤

作為產(chǎn)品經(jīng)理，我們經(jīng)常需要規(guī)劃項目進度并跟蹤執(zhí)行情況。Mermaid的甘特圖功能非常適合這個場景。

比如，在規(guī)劃一個庫存優(yōu)化項目時：

這個甘特圖直觀地展示了項目各階段的時間安排和依賴關系。在項目進行過程中，我們可以隨時更新圖表，反映實際進度。

5. 數(shù)據(jù)分析與可視化

在供應鏈決策中，數(shù)據(jù)分析是必不可少的環(huán)節(jié)。Mermaid提供了餅圖等簡單的數(shù)據(jù)可視化工具，適合在產(chǎn)品文檔中展示一些基本的數(shù)據(jù)分布。

比如，在分析庫存結(jié)構(gòu)時：

這個餅圖直觀地展示了不同類別商品在庫存中的占比，幫助我們識別重點關注的商品類別。

Mermaid在產(chǎn)品工作的多個場景中都能發(fā)揮重要作用，包括業(yè)務流程梳理、系統(tǒng)交互設計、狀態(tài)流轉(zhuǎn)設計、項目規(guī)劃與進度跟蹤，以及簡單的數(shù)據(jù)分析與可視化。通過這些應用，我們可以提高工作效率，改善溝通質(zhì)量，確保產(chǎn)品設計的完整性和準確性。

Mermaid的一些AI通用提示詞

在使用Mermaid的過程中，我總結(jié)了一些通用的AI提示詞（Prompt），可以幫助你借更高效地創(chuàng)建各類圖表。特別是當你將Mermaid與AI工具（如ChatGPT）結(jié)合使用時，這些提示詞能夠幫助你快速獲得想要的圖表。

流程圖提示詞

當你需要創(chuàng)建業(yè)務流程圖時，可以使用類似這樣的提示詞：

請使用Mermaid語法創(chuàng)建一個流程圖，描述電商平臺的訂單履約流程，從用戶下單到收貨的完整過程，包括訂單創(chuàng)建、支付、倉庫處理、物流配送等環(huán)節(jié)。

這樣的提示詞明確了圖表類型（流程圖）、主題（訂單履約流程）和需要包含的關鍵環(huán)節(jié)，AI工具能夠據(jù)此生成相應的Mermaid代碼。

如果你對流程圖的方向有特定要求，可以在提示詞中明確指出：

請使用Mermaid語法創(chuàng)建一個從左到右（LR）的流程圖，描述庫存補貨流程，包括銷售預測、需求計劃、采購計劃、供應商確認、入庫等環(huán)節(jié)。

時序圖提示詞

對于系統(tǒng)交互設計，時序圖是非常有用的工具。你可以使用這樣的提示詞：

請使用Mermaid語法創(chuàng)建一個時序圖，描述在訂單取消場景下，OMS、WMS、支付系統(tǒng)之間的交互流程，包括取消指令的傳遞、庫存釋放、退款處理等步驟。

這個提示詞明確了圖表類型（時序圖）、場景（訂單取消）和涉及的系統(tǒng)（OMS、WMS、支付系統(tǒng)），以及需要關注的關鍵步驟。

狀態(tài)圖提示詞

對于狀態(tài)流轉(zhuǎn)設計，你可以使用這樣的提示詞：

請使用Mermaid語法創(chuàng)建一個狀態(tài)圖，描述采購訂單的生命周期，包括草稿、已提交、審核中、已審核、執(zhí)行中、部分收貨、全部收貨、已關閉等狀態(tài)，以及各狀態(tài)之間的轉(zhuǎn)換條件。

這個提示詞明確了圖表類型（狀態(tài)圖）、主題（采購訂單生命周期）和需要包含的狀態(tài)及轉(zhuǎn)換條件。

甘特圖提示詞

對于項目規(guī)劃，你可以使用這樣的提示詞：

請使用Mermaid語法創(chuàng)建一個甘特圖，描述一個為期3個月的庫存優(yōu)化項目，包括需求分析、系統(tǒng)設計、開發(fā)、測試、上線等階段，明確各階段的時間安排和依賴關系。

這個提示詞明確了圖表類型（甘特圖）、項目主題（庫存優(yōu)化）、時間跨度（3個月）和主要階段。

組合圖表提示詞

有時，我們需要使用多個圖表來描述一個復雜的系統(tǒng)或流程。這時，你可以使用組合提示詞：

請使用Mermaid語法創(chuàng)建以下圖表：
1. 一個流程圖，描述退貨處理的業(yè)務流程
2. 一個時序圖，描述退貨場景下各系統(tǒng)的交互
3. 一個狀態(tài)圖，描述退貨單的狀態(tài)流轉(zhuǎn)

這樣的提示詞能夠幫助你一次性獲取多個相關圖表，全面描述一個業(yè)務場景。

圖表優(yōu)化提示詞

當你已經(jīng)有了一個基本的圖表，但想要進一步優(yōu)化時，可以使用這樣的提示詞：

我有一個描述訂單處理流程的Mermaid流程圖，但感覺結(jié)構(gòu)不夠清晰。請幫我優(yōu)化這個圖表，使其更加簡潔明了，并添加適當?shù)淖⑨尅?br />graph TD? ?
A[接收訂單] –> B[驗證訂單]? ?
B –> C{庫存檢查}? ?
C –>|庫存充足| D[分配庫存]? ?
C –>|庫存不足| E[缺貨處理]? ?
D –> F[揀貨包裝]? ?
F –> G[發(fā)貨]? ?
G –> H[更新訂單狀態(tài)]? ?
E –> I[通知客戶]? ?
I –> J[等待庫存]? ?
J –> C

這個提示詞提供了現(xiàn)有的圖表代碼，并明確了優(yōu)化目標（結(jié)構(gòu)清晰、簡潔明了、添加注釋）。

AI與Mermaid結(jié)合的最佳實踐

在將AI與Mermaid結(jié)合使用時，我總結(jié)了一些最佳實踐的提示詞，你可以更高效地利用AI工具創(chuàng)建Mermaid圖表，提升產(chǎn)品工作效率。

• 明確圖表類型：在提示詞中明確指出你需要的圖表類型（流程圖、時序圖、狀態(tài)圖等）。
• 提供足夠的上下文：描述業(yè)務場景、涉及的系統(tǒng)或角色、關鍵步驟或狀態(tài)等信息，幫助AI理解你的需求。
• 指定圖表方向：對于流程圖，明確指出你希望的方向（TD：從上到下，LR：從左到右等）。
• 分步驟請求：對于復雜的圖表，可以先請求一個基本版本，然后逐步添加細節(jié)或優(yōu)化。
• 提供示例：如果你有特定的風格或格式要求，提供一個示例圖表可以幫助AI更好地理解你的期望。
• 迭代優(yōu)化：AI生成的圖表可能不會一次就完美，通過多輪對話進行迭代優(yōu)化是很常見的做法。

通過使用針對不同圖表類型的提示詞，結(jié)合AI工具，我們可以快速創(chuàng)建和優(yōu)化各類Mermaid圖表。明確圖表類型、提供足夠上下文、指定圖表方向、分步驟請求、提供示例和迭代優(yōu)化是結(jié)合AI與Mermaid的最佳實踐。

AI實踐與心得分享

1.Chrome插件“豆包”，劃詞生成Mermaid圖

瀏覽器安裝插件“豆包”，然后在“設置”中找到“劃詞工具欄”，選擇“添加技能”，填寫“提示詞內(nèi)容”，保存生效后，就可以劃詞生成Mermaid圖了。

對選中的文字 {selection}進行總結(jié)提煉，根據(jù)文字內(nèi)容的描述，自動生成符合Mermaid語法的圖表代碼。
技能：熟悉Mermaid的圖表類型和語法，能高效將流程轉(zhuǎn)化為代碼。 理解流程分析、架構(gòu)設計及結(jié)構(gòu)化展示等領域知識。
約束：代碼必須符合Mermaid語法規(guī)范。 流程和結(jié)構(gòu)表達需準確清晰。 流程圖可以按實際情況有二級、三級等多層級。 輸出的代碼格式應簡潔且易于理解。

2.通過Mermaidchart，導出精美png圖片

我經(jīng)常用語雀來寫作，所以在語雀文檔中會有大量的Mermaid的內(nèi)容，但是語雀目前存在一個BUG或者是不足點，就是右鍵復制生成的SVG圖片然后粘貼到其他地方之后，清晰度會壓縮很多，很影響觀感。

如果把SVG保存到本地，然后再導入到Figma或者其他SVG轉(zhuǎn)PNG的圖片中，也是可以的，但是相對來說會慢一些，而且有一些工具導出的清晰度也會有點影響。

經(jīng)過一段時間的摸索之后，我個人最喜歡的是用Mermaid官方的一個網(wǎng)站去導出png的圖片，就是這個：

https://www.mermaidchart.com/

而且它還有一個好處，就是可以在生成預覽圖之后，通過下面紅框中的小工具，去更換外觀、樣式、增加一些元素等，可以讓你的Mermaid圖和別人做出來的默認樣式明細區(qū)分開，整體體驗還是非常不錯的

3.保存一份常用的Mermaid提示詞

這個提示詞是我從別的公眾號中找到的，它適用于總結(jié)一些比較長的，但是又有一定的邏輯性的內(nèi)容，可以生成多種不一樣風格的圖片，然后讓用戶去選擇具體需要哪個。這里我將這個提示詞一并分享給大家。

Role：你是最擅長內(nèi)容和數(shù)據(jù)視覺化、信息圖展示的大師。

Task：
1.?請分析文章內(nèi)容，用Mermaid語法創(chuàng)建適當?shù)膱D表來可視化其中的關鍵信息，選擇最合適3-5種圖表類型展示? ? ? ?
1.?如果內(nèi)容包含步驟或流程，請創(chuàng)建流程圖(flowchart)? ? ? ?
2.?如果內(nèi)容描述時間線或事件序列，請創(chuàng)建時序圖(timeline)或甘特圖(gantt)? ? ? ?
3.?如果內(nèi)容展示組織結(jié)構(gòu)或?qū)哟侮P系，請創(chuàng)建組織結(jié)構(gòu)圖? ? ? ?
4.?如果內(nèi)容包含實體間的關系，請創(chuàng)建實體關系圖(ER diagram)? ? ? ?
5.?如果內(nèi)容包含類或?qū)ο箝g的關系，請創(chuàng)建類圖(class diagram)? ? ? ?
6.?如果內(nèi)容包含狀態(tài)轉(zhuǎn)換，請創(chuàng)建狀態(tài)圖(state diagram)? ? ? ?
7.?如果內(nèi)容包含順序交互，請創(chuàng)建序列圖(sequence diagram)
2.?整理網(wǎng)站核心內(nèi)容和觀點，生成文本格式的思維導圖。放在?“`代碼塊中。

Notice：
1.?請確保圖表:? ? ? ?
–?圖表要顯示在移動版，所以寬度有限，如橫向生成太寬，改成縱向圖表，如flowchart TD/TB。? ? ? ?
–?清晰展示文章中的主要概念和關系? ? ? ?
–?通過顏色和多種樣式增強可讀性，不要超過4種顏色，但也別太單調(diào)。? ? ? ?
–?包含簡潔的標簽和描述? ? ? ?
–?遵循Mermaid語法規(guī)范? ? ? ?
–?根據(jù)文本中的數(shù)據(jù)或關鍵點，用文本符號繪制合適的Mermaid圖表。? ?
–?如果繪制不出Mermaid圖，用文本圖代替，不能留空。
2.?直接輸出內(nèi)容，不解讀圖表選擇邏輯，也不需要任何引導語，比如“好的，我來…”
3.?生成的圖表，用戶看完有恍然大悟感覺，甚至認知升級，影響他的思想和行動。
4.?你每次都會CoT思考，梳理清楚內(nèi)容/結(jié)構(gòu)后，才開始繪圖。

Format：
### 一、<Title 1>
<圖表1>
### 二、<Title 2>
<圖表2>
### 三、<Title 3>
<圖表3>
…
待處理文章內(nèi)容:
{{ content }}?

總結(jié)

作為供應鏈產(chǎn)品經(jīng)理，我們經(jīng)常需要處理復雜的業(yè)務流程和系統(tǒng)交互，清晰有效的溝通是我們工作的核心。AI+Mermaid的組合為我們提供了一個強大的工具，幫助我們更高效地梳理業(yè)務流程、設計系統(tǒng)交互、規(guī)劃項目進度，并與各方進行有效溝通。

特別是在當前AI技術快速發(fā)展的背景下，掌握如何利用AI工具提升工作效率已經(jīng)成為產(chǎn)品經(jīng)理的必備技能。通過本文介紹的方法和技巧，你可以將AI與Mermaid結(jié)合，在日常工作中創(chuàng)造更大價值。

如果你有任何問題、建議或者使用心得，歡迎在評論區(qū)分享，我們一起探討和進步。如果你覺得這篇文章有幫助，也請關注我的公眾號”PM維他命”，獲取更多產(chǎn)品和供應鏈領域的實用內(nèi)容。

最后，技術和工具只是手段，真正的價值在于我們?nèi)绾卫盟鼈兘鉀Q實際問題、創(chuàng)造業(yè)務價值。希望你能將這些工具融入到自己的工作中，不斷探索和創(chuàng)新，成為更優(yōu)秀的產(chǎn)品經(jīng)理！