紀錄工作經驗、相關知識,解決技術相關問題。

網站相關

循序圖 Sequence Diagrams (SD 時序圖) – 新手製作說明與圖解(UML)

Squence Diagram

Squence Diagram

前言

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

Squence Diagram 是什麼?

Squence Diagram ( 簡寫 SD )中文翻譯為「時序圖」或「」,是 Unifed Modeling Language (UML) 的一種。

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

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

Squence Diagram 常用在哪?

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

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

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

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

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

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

要如何製作 Squence Diagram ?

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

Squence Diagram (循序圖)

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

Squence Diagram 製作步驟

  1. 列出所需物件

    Squence Diagram 循序圖,最上面的代表物件Squence Diagram (循序圖) 範例 - 物件

  2. 劃出時間線

    Squence Diagram 循序圖,直條的虛線代表時間Squence Diagram (循序圖) 範例 - 時間軸

  3. 針對執行中的程式做標示

    Squence Diagram 循序圖,在執行階段的,會在時間軸上拉一條框,來代表目前操作中或執行中。 Squence Diagram (循序圖) 範例-執行中

  4. 加上步驟與說明

    依據操作流程順序,個別標示,並且註明Squence Diagram (循序圖) 範例 - 步驟與狀態說明

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

Squence Diagram (循序圖) 範例
Squence Diagram (循序圖) 範例

結論

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

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

發表迴響