軟件設(shè)計(jì)時(shí)序圖制作工具

在軟件設(shè)計(jì)過(guò)程中，經(jīng)常會(huì)使用到時(shí)序圖來(lái)表達(dá)模塊之間的交互、信息傳遞的動(dòng)態(tài)行為或者其他軟件邏輯。時(shí)序圖可以清晰地表達(dá)軟件層面的設(shè)計(jì)，甚至毫不夸張說(shuō)是“一圖頂千言”。

那么，拋出個(gè)直截了當(dāng)?shù)膯?wèn)題：畫(huà)時(shí)序圖的工具有哪些？哪個(gè)最好用？

以下以EA（Enterprise Architect）、DrawIO、PlantUML和Markdown里的mermaid來(lái)對(duì)比講解。

首先看看他們的效果對(duì)比：

1. 效果對(duì)比

以下是EA（Enterprise Architect）、DrawIO、PlantUML和Markdown里的mermaid的時(shí)序圖最終效果對(duì)比。

這幾個(gè)圖都是表示創(chuàng)建一個(gè)賬戶(hù)（Create Account）的實(shí)例。

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.

1. EA
   

2. DrawIO
   

3. PlantUML
   

4. mermaid
   
   

從上面的各個(gè)工具做出的圖看，前面三個(gè)差別不大該有的圖示效果都有，最后一個(gè)mermaid就沒(méi)那么豐富了，只能做個(gè)簡(jiǎn)單的圖示表達(dá)。

然而，這樣也不能說(shuō)明哪個(gè)是最好的，只能從中找出一個(gè)最適合你的。

為了更好說(shuō)明各自的優(yōu)缺點(diǎn)，先看看時(shí)序圖里面有什么。

2. 時(shí)序圖的組成

首先，想想你理解中的時(shí)序圖是什么？里面有什么元素？

畫(huà)兩根豎線(xiàn)，然后通過(guò)幾個(gè)箭頭表示消息傳遞，僅此而已？

這個(gè)是時(shí)序圖么？是，可以認(rèn)為時(shí)序圖，但不是那么標(biāo)準(zhǔn)。

那么，什么是標(biāo)準(zhǔn)？或者說(shuō)有沒(méi)有一個(gè)約定成俗的東西？

時(shí)序圖不僅僅是給自己看的，也是向其他團(tuán)隊(duì)成員傳遞或表達(dá)信息的媒介，應(yīng)該與別人有共同約定的符號(hào)或元素。

就像南方人跟北方人講話(huà)，通用的普通話(huà)就很好，如果你講的普通話(huà)夾雜很多粵語(yǔ)甚至潮汕話(huà)，你讓東北人怎么聽(tīng)得懂。

時(shí)序圖是可以基于UML的，UML是統(tǒng)一建模語(yǔ)言，里面很多元素是我們共同認(rèn)為它表達(dá)某一種特別含義。

以下基于UML概念，講講時(shí)序圖里面主要一些元素。

Lifeline

這個(gè)是時(shí)序圖的最基本的東西

Lifeline是交互中的單個(gè)參與者（即生命線(xiàn)不能具有多重性）。Lifeline代表一個(gè)獨(dú)特的可連接元素。

OMG UML 規(guī)范（UML Superstructure Specification, v2.1.1, p.489）指出：

Lifeline代表交互中的單個(gè)參與者。雖然零件和結(jié)構(gòu)特征的多重性可能大于 1，但Lifeline僅代表一個(gè)交互實(shí)體。

這個(gè)很好理解，簡(jiǎn)單粗暴地說(shuō)，就是一根豎下來(lái)的東西，代表一個(gè)獨(dú)立的交互實(shí)體。

上圖是EA常用的Lifeline圖示，當(dāng)然也有通過(guò)其他圖標(biāo)組合的Lifeline，例如這個(gè)

DrawIO上也能找到很多各種Lifeline

對(duì)于PlantUML，可以通過(guò)腳本指定，同樣有很多種

下圖示例	Lifeline類(lèi)型
Foo1	actor
Foo2	boundary
Foo3	control
Foo4	entity
Foo5	database
Foo6	collections

而mermaid就沒(méi)有那么多類(lèi)型的了，就只有很簡(jiǎn)單的。

Control/Boundary/Entity

Control 是一個(gè)原型對(duì)象，它為控制實(shí)體或管理器建模?？丶M織和安排其他活動(dòng)和元素，通常在分析（包括穩(wěn)健性）、序列和通信圖中。

Boundary是一種原型對(duì)象，它對(duì)某些系統(tǒng)Boundary進(jìn)行建模，通常是用戶(hù)界面屏幕。您還可以將Boundary創(chuàng)建為構(gòu)造型類(lèi)。在分析中使用Boundary元素來(lái)捕獲用戶(hù)交互、屏幕流和元素交互（或“協(xié)作”）。
在概念階段使用Boundary來(lái)捕獲用戶(hù)在屏幕級(jí)別（或某些其他Boundary界面類(lèi)型）與系統(tǒng)交互。它通常用于序列和穩(wěn)健性（分析）圖中。

Entity是一種原型對(duì)象，它對(duì)捕獲系統(tǒng)中的信息或知識(shí)的存儲(chǔ)或持久性機(jī)制進(jìn)行建模。

通常情況下，Control/Boundary/Entity往往跟Lifeline一起使用（見(jiàn)文章開(kāi)頭的圖）。

