程序員繪圖工具-Plantuml

在寫文檔的過程中，經常需要進行畫圖。雖然說現在有很多類似viso之類的可視化畫圖工具，但是還是要花費大量時間在拖拉組件上，效率十分低下。最近在網上找到了一款還算不錯的繪圖工具-- Plantuml, 它本質上是也算一門可以快速畫圖的設計語言，學習起來也很方便。可以在http://plantuml.com/網站上體驗一下。
在vscode, webstorm都有相關的插件可以使用。

時序圖

時序圖相對來說是平常比較經常畫的一種設計圖稿，在這裏記錄一下plantuml中相關的語法。

基本用法

@startuml
A -> B: do something
B -> A: do something
@enduml

設置不同的角色

時序圖角色可以分爲: actor, boundary, control, entity, database，每種角色呈現的圖形也是不一樣的。

@startuml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections

@enduml

不用的箭頭樣式

@startuml
Bob ->x Alice
Bob -> Alice
Bob ->> Alice
Bob -\ Alice
Bob \\- Alice
Bob //-- Alice

Bob ->o Alice
Bob o\\-- Alice

Bob <-> Alice
Bob <->o Alice
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml

分頁

@startuml

Alice -> Bob : message 1
Alice -> Bob : message 2

newpage

Alice -> Bob : message 3
Alice -> Bob : message 4

newpage A title for the\nlast page

Alice -> Bob : message 5
Alice -> Bob : message 6
@enduml

分段

@startuml

== Initialization ==

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

== Repetition ==

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response

@enduml

生命線

@startuml
participant User

User -> A: DoWork
activate A #FFBBBB

A -> A: Internal call
activate A #DarkSalmon

A -> B: << createRequest >>
activate B

B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A

@enduml

圖例註腳等

@startuml

header Page Header
footer Page %page% of %lastpage%

title Example Title

Alice -> Bob : message 1
note left: this is a first note

Alice -> Bob : message 2

@enduml

C4架構圖

C4 model是一種軟件架構圖的設計方法，具體介紹可以參考C4 architecture model。利用C4-PlantUML工具，可以畫出很多很不錯的架構圖。
C4模型分爲Context, Container, Component和Code 4個組成部分，我們一般在畫圖的時候主要用到前三個組成部分。

@startuml C4_Elements
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml

System(systemAlias, "System", "這可以看作系統上下文(Context)")
Container(containerAlias, "Container", "這是Container")
Person(personAlias, "Person", "這可以看作是組件(Component)")

Rel(personAlias, containerAlias, "Label", "設置關聯關係")
@enduml