什麼是流程圖？
一個流程圖是一種基礎性的行為地圖，用以視覺化逐步的操作工作流程、演算法程序或順序性的商業邏輯。透過將系統動作以不同的幾何形狀表示，並以方向性箭頭繪製控制流程，流程圖讓軟體工程師與系統架構師能輕鬆追蹤條件執行路徑、辨識單點故障區塊，並在撰寫實際後端程式碼之前分析系統邏輯迴圈。
使用Mermaid.js您不必花費數小時拖曳方框、微調格線或重新計算內邊距變數。佈局引擎會根據您的原始宣告式腳本動態計算節點座標，讓您專注於系統背後的邏輯。
核心語法指南：元素與結構
要在 Mermaid 中設計出優雅且極易掃描的流程圖，您必須掌握畫布方向指示、幾何節點封裝、連結布線變數與結構性子圖。
1. 設定畫布方向
您的流程圖方向直接由第一行應用於graph或flowchart包裝器決定。您可以使用四個主要方向鍵來控制佈局的視覺縮放方向：
flowchart TD（自上而下／垂直方向）flowchart BU（自下而上方向）flowchart LR（自左而右／水平方向）flowchart RL（自右而左方向）
2. 自訂節點幾何形狀（形狀）
預設情況下，純 ID 聲明會顯示為鋒利的矩形方框。為了讓您的圖表更容易掃描，請使用 Mermaid 的專用封裝括號，為不同工作流程步驟注入即時的視覺語境。每個定義區塊都必須以方向性佈局標記開頭，才能正確解析：
- 圓角：
id(文字)—— 表示一般流程步驟。 - 體育場／膠囊形狀：
id([文字])— 標準標記，用於起始和停止邊界里程碑。 - 子程序/預定義流程：
id[[文字]]— 代表封裝的系統例行程序或外部類別腳本。 - 圓柱體/資料庫：
id[(文字)]— 代表資料庫持久化、快取或資料倉儲。 - 菱形/決策鑽石：
id{文字}— 代表條件切換、if/else 分支或評估點。 - 平行四邊形：
id[/文字/]或id[文字]— 呈現傾斜邊界，以代表明確的資料輸入/輸出 (I/O)。
流程圖 TD
start_node([開始執行])
query_db[(PostgreSQL 實例)]
validate_check{是否已授權？}
3. 連結布線規則與內嵌標籤
您可以調整連接線以代表不同的結構關係和通訊風格。為保持圖表整潔，可直接將描述性標籤注入到連結路徑上：
流程圖 TD
%% 標準連接箭頭並附文字標籤
A --> |"JSON 負載"| B
%% 點狀/非同步線並附文字標籤
B -.-> |"非同步事件"| C
%% 粗體線並附文字標籤
C ==> |"關鍵寫入"| D
4. 透過子圖實現模組化隔離
為建立清晰的網路邊界、整合微服務或隔離團隊責任，請將您的元件群組在結構性子圖包裝器中。您可透過給予內部 ID、可選的顯示標題，並以結束 標籤：
流程圖 TD
子圖 auth_sub["安全邊界"]
gateway[API 網關] --> auth_worker(令牌驗證器)
結束
清晰流程圖的最佳實務
- 水平分離佈局： 對於長且多步驟的工程管道，選擇
流程圖 LR方向。與長條垂直佈局相比，這種方式在標準的寬螢幕橫向螢幕上可擴展性更佳。 - 隔離複雜迴圈： 如果工作流程包含大量重複的迴圈，請明確標示反向連接器（例如，
retry --> |"嘗試重置"| start）以避免讀者將迴圈誤認為是標準的前向路徑。 - 避免混合圖形類型： 堅持使用現代的
流程圖關鍵字，而非舊式的圖標誌來渲染複雜地圖。流程圖引擎使用更新的佈局演算法，支援進階的箭頭組合與更清晰的路徑路由。
現實世界中的 Mermaid.js 流程圖範例
範例 1：微服務事件驅動的資料接收網狀結構（左至右架構）
此功能藍圖模擬了一個網頁遙測資料接收服務。它展示了如何在清晰的水平畫布上結合資料輸入、判斷菱形與雲端資料庫形狀。
流程圖 LR
%% 使用明確的幾何形狀定義元素節點
init([Webhook 觸發]) --> input_io[/捕獲 HTTP 請求/]
input_io --> auth_check{驗證令牌}
auth_check --> |"無效令牌"| err_stop([回傳 401 無權限])
auth_check --> |"有效 JWT"| write_queue[[發布至 Kafka 佇列]]
write_queue --> worker_proc(消費者守護程序)
worker_proc --> db_store[(TimescaleDB 集群)]
db_store --> term([終止流程])
%% 快速自訂樣式覆蓋
style auth_check fill:#fff3cd,stroke:#ffc107,stroke-width:2px
style err_stop fill:#f8d7da,stroke:#dc3545,stroke-width:1px
語法分解： 此圖表從左到右流暢地展開。驗證步驟使用黃色的決策菱形形狀（auth_check{驗證令牌}），將執行路徑清晰地分成兩個不同的結果。由於其自訂的資料庫圓柱形（[(TimescaleDB 集群)]）和平行四邊形輸入，資料儲存區立即可辨識。
範例 2：企業多層級使用者註冊引擎（垂直且包含嵌套子圖）
此先進企業藍圖規劃出應用程式註冊流程。它將步驟垂直排列於三個獨立的結構子圖中，以代表不同的架構層級。
flowchart TD
subgraph Client_Tier["表示層 UI 層"]
app[行動應用程式 UI]
web[網頁 SPA 前端]
end
subgraph Service_Tier["核心閘道器路由器"]
proxy[[Nginx 入口反向代理]]
auth_svc(驗證服務工作程式)
end
subgraph Persistence_Tier["受保護的資料中心"]
main_db[(使用者帳戶主資料庫)]
cache_node[(Redis 會話快取)]
end
%% 定義跨子系統層的通訊管道
app -- "HTTPS 請求" --> proxy
web -- "HTTPS 請求" --> proxy
proxy --> |"路由 /v1/auth"| auth_svc
auth_svc --> |"驗證會話"| cache_node
auth_svc --> |"提交帳戶"| main_db
語法分解： 從上到下的方向指示符（flowchart TD）迫使佈局引擎將元件整齊地從上到下堆疊。邊界區塊將相關元件分組為不同的層級（客戶端、服務與持久化），使整體架構呈現直覺且高度結構化的感覺。