(UML)循序圖 Sequence Diagram – 製作說明圖解

前言

技術文件中見到循序圖(時序圖)與流程圖，流程圖大家都看過，Google 一查也都一堆資料，所以這邊來講解一下另一個常用的時序圖 – Squence Diagram。

Squence Diagram 是什麼?

循序圖 英文 Squence Diagram ( 簡寫 SD )，又稱「時序圖」，是 Unifed Modeling Language (UML) 的一種。

如果要簡單白話的說明，就是透過時間線、物件、動作順序來繪製，這樣能很直觀的看出當下執行的步驟，有關 Squence Diagram 的原文介紹，這邊也彙整兩幾個如果有興趣想看原文介紹，可以點下面的連結去觀看 :

• Sequence diagrams – IBM
• 時序圖 (Sequence diagram)

至於 UML，它的中文翻譯為「統一塑模語言」，如果想了解 UML 是什麼，可以點此看 維基百科的介紹。

Squence Diagram 常用在哪?

Squence Diagram 常用於程式功能製作前的規劃階段，可用來釐清

• 操作流程
• 程式邏輯間的順序
• 各類情境中的資料流順序
• 個物件間在當下時間的關係

規劃時，先釐清上述4點，能讓邏輯更加清晰，發現規劃中的邏輯誤區，有點像是製作前的沙盤推演。

對於開發而言，因事前為推演過，所以製作上，能有效降續開發中的邏輯衝突，限縮操作上產生非預期狀況。

對於後續要接手的人來說，只要看了 Squence Diagram 圖，都可以明白大致的操作與程式走麼跑，也可避免腦捕的情況發生。

這也就是為什麼在許多技術串接文件、交接文件以及規格書中，你都可以看到 Squence Diagram 的身影。

要如何製作 Squence Diagram ?

這邊我們以一個範例來做解說，假設我們有一個頁面，用戶要透過該頁面輸入Email，完成訂閱，那循序圖大概會長得像下圖：

以上圖為例，製作 Squence Diagram 我們可以拆成 4 個步驟：

整個完成後的圖(下圖)，可以很明顯一眼看出，在每一個操作中，分別去執行了哪些步驟、在哪執行，同樣的，流程上有那些缺失，也可以在製作中多加思考與釐清。

結論

Squence Diagram (SD) 循序圖的製作，這邊以白話的方式講解，希望有助於新手初步上手。

如果你希望看比較完整的解說，同樣可以點下方的連結進行查看：

• Sequence diagrams – IBM
• 時序圖 (Sequence diagram)