Mermaid 流程圖是節點和連線的文字模型。第一行決定圖表類型和方向。flowchart TD 表示由上往下；flowchart LR 表示由左往右。方向應該根據敘事方式選擇，而不是根據螢幕寬度隨意決定。
把節點身分和顯示文字分開
用簡短、穩定的 ID，把人能讀懂的文字放在方括號裡：
flowchart LR
request[收到請求] --> validate{輸入有效嗎?}
validate -->|是| process[處理訂單]
validate -->|否| reject[返回驗證錯誤]validate 是邊連接使用的 ID；輸入有效嗎? 是顯示標籤。標籤之後可以改，而不會把所有連線一起重寫。穩定的 ID 也更方便後續樣式調整和 diff 審閱。
為分支加上標籤
如果一個菱形節點沒有分支標籤，讀者就要自己猜哪條線是 yes，哪條線是 no。使用 -->|標籤| 為外向邊加上簡短標籤，並保持整張圖裡的術語一致。不要在同一張圖裡混用 true/false、yes/no 和 success/failure。
使用子圖表示邊界
子圖可以用來表示責任邊界或執行階段邊界：
flowchart LR
subgraph Browser
edit[編輯原始碼] --> render[渲染圖表]
end
subgraph LocalStorage
draft[(草稿)]
end
edit --> draft不要把每兩個節點都包成一個子圖。只有當邊界能傳達責任、信任、部署或生命週期時，它才有價值。
避免常見解析陷阱
Mermaid 的語法會演進，但有幾類錯誤很容易定位。先從最小圖開始，再一次加一條語句。遇到包含標點的標籤時，必要時給標籤加上引號。流程圖裡小寫的 end 具有特殊含義，因此要麼首字母大寫，要麼換個節點文字。另外要注意某些邊的特殊尾部字元，因為 o 和 x 在某些位置會被當作特殊邊形。
為變化而設計
圖太大往往在「變得難維護」之前就已經難以閱讀。最好把系統總覽和細節流程拆開，盡量減少交叉線，並保持抽象層級一致。一個叫「系統」的節點和一堆具體函式節點放在一起，通常表示模型混用了不同層級。
可以在 本地 Mermaid 編輯器 中測試並匯出原始碼。編輯器使用的是站點內建的 Mermaid 版本，所以只要能渲染，就表示在這個執行環境裡確實可用。