TIL: 用 Mermaid 畫 UML 時序圖

2026-05-19·3 min read·updated 2026-05-19·mermaidUMLdiagramOOAD

Mermaid 直接在 Markdown 裡畫 UML 時序圖，支援 loop、alt/else、opt 等常用區塊，不需要安裝任何工具。

最近上課在教 UML 圖，現在上到 sequence diagram。

Sequence diagram（時序圖）是用來描述物件之間按時間順序的互動。橫軸是參與者，縱軸是時間，訊息由上往下代表先後順序。是 UML 中常來表示系統行為流程的圖。

寫作業時發現 Mermaid 畫時序圖很方便，想記一下幾個常用語法。

基本結構

mermaid

sequenceDiagram    autonumber    participant A as :ActorA    participant B as :ActorB    A->>B: message()    B-->>A: response

autonumber — 自動幫每個訊息加編號
participant X as :Label — 宣告角色，名稱前加 : 是 UML 物件慣例
->> — 實線箭頭（呼叫）；-->> — 虛線箭頭（回傳）
activate / deactivate — 顯示物件的生命週期

常用區塊

區塊	用途
`loop ... end`	重複執行（foreach、while）
`alt ... else ... end`	條件分支（if/else）
`opt ... end`	可選流程（只有滿足條件才執行）

範例：線上訂餐結帳流程

下面模擬一個外送平台的結帳流程：逐一確認品項庫存、處理付款、成功後發送確認通知。

mermaid

sequenceDiagram    autonumber    participant U as :User    participant OS as :OrderService    participant R as :Restaurant    participant P as :PaymentGateway    activate OS    loop foreach item in order        OS->>R: checkAvailability(item)        activate R        R-->>OS: available        deactivate R        alt available == true            OS->>R: addToQueue(item)            activate R            R-->>OS:             deactivate R        else            OS->>U: notifyUnavailable(item)            activate U            U-->>OS:             deactivate U        end    end    OS->>P: processPayment(total)    activate P    P-->>OS: result    deactivate P    opt result == success        OS->>U: sendOrderConfirmation()        activate U        U-->>OS:         deactivate U    end    deactivate OS