Mermaid.js 看板語法與工作流程指南

看板是一種視覺化的工作流程管理工具，用於追蹤不同處理階段（例如待辦事項、進行中和已完成）的任務或工作項目。Mermaid.js 將此功能作為原生特性引入，這種基於文字的方法讓開發團隊和專案經理能夠在文件中快速建立互動式任務儀表板，無需管理手動追蹤應用程式或第三方圖像元素。

基本語法結構

每個看板都以 kanban 聲明標頭開始。欄位使用 section 關鍵字定義，並透過縮排間距區塊，依序列出每個欄位下方的單一任務卡片。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
kanban
title "範例專案 Sprint"
section 待辦事項
  設計資料庫結構
  撰寫 API 路由
section 進行中
  實作驗證中間件
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法參考

下表分解了在 Mermaid.js 中建立看板地圖所使用的基礎資料元件與參數。

語法元件 類型需求 描述與使用規則
宣告 關鍵字識別符 初始化敏捷工作流程區塊映射參數。必須使用精確的 kanban 區塊。
標題 引號字串 可選的全域工作區標題，位於看板畫布頂部正中位置。
區段欄位 關鍵字 + 名稱 定義一個獨立的工作流程階段欄位。使用 section 關鍵字，後接欄位的標籤。
標準任務卡 縮排字串 以純文字描述代表單張卡片。必須直接在活躍區段下方以縮排或按 Tab 鍵的方式排列。
任務 ID 卡 方括號識別符 使用明確的唯一 ID 標籤與顯示標籤並列的進階任務卡追蹤格式：id[卡片文字].
元資料區塊 JSON 設定地圖 使用以下語法規則附加的可選屬性區塊：@{...}語法規則，用於指定如票券優先順序或負責人等屬性。

進階任務屬性與元資料

針對詳細的工程迭代或錯誤追蹤工作流程，您可以直接將元資料屬性指派至卡片上。透過將唯一的節點 ID（例如task1[...]）與後續的 JSON 設定宣告區塊（@{}），您便能在卡片元素的正面直接印出結構化變數，例如任務指派對象、優先順序與內部追蹤票券。

支援的任務變數

屬性金鑰 值格式 視覺結果
指派 引號包覆的字串名稱 直接在卡片詳細資料矩陣內呈現指派的擁有者或開發者標籤。
優先順序 引號包覆的等級字串 顯示任務嚴重程度基準（例如'高', '中等', '低').
票 整數或字母代碼 追蹤連結的開發任務編號或系統專案代碼。

現實世界藍圖：敏捷開發發行 Sprint

此全面的藍圖追蹤基礎設施部署發行。它規劃出三個不同的欄位（待處理、進行中、準備部署），並利用先進的任務 ID 搭配結構化元數據參數，跨功能分配特定開發人員和票證代碼。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
kanban
title "Q3 核心功能發行看板"
section 待處理
  task101[建立 API 端點文件]@{ assigned: 'Sarah K', priority: '中等' }
  task102[設計登陸頁面線框圖]
section 進行中
  task201[優化資料庫查詢同步]@{ assigned: 'Alex M', priority: '高', ticket: 4012 }
  task202[設定 Lightbox UI 元件]@{ assigned: 'Sarah K', priority: '低' }
section 準備部署
  task301[實作多重因素使用者驗證]@{ assigned: '開發團隊', ticket: 3985 }
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法提示：雖然簡單的任務可以以未加引號的純文字行輸入，但攜帶元參數的複雜指派 *必須* 使用唯一的 ID 映射字串前綴（例如id1[...]@{...}）。在看板的不同部分重複使用完全相同的任務 ID 將覆蓋屬性或導致佈局錯誤。

常見語法陷阱與系統限制

在設計高度密集、多階段的佈局系統時，請記住這些結構性故障排除參數：

  • 欄位在卡片之前的規則：所有任務卡片必須位於活躍欄位區塊之下。在主標題後立即輸入任務字串行，而未先宣告欄位標題，將會中止編譯。kanban標題，而未先宣告一個section欄位標題，將會中止編譯。
  • 空白與縮排：追蹤佈局引擎根據行縮排標籤來分組卡片。請確保所有任務卡片行在活躍的section標籤之下均勻縮排，以防止對齊中斷。
  • 元數據分隔符格式： 當在一個內部建立自訂屬性時@{ } 欄位中，鍵和值必須對應到有效的系統參數。使用逗號分隔多個屬性，並在字串指派時使用乾淨的封閉引號。
  • 卡片密度管理： 雖然看板元件完全支援響應式設計，但若單一看板中超過5個欄位，或加入數十列密集的元數據行，可能會降低行動裝置的可掃描性。請有意識地平衡佈局間距規則。
返回頂端