Mermaid.js Wardley 地圖語法與策略指南

Wardley 地圖是一種強大的框架,用於商業策略,以視覺化價值鏈並繪製組件的演變。自 Mermaid v11.14.0+ 起作為原生功能推出,wardley-beta引擎允許策略團隊、架構師和產品經理使用純文字繪製市場環境。透過在二維座標空間中定位技術組件,團隊可以視覺化分析價值鏈依賴關係,發現市場慣性,並做出結構化的自建與外購決策。

理解座標格線系統

與標準的自由形式流程圖不同,Wardley 地圖中的每個組件都根據兩個小數座標,繪製在一個嚴格的二維空間中,座標範圍從0.01.0:

  • 可見度(Y軸/第一座標):衡量組件對終端使用者的可見度或價值。數值為1.0代表直接面向使用者的觸點(最高可見度),而0.0則代表隱藏的基礎設施。
  • 演進(X軸/第二座標):衡量市場資產的成熟度。它從左到右跨越四個不同的演進階段:創生 (0.0), 客製化建造 (0.25), 產品/租用(0.5),以及商品/公用服務(0.75 至 1.0)。

基本語法結構

每個圖表都以wardley-beta宣告標頭開始。接著,您可使用錨點關鍵字,使用「」標記運營基礎設施模塊組件關鍵字,並使用方向箭頭繪製它們之間的關係。

wardley-beta
title 簡單策略地圖
anchor 客戶 [0.9, 0.5]
component 網站 [0.7, 0.4]
客戶 -> 網站

 

語法參考

下表分解了在 Mermaid 核心解釋器內構建沃德利地圖所需的主語義構建模塊和參數。

語法組件 類型要求 描述與使用規則
宣告 關鍵字識別符 初始化戰略網格地圖畫布。必須使用精確的wardley-beta區塊字串。
標題 純文字/引號字串 可選的標題,會以居中方式印在圖表網格工作區的最頂端。
大小範圍 方括號內的像素 可選的自訂參數,用於覆蓋預設的畫布寬度和高度佈局網格:size [1200, 700].
錨點節點 關鍵字 + 標籤 在您的價值鏈矩陣頂端建立核心使用者或買方。需要坐標範圍:anchor 買方 [Y, X].
組件節點 關鍵字 + 標籤 宣告一個獨立的技術功能或資產區塊。需要精確的位置範圍:組件核心 API [Y, X].
連結路徑 連接運算子 透過以下語法規則,繪製直接且結構化的依賴關係,向下或水平穿越節點:-> 語法規則。

戰略行動標記(自建、購買、委外、市場)

為了明確記錄戰略執行計畫,Mermaid.js 允許將行動包裝器附加至單獨的組件上。這些行動會在座標節點上放置不同的形狀,以立即傳達架構選擇:

行動修飾符 渲染形狀圖示 戰略意圖映射
(自建) 三角形標記 組件具有獨特性、高風險,或內部自建以取得競爭差異。
(購買) 菱形標記 組件來自第三方產品供應商的採購或授權。
(委外) 方形標記 組件管理完全委託給外部供應商群組。
(市場) 圓形標記 組件是一種廣泛可用的工具或公共商品。

語法實作範例:

wardley-beta
component 自訂 UI [0.80, 0.30] (build)
component 支付處理器 [0.45, 0.65] (buy)


現實世界藍圖:手工咖啡店價值鏈

此全面藍圖追蹤不斷擴張的門市商業模式。它概述了完整的地圖架構——設定更大的自訂尺寸範圍、建立商業樞紐、設置專門的建構/購買標記,並在各軸階段之間繪製依賴連結。

wardley-beta
title "咖啡店商業策略地圖"
size [1100, 650]

%% 核心商業樞紐
anchor 特許經營權擁有者 [0.95, 0.55]
anchor 終端客戶 [0.90, 0.65]

%% 操作元件層級
component 特色咖啡 [0.75, 0.45] (build)
component 收銀終端機 [0.60, 0.60] (buy)
component 自動熱水系統 [0.45, 0.75] (market)
component 電力網電力 [0.15, 0.90] (outsource)

%% 依賴鏈接路徑
終端客戶 -> 特色咖啡
特許經營權擁有者 -> 收銀終端機
特色咖啡 -> 自動熱水系統
收銀終端機 -> 電力網電力
自動熱水系統 -> 電力網電力


語法提示: 聲明座標陣列時,請記住垂直的 Y 軸值(可見性)在前,水平的 X 軸值(演進)在後[可見性, 演進]。顛倒這兩個位置是導致元件在地圖畫布底部邊緣錯誤分組的最常見原因。


常見語法陷阱與系統限制

在編譯價值鏈空間時,請記住這三個佈局邊界,以確保您的文字能乾淨地呈現:

  • 嚴格的座標範圍: 座標必須精確位於小數括號之間的 0.01.0。使用絕對整數像素(例如 [400, 200])而非節點參數中的佈局比例,將觸發系統執行錯誤。
  • 連結宣告順序: 為確保佈局清晰呈現,請確保您所有的 anchorcomponent 標籤都已在撰寫任何節點關係線(A -> B)。連結到未宣告的標籤可能會導致地圖軸定位失效。
  • 標籤空間封閉: 如果組件名稱包含空格、符號或逗號,請確保其書寫正確。在連接路徑中重複使用不匹配的字串名稱,將在網格畫布上創建一個全新的、未定位的節點。
返回頂端