EA、DrawIO、PlantUML都有這些元素。

Message

這個(gè)很好理解，就是一根線(xiàn)一個(gè)箭頭，加上一個(gè)文本描述。

Message表示元素之間的信息流或控制轉(zhuǎn)換。
Message可用于時(shí)序圖、序列圖和通信圖（但不包括交互概覽圖）以反映系統(tǒng)行為。
如果在類(lèi)或分類(lèi)器實(shí)例之間，關(guān)聯(lián)的操作列表可用于指定事件。

Message分Synchronize和Asynchronize，前者對(duì)應(yīng)的是黑實(shí)心箭頭（下圖右邊的箭頭），后者對(duì)應(yīng)的是開(kāi)放箭頭（下圖左邊的箭頭）。

對(duì)于EA，可以直接雙擊這個(gè)message箭頭可以設(shè)置，里面的配置十分豐富

而DrawIO或其他工具，在設(shè)置屬性等界面可以選擇不同的箭頭，而并沒(méi)說(shuō)明這是Synchronize還是Asynchronize。

對(duì)于PlantUML，是通過(guò)腳本設(shè)置不同的Message類(lèi)型，如

• Client ->> CreateAccount表示Asynchronize箭頭；

• CreateAccount -> CreateNewAccount表示Synchronize箭頭。

另外，這兩種不同的Message類(lèi)型，會(huì)影響Lifeline的，很明顯Synchronize會(huì)阻塞當(dāng)前運(yùn)行，而Asynchronize不會(huì)。

這個(gè)圖上的block塊，在EA上是自動(dòng)根據(jù)Message類(lèi)型顯示的，不需要特殊處理，而DrawIO是需要在Lifeline上貼上一個(gè)長(zhǎng)方形的，但是PlantUML上似乎沒(méi)找到這個(gè)設(shè)置。

Fragment

組合Fragment反映了由交互操作符控制的交互（稱(chēng)為交互操作數(shù)）的一個(gè)或多個(gè)方面，相應(yīng)的布爾條件稱(chēng)為交互約束。Fragment 顯示為一個(gè)透明窗口，由每個(gè)操作數(shù)的水平線(xiàn)分隔。

下圖說(shuō)明了如何使用組合片段對(duì)簡(jiǎn)化的采購(gòu)流程進(jìn)行建模。Loop Fragment表示迭代購(gòu)買(mǎi)數(shù)量未知的物品，之后收銀員請(qǐng)求付款。
另一個(gè)Fragment代表支付選項(xiàng)，該Fragment被分割以顯示現(xiàn)金和信用卡這兩個(gè)操作數(shù)。在Fragment完成其跟蹤后，收銀員在滿(mǎn)足付款要求的履行條件下向客戶(hù)提供收據(jù)。

在EA上操作Fragment是非常方便的。

而在DrawIO上的話(huà)，有點(diǎn)古板，里面的線(xiàn)條或者邊框都是普通圖形組成的，如果有比較復(fù)雜的Fragment要畫(huà)，是比較麻煩的。

對(duì)于PlantUML，它是有專(zhuān)門(mén)的語(yǔ)法對(duì)應(yīng)這個(gè)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


注釋

這個(gè)沒(méi)什么特殊的，不是很講究，簡(jiǎn)單地理解就是在時(shí)序圖上貼上一段文本內(nèi)容，以輔助理解這個(gè)時(shí)序圖。

3. 總結(jié)

工具/軟件	時(shí)序圖功能總結(jié)評(píng)價(jià)
EA	這個(gè)是基于UML概念設(shè)計(jì)用的，不僅僅是為了畫(huà)圖，而注重“設(shè)計(jì)”。里面的概念和功能非常強(qiáng)大，畫(huà)時(shí)序圖也非常友好，但是如果對(duì)EA陌生的話(huà)，入門(mén)會(huì)有些難度，相對(duì)DrawIO并非“所見(jiàn)所得”。
DrawIO	畫(huà)的圖很好看，也很方便，就因?yàn)閳D是“畫(huà)”出來(lái)的，所以，它是為了畫(huà)圖而畫(huà)圖，并沒(méi)有太多內(nèi)涵。如果畫(huà)很復(fù)雜的圖也是比較繁瑣的。如果只是畫(huà)些簡(jiǎn)單的圖形，是不二選擇。
PlantUML	UML概念比較豐富，但是顏色風(fēng)格看個(gè)人喜好。如果喜歡Mark圖而不是畫(huà)圖的，可以考慮。這個(gè)工具“畫(huà)”圖是通過(guò)腳本命令的，然后生成圖片。經(jīng)常使用文本編輯的環(huán)境，這個(gè)是比較好的。
mermaid	非常簡(jiǎn)單，功能稀少，用于嵌入markdown的簡(jiǎn)單圖示是個(gè)不錯(cuò)的選擇

總體來(lái)說(shuō)，如果僅僅是畫(huà)時(shí)序圖，我優(yōu)先選EA，對(duì)于簡(jiǎn)單的而又好看點(diǎn)的，就選DrawIO。

注意：EA軟件是要license的，而DrawIO是開(kāi)源的。DrawIO有網(wǎng)頁(yè)版、PC桌面版，也有vs code插件版。
PlantUML，我是用vs code插件來(lái)做的。mermaid的話(huà)，我用Typera markdown。