如何優化PlantUML流程圖（時序圖）

這篇文章用來介紹，如何畫出好看的流程圖。

本文地址：https://www.cnblogs.com/hchengmx/p/16367169.html

一個PlantUML時序圖的效果圖

PlantUML效果圖

1. 選擇合適的元件

在流程圖中，plantUML圖最上方是元件，標識該流程圖有多少參與方

首先，不能用 Participant 一概所有，針對不同的情況應該選擇合適的元件。

1.1 plantuml官方提供的元件

官方提供了以下幾種參與者

參考：Sequence Diagram syntax and features - PlantUml¹

Sample 1:

@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml

note: as關鍵字用來重新命名

1.2 載入圖片

要是覺得官方提供的圖示不好看，或者沒有想要的圖示，ES、Azure、防火牆等、比如實際參與者實際是有圖示的，就可引入該圖示顯示在參與者裡。

這樣情況下，我們則可以通過引用外部圖片的方式來載入圖示。

plantuml提供了兩種引入圖片的方式，引入本地檔案或引入網路圖片。

1.2.1 載入本地圖片

儲存向量圖示到本地

建議專門建立一個資料夾來放所有的圖片
e.g. {YOUR_PLANTUML_WORKSPACE}\image\XXXX.png

引用圖片

Sample 2

@startuml
participant "\nMerchant\nSystem\n<img:../image/merchant.png>\n" as merchantsystem
participant "\nPayment\nSystem\n<img:../image/payement.png>\n" as paymentsystem

merchantsystem -> paymentsystem: do something
@enduml

1.2.2 載入網路圖片

Sample 3:

@startuml
title Office Icons Example

package "Images" {
    rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/database_server.png>\r DB" as db2
    rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/application_server.png>\r App-Server" as app2
    rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Concepts/firewall_orange.png>\r Firewall" as fw2
    rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Clouds/cloud_disaster_red.png>\r Cloud" as cloud2
    db2 <-> app2
    app2 <-\-> fw2
    fw2 <.left.> cloud2
}
@enduml

1.2.3 圖片資源

常見的圖片資源有：

2. 背景以及顏色優化

2.1 通用設定

首先包括一些通用設定，包括背景顏色、字型大小、字型顏色、字型等

skinparam backgroundColor White
skinparam defaultFontName MarkForMCNrw
skinparam defaultFontSize 17
skinparam defaultFontColor #141413
skinparam roundCorner 10

2.2 對每個元件的樣式進行設定

其他的元件，包括 Participant、Collection、Actor、Database、Box、Vertical Line、Arrow、Alt、Loop、Group box、Ref box、Notes、Divider 都可以設定背景顏色、字型顏色、粗細等屬性。

所有的屬性可參考

2.3 引入檔案

2.3.1 引用本地模板檔案

以上的其實都是配置項，配置項不適合放在指令碼檔案中，可以把所有的配置項放在一個配置檔案中，我們在指令碼檔案中只需要引用配置檔案，就可以使得配置生效。

include 關鍵字

2.3.2 引用網頁模板檔案

includeurl 關鍵字

2.3.3 模板檔案資源

github上一些現成的模板檔案可用於參考使用。

bschwarz/puml-themes: This repository is used to hold themes for plantuml (www.plantuml.com) diagraming tool. Users can use these themes to give there diagrams different looks.⁸

plantuml/themes at master · plantuml/plantuml⁹

3. 使用關鍵字

plantuml提供了很多關鍵字，下面介紹一些常用的關鍵字

3.1 條件選擇關鍵字

包括 opt/if/ifelse/loop

3.2 組合關鍵字

3.2.1 box

box關鍵字適用於participant，比如關聯方有一個大系統，但是大系統裡面又有幾個微服務，需要把這幾個微服務都標出來。但是又要標明這三個微服務的關係，就可以使用box關鍵字。

box "系統" #
participant "服務A" as ServiceA
database "DB" as DB
participant "服務B" as ServiceB
end box

3.2.2 Group關鍵字

適用於組合會話，要是會話特別長，可分為十幾個步驟，但是十幾個步驟中，又大體可以分為三個部分，就可以在這三個部分裡面用會話。

group XX介面 [介面名1]
    cnb -> scmchannel: 授信申請校驗 
    alt 有記錄
        return 上次申請記錄
    else 無記錄
        scmchannel -> cnb: 空
    end
end

3.3 註釋關鍵字

note right MCBPDdelivery:

note left MCBPDelivery

note over

note也支援markdown語法

e.g.

nore over Instance, Participation
This is a note accross serveral participants and with several lines
    This is **bold**
        This is //italics//
            This is ""monospaced""
                This is --stroked--
                    This is __underlined__
This is the end
end note

box boxB #aliceblue
participant "SystemB" as Axon
end box

3.4 分割關鍵字 ==

== Another Part ==

3.5 其他優化

3.5.1 使用副標題

有的情況，participant的描述可能會比較長，就可以用副標題的形式，突出主標題。

@startuml
participant Participant [
    =Title
    ----
    ""SubTitle""
]

participant Bob

Participant -> Bob
@enduml

3.5.2 自動標註時序圖序號

要是時序圖想標註一下走到了哪個是第一步、哪個是第二步…… 就可以用以下關鍵字

@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
@enduml

3.5.3 區分同步和非同步

時序圖中，有活動圖 -> 或者 --> 的區分。

一般約定， ->代表同步，-->代表非同步

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml