什麼是時序圖？
時序圖是 UML 互動圖，顯示物件或系統如何隨時間相互通訊。它們按時間順序顯示不同參與者之間的訊息交換，使其在記錄 API 流程、系統互動和多步驟流程方面非常有價值。每個參與者由一條垂直生命線表示，水平箭頭顯示訊息交換。
編輯與預覽
使用 Mermaid 語法創建 時序圖，即時查看效果。
Example
Sequence diagram example
A Mermaid sequence diagram for documenting browser, editor, and renderer interactions.
Mermaid code
sequenceDiagram
participant User
participant WebApp as Mermaid Editor
participant Renderer
User->>WebApp: Paste diagram code
WebApp->>Renderer: Render Mermaid syntax
Renderer-->>WebApp: SVG preview
WebApp-->>User: Download PNG常見使用場景
API 文件編寫
記錄 API 端點及其互動流程。視覺化請求-回應週期、認證流程、錯誤處理以及客戶端和伺服器之間的資料交換。
微服務架構
映射微服務、訊息佇列和資料庫之間的通訊模式。對於理解分散式系統行為和除錯整合問題至關重要。
認證與授權
建模多步驟認證過程，如 OAuth、SAML 或 JWT 令牌流程。顯示重新導向、令牌交換和驗證步驟的順序。
系統整合
視覺化不同系統在複雜整合場景中的互動方式。記錄 Webhook 回呼、事件驅動架構和第三方服務整合。
核心功能
參與者管理
定義多個參與者、系統或服務，使用別名和啟動框顯示元件何時處於活動處理狀態。
訊息類型
支援同步呼叫、非同步訊息、回傳值和自呼叫，使用不同的箭頭樣式以提高清晰度。
控制結構
使用直觀的語法對循環、條件分支（alt/else）、可選區塊和並行處理進行建模。
註釋與說明
在序列中的任何點新增解釋性註釋，以提供上下文、闡明業務邏輯或記錄邊緣情況。
最佳實踐
專注於單一場景
每個時序圖應代表一個使用案例或互動流程。為不同的場景創建單獨的圖表，而不是將所有內容組合在一起。
使用有意義的名稱
為參與者提供清晰、描述性的名稱。使用實際的服務名稱或角色標題，而不是「系統 A」或「元件 1」等通用標籤。
顯示錯誤路徑
不要只記錄正常路徑。包括錯誤條件、逾時和例外處理的替代流程。
保持時間從上到下
遵循時間從上到下流動的約定。較早的互動應出現在圖表中比較晚的互動更高的位置。
探索其他圖表類型
流程圖
使用節點和方向箭頭視覺化流程、工作流程和演算法。非常適合商業流程和決策樹。
類別圖
以類別、屬性和關係建模物件導向系統。軟體架構規劃不可或缺的工具。
狀態圖
呈現系統或應用程式中的狀態轉換。非常適合建模生命週期狀態和工作流程。
甘特圖
規劃和追蹤專案時程及任務依賴關係。非常適合專案管理和排程。
ER 圖
設計包含實體和關係的資料庫架構。適用於資料庫建模和文件。
使用者旅程
繪製使用者在各接觸點的體驗和互動。非常適合 UX 設計和顧客旅程分析。
Git 圖
視覺化 Git 分支策略和提交歷史。有助於說明版本控制工作流程。
心智圖
組織創意、腦力激盪和建立層次化視覺結構。適合規劃和知識管理。
圓餅圖
以圓形圖表展示資料比例分布。適合顯示百分比和市場份額分析。
時間線
沿時間軸視覺化事件和里程碑。適合專案歷史和路線圖展示。
看板
將任務按工作流階段組織到欄中。適合敏捷專案管理和任務追蹤。
四象限圖
在雙軸網格上繪製項目進行比較和優先順序排定。適合功能優先順序和策略分析。
桑基圖
用比例箭頭視覺化節點間的流量。適合能源流、預算分配和轉化漏斗。
XY 圖表
建立帶有可自訂座標軸的長條圖和折線圖。適合資料視覺化和趨勢分析。
區塊圖
用行列排列的區塊建構結構化佈局。適合系統架構和元件概覽。
架構圖
使用服務圖示和連線設計雲端和系統架構。適合基礎設施文件。
封包圖
視覺化網路協定封包結構和位元級欄位佈局。適合網路協定文件。