使用者旅程圖描述使用者在您的應用程式中達成特定目標所經歷的步驟。與以系統為導向的流程圖或序列圖不同，使用者旅程專注於人類行為、工作流程階段以及隨時間追蹤使用者滿意度。
基本語法結構
每個使用者旅程都以旅程宣告開始，接著是標題和依序排列的區段，用以分解使用者經驗。
Mermaid
Edit Mermaid in VPasCode
旅程
title 範例使用者旅程
section 階段名稱
工作名稱：分數：參與者1，參與者2
語法參考
下表分解了在 Mermaid.js 中建立使用者旅程地圖所使用的主要元素。
| 元件 | 描述 | 語法範例 |
|---|---|---|
| 宣告 | 初始化使用者旅程圖形渲染器。 | 旅程 |
| 標題 | 定義地圖頂端的主要標題或使用者目標。 | title 登入工作流程 |
| 區段 | 代表使用者旅程中的高階階段或階段。 | section 探索階段 |
| 工作 | 使用者在區段內執行的特定動作。 | 瀏覽文件 |
| 滿意度分數 | 1 到 5 之間的整數，用以對應使用者的喜悅或困擾程度。 | : 4 : (4分之5) |
| 角色 | 以逗號分隔的角色清單，這些角色參與完成該任務。 | 使用者、系統 |
現實世界藍圖：電子商務結帳體驗
此藍圖展示了完整的使用者旅程，追蹤客戶線上購買商品的體驗，記錄情感上的痛點（低分）與愉悅時刻（高分）。
Mermaid
Edit Mermaid in VPasCode
旅程
標題 在線購買旅程
節 Product Discovery
搜尋商品：4：使用者
比較價格：3：使用者
查看商品圖片：5：使用者
節 結帳漏斗
將商品加入購物車：4：使用者
建立帳戶：2：使用者、系統
輸入運送資訊：3：使用者
處理信用卡：1：使用者、付款網關
節 購買後
接收電子郵件確認：5：系統
追蹤包裹配送：4：使用者、物流
語法提示：滿意度分數會由渲染器自動以顏色標示。1分或2分代表運作摩擦（紅色/橙色），3分為中性（黃色），4分或5分則代表順暢且成功的互動（綠色）。
進階概念：多角色旅程
在複雜的工作流程中，任務很少由單一個人完成。Mermaid 允許您透過以逗號分隔名字的方式，將多個角色分配給單一任務。這有助於顯示客戶互動需要後端支援或系統自動化的情況。
Mermaid
Edit Mermaid in VPasCode
旅程
標題 多角色支援範例
節 客戶支援案例
提交問題單：3：客戶
將問題單指派給客服人員：4：系統、支援管理員
調查技術錯誤：2：開發人員、品質測試人員
解決問題並通知：5：支援管理員
常見語法陷阱
撰寫使用者旅程地圖時，微小的格式錯誤可能導致渲染引擎出現錯誤。請記住以下三個格式規則，以確保您的圖表能正確建立：
- 雙冒號規則：每一行任務必須嚴格遵循以下結構：
任務描述：分數：角色遺漏在角色清單前的第二個冒號，是導致旅程圖無法載入的最常見原因。 - 分數範圍限制：滿意度分數必須是介於1到5之間的整數。傳入0分或大於5的數字將導致佈局參數失效。
- 縮排：雖然 Mermaid 對空格較為彈性，但將您的任務保持在各自節點下的縮排格式，能讓原始文字檔更易於閱讀與維護，尤其在產品功能擴展時尤為重要。