[導讀]軟件設(shè)計時序圖制作工具在軟件設(shè)計過程中，經(jīng)常會使用到時序圖來表達模塊之間的交互、信息傳遞的動態(tài)行為或者其他軟件邏輯。時序圖可以清晰地表達軟件層面的設(shè)計，甚至毫不夸張說是“一圖頂千言”。那么，拋出個直截了當?shù)膯栴}：畫時序圖的工具有哪些？哪個最好用？以下以EA（EnterpriseA...
軟件設(shè)計時序圖制作工具
在軟件設(shè)計過程中，經(jīng)常會使用到時序圖來表達模塊之間的交互、信息傳遞的動態(tài)行為或者其他軟件邏輯。時序圖可以清晰地表達軟件層面的設(shè)計，甚至毫不夸張說是“一圖頂千言”。那么，拋出個直截了當?shù)膯栴}：畫時序圖的工具有哪些？哪個最好用？以下以EA（Enterprise Architect）、DrawIO、PlantUML和Markdown里的mermaid來對比講解。首先看看他們的效果對比：1. 效果對比
以下是EA（Enterprise Architect）、DrawIO、PlantUML和Markdown里的mermaid的時序圖最終效果對比。這幾個圖都是表示創(chuàng)建一個賬戶（Create Account）的實例。This Sequence Diagram shows the Objects involved in the creation of a new account. The Account Object is displayed lower down in the diagram because it doesn’t exist at the beginning of the sequence but is created as a result of the message.從上面的各個工具做出的圖看，前面三個差別不大該有的圖示效果都有，最后一個mermaid就沒那么豐富了，只能做個簡單的圖示表達。然而，這樣也不能說明哪個是最好的，只能從中找出一個最適合你的。為了更好說明各自的優(yōu)缺點，先看看時序圖里面有什么。
2. 時序圖的組成
首先，想想你理解中的時序圖是什么？里面有什么元素？畫兩根豎線，然后通過幾個箭頭表示消息傳遞，僅此而已？這個是時序圖么？是，可以認為時序圖，但不是那么標準。那么，什么是標準？或者說有沒有一個約定成俗的東西？時序圖不僅僅是給自己看的，也是向其他團隊成員傳遞或表達信息的媒介，應(yīng)該與別人有共同約定的符號或元素。就像南方人跟北方人講話，通用的普通話就很好，如果你講的普通話夾雜很多粵語甚至潮汕話，你讓東北人怎么聽得懂。時序圖是可以基于UML的，UML是統(tǒng)一建模語言，里面很多元素是我們共同認為它表達某一種特別含義。以下基于UML概念，講講時序圖里面主要一些元素。
Lifeline
這個是時序圖的最基本的東西Lifeline是交互中的單個參與者（即生命線不能具有多重性）。Lifeline代表一個獨特的可連接元素。OMG UML 規(guī)范（UML Superstructure Specification, v2.1.1, p.489）指出：
Lifeline代表交互中的單個參與者。雖然零件和結(jié)構(gòu)特征的多重性可能大于 1，但Lifeline僅代表一個交互實體。這個很好理解，簡單粗暴地說，就是一根豎下來的東西，代表一個獨立的交互實體。上圖是EA常用的Lifeline圖示，當然也有通過其他圖標組合的Lifeline，例如這個DrawIO上也能找到很多各種Lifeline對于PlantUML，可以通過腳本指定，同樣有很多種
| 下圖示例 | Lifeline類型 |
|---|---|
| Foo1 | actor |
| Foo2 | boundary |
| Foo3 | control |
| Foo4 | entity |
| Foo5 | database |
| Foo6 | collections |
Control/Boundary/Entity
Control 是一個原型對象，它為控制實體或管理器建模。控件組織和安排其他活動和元素，通常在分析（包括穩(wěn)健性）、序列和通信圖中。
Boundary是一種原型對象，它對某些系統(tǒng)Boundary進行建模，通常是用戶界面屏幕。您還可以將Boundary創(chuàng)建為構(gòu)造型類。在分析中使用Boundary元素來捕獲用戶交互、屏幕流和元素交互（或“協(xié)作”）。
在概念階段使用Boundary來捕獲用戶在屏幕級別（或某些其他Boundary界面類型）與系統(tǒng)交互。它通常用于序列和穩(wěn)健性（分析）圖中。
Entity是一種原型對象，它對捕獲系統(tǒng)中的信息或知識的存儲或持久性機制進行建模。通常情況下，Control/Boundary/Entity往往跟Lifeline一起使用（見文章開頭的圖）。EA、DrawIO、PlantUML都有這些元素。
Message
這個很好理解，就是一根線一個箭頭，加上一個文本描述。Message表示元素之間的信息流或控制轉(zhuǎn)換。Message分Synchronize和Asynchronize，前者對應(yīng)的是黑實心箭頭（下圖右邊的箭頭），后者對應(yīng)的是開放箭頭（下圖左邊的箭頭）。對于EA，可以直接雙擊這個message箭頭可以設(shè)置，里面的配置十分豐富而DrawIO或其他工具，在設(shè)置屬性等界面可以選擇不同的箭頭，而并沒說明這是Synchronize還是Asynchronize。對于PlantUML，是通過腳本設(shè)置不同的Message類型，如另外，這兩種不同的Message類型，會影響Lifeline的，很明顯Synchronize會阻塞當前運行，而Asynchronize不會。這個圖上的block塊，在EA上是自動根據(jù)Message類型顯示的，不需要特殊處理，而DrawIO是需要在Lifeline上貼上一個長方形的，但是PlantUML上似乎沒找到這個設(shè)置。
Message可用于時序圖、序列圖和通信圖（但不包括交互概覽圖）以反映系統(tǒng)行為。
如果在類或分類器實例之間，關(guān)聯(lián)的操作列表可用于指定事件。
Fragment
組合Fragment反映了由交互操作符控制的交互（稱為交互操作數(shù)）的一個或多個方面，相應(yīng)的布爾條件稱為交互約束。Fragment 顯示為一個透明窗口，由每個操作數(shù)的水平線分隔。下圖說明了如何使用組合片段對簡化的采購流程進行建模。Loop Fragment表示迭代購買數(shù)量未知的物品，之后收銀員請求付款。
另一個Fragment代表支付選項，該Fragment被分割以顯示現(xiàn)金和信用卡這兩個操作數(shù)。在Fragment完成其跟蹤后，收銀員在滿足付款要求的履行條件下向客戶提供收據(jù)。在EA上操作Fragment是非常方便的。而在DrawIO上的話，有點古板，里面的線條或者邊框都是普通圖形組成的，如果有比較復雜的Fragment要畫，是比較麻煩的。對于PlantUML，它是有專門的語法對應(yīng)這個Fragment的，例如下面這段腳本就可以翻譯成以下圖形：
@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted
else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
loop 1000 times
Alice -> Bob: DNS Attack
end
Alice -> Log : Log attack end
end
else Another type of failure
Bob -> Alice: Please repeat
end
@enduml
注釋
這個沒什么特殊的，不是很講究，簡單地理解就是在時序圖上貼上一段文本內(nèi)容，以輔助理解這個時序圖。3. 總結(jié)
| 工具/軟件 | 時序圖功能總結(jié)評價 |
|---|---|
| EA | 這個是基于UML概念設(shè)計用的，不僅僅是為了畫圖，而注重“設(shè)計”。里面的概念和功能非常強大，畫時序圖也非常友好，但是如果對EA陌生的話，入門會有些難度，相對DrawIO并非“所見所得”。 |
| DrawIO | 畫的圖很好看，也很方便，就因為圖是“畫”出來的，所以，它是為了畫圖而畫圖，并沒有太多內(nèi)涵。如果畫很復雜的圖也是比較繁瑣的。如果只是畫些簡單的圖形，是不二選擇。 |
| PlantUML | UML概念比較豐富，但是顏色風格看個人喜好。如果喜歡Mark圖而不是畫圖的，可以考慮。這個工具“畫”圖是通過腳本命令的，然后生成圖片。經(jīng)常使用文本編輯的環(huán)境，這個是比較好的。 |
| mermaid | 非常簡單，功能稀少，用于嵌入markdown的簡單圖示是個不錯的選擇 |
PlantUML，我是用vs code插件來做的。mermaid的話，我用Typera markdown。
下載文檔
