使用PlantUml画时序图
# 使用PlantUml画时序图
# plantuml介绍
plantuml是一款使用uml语法用于绘制时序图的插件。在装其他软件的前提下，它也能绘制流程图、类图等等。
# plantuml绘制时序图
# 快速开始
创建文件test.iuml，输入如下内容（' 开头的内容是注释，vscode快捷键ctrl+?）
@startuml
' 快速开始
' 可以用 -> 或者 --> 来绘制参与者之间传递的消息,而不必显式地声明参与者。
Alice -> Bob: Request 1
Bob --> Alice: Response 1
Alice -> Bob: Request 2
Alice <-- Bob: Response 2
@enduml
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
在vscode中使用快捷键alt+D,预览图片。
# 声明参与者
声明的顺序对应图中参与者从左到右的顺序。
- participant
- actor
- boundary
- control
- entity
- database
@startuml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
participant Foo7
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections
Foo1 -> Foo7 : To participant
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 使用as重命名参与者
@startuml
participant Alice as A
participant Bob as B
A -> B: Request 1
A <-- B: Response 1
A -> B: Request 2
A <-- B: Response 2
@enduml
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# order改变参与者的顺序
使用order改变参与者的顺序，order的顺序越小越靠前
@startuml
' 通过order 定义参与者顺序
participant Last order 30
participant Middle order 20
participant First order 10
@enduml
1
2
3
4
5
6
2
3
4
5
6
# 使用非字母符号
@startuml
participant Alice as A
participant "Bob()" as B
A -> B: Request 1
A <-- B: Response 1
@enduml
1
2
3
4
5
6
2
3
4
5
6
# 修改箭头样式
@startuml
' • 表示一条丢失的消息:末尾加 x
' • 让箭头只有上半部分或者下半部分:将 < 和 > 替换成 \ 或者 /
' • 细箭头:将箭头标记写两次 (如 >> 或 //)
' • 虚线箭头:用 -- 替代 -
' • 箭头末尾加圈:->o
' • 双向箭头:<->
Bob ->x Alice : 末尾加 x
Bob -> Alice : 常规箭头
Bob ->> Alice : 细箭头
Bob -\ Alice : 粗箭头只保留上半部分
Bob \\- Alice : 细箭头 只保留下半部分
Bob //-- Alice : 细箭头只保留上半部分
Bob ->o Alice : 实线箭头 带圆圈
Bob o\\-- Alice : 虚线细箭头 只保留一半 带圆圈
Bob <-> Alice : 双向实线箭头
Bob <->o Alice : 双向实线箭头 右侧带圆圈
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 修改箭头的箭头的颜色
@startuml change_arrow_color
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml
1
2
3
4
2
3
4
# 对消息序列进行编号
@startuml autonumber
autonumber
Bob -> Alice : Request
Bob <- Alice : Response
@enduml
1
2
3
4
5
2
3
4
5
语句 autonumber startnum 用于指定编号的初始值,而 autonumber startnum incrementnum 可以同时指定编号的初始值和每次增加的值。
@startuml autonumber_start_increment
autonumber
Bob -> Alice : Request
Bob <- Alice : Response
autonumber 15
Bob -> Alice : Request
Bob <- Alice : Response
autonumber 40 10
Bob -> Alice : Request
Bob <- Alice : Response
@enduml
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
在双引号中指定编号的方式
可以使用html的方式指定
@startuml
autonumber "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber 15 "<b>(<u>##</u>)"
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response
autonumber 40 10 "<font color=red><b>Message 0 "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response
@enduml
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
停止编号和恢复编号
@startuml autonumber_stop
autonumber 10 10 "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber stop
Bob -> Alice : dummy
autonumber resume "<font color=red><b>Message 0 "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response
autonumber stop
Bob -> Alice : dummy
autonumber resume 1 "<font color=blue><b>Message 0 "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 组合消息
@startuml alt
' 我们可以通过以下关键词将组合消息:
' • alt/else
' • opt
' • loop
' • par
' • break
' • critical
' • group, 后面紧跟着消息内容
' 可以在标头 (header) 添加需要显示的文字 (group 除外)。
' 关键词 end 用来结束分组。
' 注意,分组可以嵌套使用
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 添加注释
可以使用 note left of,note right of 或 note over 在节点 (participant) 的相对位置放置注释。
@startuml
' 可以使用 note left of,note right of 或 note over 在节点 (participant) 的相对位置放置注释。
' 还可以通过修改背景色来高亮显示注释。
' 以及使用关键字 end note 来添加多行注释
participant Alice
participant Bob
note left of Alice #aqua
This is displayed
left of Alice.
end note
note right of Alice: This is displayed right of Alice.
note over Alice: This is displayed over Alice.
note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.
note over Bob, Alice
This is yet another
example of
a long note.
end note
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 改变注释的形状
@startuml rnote_hnote
' 你可以使用 hnote 和 rnote 这两个关键字来修改备注框的形状
caller -> server : conReq
hnote over caller : idle
caller <- server : conConf
rnote over server
"r" as rectangle
"h" as hexagon
end rnote
@enduml
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 使用ref实现引用
@startuml ref
participant Alice
actor Bob
ref over Alice, Bob : 初始化Alice, Bob
Alice -> Bob : hello
ref over Bob
Bob上的多行
引用
end ref
@enduml
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 延时效果
可以使用...来表示延迟,并且还可以给延迟添加注释
@startuml delay
Alice -> Bob: Authentication Request
...
Bob --> Alice: Authentication Response
...5 minutes latter...
Bob --> Alice: Bye !
@enduml
1
2
3
4
5
6
7
2
3
4
5
6
7
# 使用|||增加空间像素
可以使用 ||| 来增加空间，还可以使用数字指定增加的像素的数量。
@startuml spqce
Alice -> Bob: message 1
Bob --> Alice: ok
|||
Alice -> Bob: message 2
Bob --> Alice: ok
||45||
Alice -> Bob: message 3
Bob --> Alice: ok
@enduml
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 使用==tag==分块
@startuml
Alice -> Bob: message 1
Bob --> Alice: ok
==part1==
Alice -> Bob: message 2
Bob --> Alice: ok
==part2==
Alice -> Bob: message 3
Bob --> Alice: ok
@enduml
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 生命线的开始和撤销
@startuml life_line
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 生命线的嵌套
@startuml squence_lifeline
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 创建参与者
可以把关键字 create 放在第一次接收到消息之前,以强调本次消息实际上是在创建新的对象
@startuml create_sequence
Bob -> Alice : hello
create Other
Alice -> Other : new
create control String
Alice -> String
note right : You can also put notes!
Alice --> Bob : ok
@enduml
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 收到和发出消息
如果只想关注部分图示,你可以使用进入和发出箭头。
使用方括号[和]表示图示的左、右两侧。
@startuml sequene_[]
[-> A: DoWork
activate A
A -> A: Internal call
activate A
A ->] : << createRequest >>
A<--] : RequestCreated
deactivate A
[<- A: Done
deactivate A
@enduml
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
@startuml
[-> Bob
[o-> Bob
[o->o Bob
[x-> Bob
[<- Bob
[x<- Bob
Bob ->]
Bob ->o]
Bob o->o]
Bob ->x]
Bob <-]
Bob x<-]
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 构造类型和圈点
@startuml color_sequence
' 可以使用 << 和 >> 给参与者添加构造类型。
' 在构造类型中,你可以使用 (X,color) 格式的语法添加一个圆圈圈起来的字符
participant "Famous Bob" as Bob << Generated >>
participant Alice << (C,#ADD1B2) Testable >>
Bob->Alice: First message
@enduml
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
默认使用 guillemet 字符来显示构造类型。你可以使用外观参数 guillemet 来修改显示行为。
@startuml sequence_with_circle
skinparam guillemet false
participant "Famous Bob" as Bob << Generated >>
participant Alice << (C,#ADD1B2) Testable >>
Bob->Alice: First message
@enduml
1
2
3
4
5
6
2
3
4
5
6
@startuml new_circle
participant Bob << (C,#ADD1B2) >>
participant Alice << (C,#ADD1B2) >>
Bob->Alice: First message
@enduml
1
2
3
4
5
2
3
4
5
# 标题
@startuml coreole
title __Simple__ **communication** example
Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response
@enduml
1
2
3
4
5
2
3
4
5
# 多行标题
@startuml title_endtitle
title
<u>Simple</u> communication example
on <i>several</i> lines and using <font color=red>html</font>
end title
Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response
@enduml
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 隐藏 footbox
@startuml hide foot boot
hide footbox
title Footer removed
Alice -> Bob: Request
Bob --> Alice: Response
@enduml
1
2
3
4
5
6
2
3
4
5
6
# 增加外观参数
用 skinparam 改变字体和颜色。 可以在如下场景中使用: • 在图示的定义中, • 在引入的文件中, • 在命令行或者 ANT 任务提供的配置文件中。 你也可以修改其他渲染元素,如以下示例:
@startuml skinparam
skinparam sequenceArrowThickness 2
skinparam roundcorner 20
skinparam maxmessagesize 60
skinparam sequenceParticipant underline
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
User -> A: DoWork
activate A
A -> B: Create Request
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: Request Created
deactivate B
A --> User: Done
deactivate A
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@startuml sikin
skinparam backgroundColor #EEEBDC
skinparam handwritten true
skinparam sequence {
ArrowColor DeepSkyBlue
ActorBorderColor DeepSkyBlue
LifeLineBorderColor blue
LifeLineBackgroundColor #A9DCDF
ParticipantBorderColor DeepSkyBlue
ParticipantBackgroundColor DodgerBlue
ParticipantFontName Impact
ParticipantFontSize 17
ParticipantFontColor #A9DCDF
ActorBackgroundColor aqua
ActorFontColor DeepSkyBlue
ActorFontSize 17
ActorFontName Aapex
}
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
User -> A: DoWork
activate A
A -> B: Create Request
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: Request Created
deactivate B
A --> User: Done
deactivate A
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@startuml
skinparam ParticipantPadding 20
skinparam BoxPadding 10
box "Foo1"
participant Alice1
participant Alice2
end box
box "Foo2"
participant Bob1
participant Bob2
end box
Alice1 -> Bob1 : hello
Alice1 -> Out : out
@enduml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
辽公网安备 21021102001125号