畫(huà)時(shí)序圖你用什么軟件？
[導(dǎo)讀]軟件設(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（EnterpriseA...
軟件設(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è)賬戶（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.從上面的各個(gè)工具做出的圖看，前面三個(gè)差別不大該有的圖示效果都有，最后一個(gè)mermaid就沒(méi)那么豐富了，只能做個(gè)簡(jiǎn)單的圖示表達(dá)。然而，這樣也不能說(shuō)明哪個(gè)是最好的，只能從中找出一個(gè)最適合你的。為了更好說(shuō)明各自的優(yōu)缺點(diǎn)，先看看時(shí)序圖里面有什么。
2. 時(shí)序圖的組成
首先，想想你理解中的時(shí)序圖是什么？里面有什么元素？畫(huà)兩根豎線，然后通過(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)或元素。就像南方人跟北方人講話，通用的普通話就很好，如果你講的普通話夾雜很多粵語(yǔ)甚至潮汕話，你讓東北人怎么聽(tīng)得懂。時(shí)序圖是可以基于UML的，UML是統(tǒng)一建模語(yǔ)言，里面很多元素是我們共同認(rèn)為它表達(dá)某一種特別含義。以下基于UML概念，講講時(shí)序圖里面主要一些元素。
Lifeline
這個(gè)是時(shí)序圖的最基本的東西Lifeline是交互中的單個(gè)參與者（即生命線不能具有多重性）。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類型 |
|---|---|
| Foo1 | actor |
| Foo2 | boundary |
| Foo3 | control |
| Foo4 | entity |
| Foo5 | database |
| Foo6 | collections |
Control/Boundary/Entity
Control 是一個(gè)原型對(duì)象，它為控制實(shí)體或管理器建模?？丶M織和安排其他活動(dòng)和元素，通常在分析（包括穩(wěn)健性）、序列和通信圖中。
Boundary是一種原型對(duì)象，它對(duì)某些系統(tǒng)Boundary進(jìn)行建模，通常是用戶界面屏幕。您還可以將Boundary創(chuàng)建為構(gòu)造型類。在分析中使用Boundary元素來(lái)捕獲用戶交互、屏幕流和元素交互（或“協(xié)作”）。
在概念階段使用Boundary來(lái)捕獲用戶在屏幕級(jí)別（或某些其他Boundary界面類型）與系統(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è)很好理解，就是一根線一個(gè)箭頭，加上一個(gè)文本描述。Message表示元素之間的信息流或控制轉(zhuǎ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類型，如另外，這兩種不同的Message類型，會(huì)影響Lifeline的，很明顯Synchronize會(huì)阻塞當(dāng)前運(yùn)行，而Asynchronize不會(huì)。這個(gè)圖上的block塊，在EA上是自動(dòng)根據(jù)Message類型顯示的，不需要特殊處理，而DrawIO是需要在Lifeline上貼上一個(gè)長(zhǎng)方形的，但是PlantUML上似乎沒(méi)找到這個(gè)設(shè)置。
Message可用于時(shí)序圖、序列圖和通信圖（但不包括交互概覽圖）以反映系統(tǒng)行為。
如果在類或分類器實(shí)例之間，關(guān)聯(lián)的操作列表可用于指定事件。
Fragment
組合Fragment反映了由交互操作符控制的交互（稱為交互操作數(shù)）的一個(gè)或多個(gè)方面，相應(yīng)的布爾條件稱為交互約束。Fragment 顯示為一個(gè)透明窗口，由每個(gè)操作數(shù)的水平線分隔。下圖說(shuō)明了如何使用組合片段對(duì)簡(jiǎn)化的采購(gòu)流程進(jìn)行建模。Loop Fragment表示迭代購(gòu)買數(shù)量未知的物品，之后收銀員請(qǐng)求付款。
另一個(gè)Fragment代表支付選項(xiàng)，該Fragment被分割以顯示現(xiàn)金和信用卡這兩個(gè)操作數(shù)。在Fragment完成其跟蹤后，收銀員在滿足付款要求的履行條件下向客戶提供收據(jù)。在EA上操作Fragment是非常方便的。而在DrawIO上的話，有點(diǎn)古板，里面的線條或者邊框都是普通圖形組成的，如果有比較復(fù)雜的Fragment要畫(huà)，是比較麻煩的。對(duì)于PlantUML，它是有專門(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陌生的話，入門(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ò)的選擇 |
PlantUML，我是用vs code插件來(lái)做的。mermaid的話，我用Typera markdown。
下載文檔
