plantuml:时序图

PlantUML时序图

时序图(Sequence Diagram)又称序列图、顺序图,描述的是多个对象之间互相发生的事件与事件发生的顺序。时序图强调的是系统内的时间顺序

时序图的基本元素为参与者(Participant)与消息传递。另外可以通过控制焦点来标明当前参与者是否处于激活状态。一般的消息传递为实线箭头,返回消息为虚线箭头。用于绘制实线箭头,–>用于绘制虚线箭头。箭头的左右很好理解,就是向右。

时序图的基本架构如下:

可选的参与者声明 order 可选的参与者顺序
参与者 <-消息传递-> 参与者: 可选的信息内容

一个时序图的样例:

微信扫码支付微信扫码支付用户手机微信微信商家商家用户手机微信商家用户用户手机手机微信微信商家商家用户手机微信微信商家商家1输入密码2解锁手机3打开扫一扫4进入扫一扫5生成收款码6展示收款码7扫描收款码8识别收款码9提示输入密码10输入密码11支付验证12向商家支付13确认支付成功14提示用户支付成功

@startuml
Bob -> Alice : hello
Alice --> Bob : Ciao
@enduml

BobAliceBobBobAliceAlicehelloCiao

默认的参与者显示为矩形,如果通过对参与者的显式声明则可以改变其外形。显式参与者声明的语法:参与者类型 参与者名称 as 参与者别名

参与者类型有:

代码类型
actor角色
boundary边界
control控制
entity实体
database数据库
collections集合
queue队列

示例如下:

@startuml
participant participant_item as par
actor User as usr
boundary Boundary as bdy
control Control as ctr
entity Entity as ent
database Database as db
collections Collections as col
queue Queue as que

par -> usr : to User
par --> bdy : to Boundary
par -> ctr : to Control
par -> ent : to Entity
par -> db : to Database
par --> col : to Collections
par <- que : from Queue
@enduml

participant_itemUserBoundaryControlEntityDatabaseCollectionsQueueparticipant_itemparticipant_itemUserUserBoundaryBoundaryControlControlEntityEntityDatabaseDatabaseCollectionsCollectionsQueueQueueto Userto Boundaryto Controlto Entityto Databaseto Collectionsfrom Queue

可以在声明的最后加上HEX色值注明图标的颜色。

@startuml
actor Man as ter
actor Alian as ali #11FF22
ter -> ali : Welcome to Earth
@enduml

ManAlianManManAlianAlianWelcome to Earth

若需要在参与者中使用非字母字符,需要在参与者名称外加上双引号。

@startuml
Bob -> "Alice(_)" : hello
@enduml

BobAlice(_)BobBobAlice(_)Alice(_)hello

消息可以自己发给自己。消息内容可以通过\n来换行。

@startuml
Alice -> Alice : 我\n今天\n实在闲的\n自己和自己\n聊天
@enduml

AliceAliceAlice今天实在闲的自己和自己聊天

通过使用skinparam responseMessageBelowArrow true参数让相应信息显示在箭头下面。

@startuml
skinparam responseMessageBelowArrow true
Bob -> Alice : hello
Alice -> Bob : ok
@enduml

BobAliceBobBobAliceAlicehellook

箭头样式对应的功能:

  • 表示一条丢失的消息,在末尾加x
  • 让箭头只有上半部分或者下半部分,将<>更换为\或者/
  • 细箭头:将箭头标记写两次,如»或者\\
  • 虚线箭头:用代替-
  • 箭头末尾加圈:→o
  • 双向箭头:
@startuml
Bob ->x Alice:信息丢失
Bob ->> Alice:细箭头
Bob -\ Alice:上半拉箭头
Bob --> Alice:虚线箭头
Bob ->o Alice:箭头加个圈
Bob <-> Alice:来而不往非礼也
Bob o<-> Alice:送礼到此为止
@enduml

BobAliceBobBobAliceAlice信息丢失细箭头上半拉箭头虚线箭头箭头加个圈来而不往非礼也送礼到此为止

在箭头的第一个字符后面通过[#颜色代码]可以修改箭头的颜色

@startuml
Bob -[#red]> Alice : hello
Alice -[#00ee00]-> Bob : ok
@enduml

BobAliceBobBobAliceAlicehellook

通过autonumber参数对消息自动编号。

@startuml
autonumber
Bob -> Alice : hello
Alice --> Bob : ok
@enduml

BobAliceBobBobAliceAlice1hello2ok

autonumber可以后跟参数,定义如下:

autonumber 起始数字 步长
@startuml
autonumber
Bob -> Alice : Blah Blah
Alice -> Bob : Blah Blah
autonumber 12
Bob -> Alice : Another Blah Blah
Alice -> Bob : Yet another Blah Blah
autonumber 24 5
Bob -> Alice : Yeh Yah
Alice -> Bob : Yeehah
Bob --> Alice : Seeya!
@enduml

BobAliceBobBobAliceAlice1Blah Blah2Blah Blah12Another Blah Blah13Yet another Blah Blah24Yeh Yah29Yeehah34Seeya!

后续参数可以使用双引号“ ”来定义编号的样式。样式采用JavaDecimalFormat类实现,也可以使用HTML标签定义。DecimalFormat0#都代表数字中的一位。

@startuml
autonumber "<i>0000</i>"
Alice -> Bob : Hello
Bob --> Alice : Ciao
autonumber 30 10 "<font color=cyan><u>000</u></font>"
Alice -> Bob : Ciao
Bob -> Alice : Hello
@enduml

AliceBobAliceAliceBobBob0001Hello0002Ciao030Ciao040Hello

autohumber后面可以跟随自动编号行为:autonumber resume/increment/stop表示继续或暂停自动编号。

@startuml
autonumber
Bob -> Alice : Hello
Alice -> Bob : Sorry for the interruption.
autonumber stop
Bob -> Alice : Hello?
autonumber resume
Alice -> Bob : OK I'm back.
@enduml

BobAliceBobBobAliceAlice1Hello2Sorry for the interruption.Hello?3OK I'm back.

代码功能
title标题
header页眉
footer页脚

使用newpage可以新建页面。

@startuml
title 标题
header 页眉
footer 页脚
Alice -> Bob : Hello
newpage
Bob --> Alice : Ciao
@enduml

标题标题AliceBobAliceAliceBobBobHello页眉页脚

消息组合有下面几种选项:

代码表述
alt/else表示多种情况
opt选项
loop循环
par参数
break中断
critical关键消息
group 自定义内容自定义群组

group后面的文本会定义为自定义分组的标题,也可以使用group 标题内容 [次级标签]来显示次级标签。

@startuml
攻击者 -> 服务器 : 认证请求
alt 成功情况
	服务器 -> 攻击者 : 认证通过
else 服务器拒绝
	服务器 -> 攻击者 : 认证失败
	group 攻击者操作 [做坏事记小本本上]
	攻击者 -> Log : 开始记录攻击日志
		loop 1000次
			攻击者 -> 服务器 : DDNS攻击
		end
	攻击者 -> Log : 结束记录攻击日志
	end
else 服务器识别攻击
	服务器 -> 攻击者 : 你丫在干啥?
end
@enduml

攻击者服务器Log攻击者攻击者服务器服务器LogLog认证请求alt[成功情况]认证通过[服务器拒绝]认证失败攻击者操作[做坏事记小本本上]开始记录攻击日志loop[1000次]DDNS攻击结束记录攻击日志[服务器识别攻击]你丫在干啥?

可以通过在消息后面添加note left或者note right添加消息注释。如果添加多行注释,可以直接输入文本而无需添加\n换行符,最后用end note注明结尾即可。

@startuml
客户端 -> 服务器 : SYN包
note left : 第一次握手
服务器 -> 客户端 : SYN+ACK
note right : 第二次握手
客户端 -> 服务器 : SYN+ACK+ACK
note left
第三次握手
TCP连接成功
end note
@enduml

客户端服务器客户端客户端服务器服务器SYN包第一次握手SYN+ACK第二次握手SYN+ACK+ACK第三次握手TCP连接成功

也可以在Participant上添加注释,使用note left of/right of/over的语法。也可以通过背景色来进行高亮。多行注释一样使用end note结束。

@startuml
participant Alice
participant Bob

note left of Alice #aqua
Alice is an explorer
She went underground
end note

note over Bob : He is another guy
@enduml

AliceBobAliceAliceBobBobAlice is an explorerShe went undergroundHe is another guy

注释框的形状也可以自行定义:hnote代表六边形(Hexagonal)的注释框,rnote代表矩形(Rectangle)注释框。

@startuml
参与者1 -> 参与者2 : 消息
hnote right : 六边形注释
参与者2 -> 参与者1 : 回应
rnote left : 矩形注释
@enduml

参与者1参与者2参与者1参与者1参与者2参与者2消息六边形注释回应矩形注释

note across用于在多个参与者之间建立备注:

@startuml
participant Alice
participant Bob
note across : We are here.
@enduml

AliceBobAliceAliceBobBobWe are here.

备注可以通过/字符进行同级对齐。

@startuml
participant Bob
participant Alice
note over Alice : An explorer
note over Bob : Another guy
note over Alice : She is clever
/ note over Bob : He is smart
@enduml

BobAliceBobBobAliceAliceAn explorerAnother guyShe is cleverHe is smart

PlantUML支持使用Creole和HTML标签对内容进行格式标记。

Creole是一种轻量化的标记语言,在多种Wiki系统中有应用。简单的语法如下:

语法描述
**Bold**加粗
//Italic//斜体
""Monospace""等宽字体
--Deleted--删除线
__Underline__下划线
~~Wave underline~~波浪下划线
* Item非编号条目
# Item编号条目
@startuml
Bob -> Alice : hello
note across
This is ~~written~~ in <img https://gooscloud.dscloud.me/wiki/lib/exe/fetch.php?media=wiki:dokuwiki-128.png>
end note
@enduml


@startuml
Bob -> Alice : hello
note across
This is ~~written~~ in
end note
@enduml

若时序图中的动作可以按照一定逻辑进行分组,可以使用== 标题 ==的样式对其进行分组。

@startuml
== 寒暄 ==
Bob -> Alice : Hello
Alice -> Bob : Ciao
== 实质交流 ==
Bob -> Alice : How much is a Linux OS?
Alice -> Bob : It's free of charge and free to use.
@enduml

BobAliceBobBobAliceAlice寒暄HelloCiao实质交流How much is a Linux OS?It's free of charge and free to use.

通过ref over实现引用。

@startuml
actor User
database "User List"
ref over User : Not an Administrator
User -> "User List" : Authorization
@enduml

UserUser ListUserUserUser ListUser ListrefNot an AdministratorAuthorization

通过表示延迟。也可以对延迟添加注释。

@startuml
actor 用户
客户端 -> 服务器 : 下载请求
服务器 -> 客户端 : 数据报头
...
服务器 ->x 客户端 : 中断
客户端 -> 服务器 : Heartbeat
...300秒无响应...
客户端 -> 用户 : 连接已中断
@enduml

用户用户用户客户端客户端客户端服务器服务器服务器用户用户客户端客户端服务器服务器下载请求数据报头中断Heartbeat300秒无响应连接已中断

使用|||插入间隔。也可以指定间隔的宽度,形式为||间隔距离||,单位为px

@startuml
Bob -> Alice : Hello
Alice -> Bob : Ciao
|||
Alice -> Bob : Bye!
||50||
Bob -> Alice : Seeya!
@enduml

BobAliceBobBobAliceAliceHelloCiaoBye!Seeya!

生命线是在参与者的时间线上表示参与者活动状态的组件。使用关键字activatedeactivate来表示参与者的活动状态,一旦激活生命线就会显示出来。destroy关键字用于表示参与者的终结。

活动状态的开启和关闭写在对应事件的下面

@startuml
title 删库跑路指南
actor 码农
database 用户数据库
database 生产数据库
码农 -> 用户数据库 : 用户认证
activate 码农
activate 用户数据库
用户数据库 -> 码农 : 认证通过Token
deactivate 用户数据库
activate 生产数据库
码农 -> 生产数据库 : Token
生产数据库 --> 码农 : Token有效认证
码农 -> 生产数据库 : DUMP指令
生产数据库 --> 码农 : DUMP指令警告,确认?
码农 -> 生产数据库 : 确认指令
生产数据库 --> 码农 : 指令执行通知
destroy 生产数据库
@enduml

删库跑路指南删库跑路指南码农用户数据库生产数据库码农用户数据库生产数据库码农码农用户数据库用户数据库生产数据库生产数据库码农用户数据库生产数据库用户认证认证通过TokenTokenToken有效认证DUMP指令DUMP指令警告,确认?确认指令指令执行通知

生命线可以嵌套和着色。

@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

AABUserABUserUserAABBAABDoWorkInternal call«createRequest»RequestCreatedDone

自动生命线使用autoactivate on参数激活,需要与return关键字配合使用。return会产生一个指向最近激活生命线的参与者的返回标签。

@startuml
autoactivate on
Bob -> Alice : hello
return bye
@enduml

AliceBobAliceBobBobAliceAliceAlicehellobye

可以在某个参与者第一次收到消息前使用create关键字,强调本次消息创建了一个新对象。

@startuml
title 重建数据库
actor 另一个码农
database 用户数据库
database 生产数据库
autoactivate on

另一个码农 -> 用户数据库 : 用户认证
return 认证通过Token
create 生产数据库
另一个码农 -> 生产数据库 : CREATE
return 执行成功
@enduml

重建数据库重建数据库用户数据库生产数据库另一个码农用户数据库生产数据库另一个码农另一个码农用户数据库用户数据库生产数据库用户数据库生产数据库用户认证认证通过TokenCREATE生产数据库执行成功

激活(activate)、中止(deactivate)、创建(create)与摧毁(destroy)可以使用下列快捷语法来实现:

++ = activate
-- = deactivate
** = create
!! = destroy

使用方括号[]代表图示左侧和右侧,其余和常规写法一样。使用?→表示短箭头。

@startuml
[-> 销售 : 订单
activate 销售
销售 -> 设计 : 产品需求
activate 设计
?-> 设计 : 其他
设计 -> 制造 : 工艺设计
deactivate 设计
activate 制造
制造 ->] : 外包
]-> 制造 : 外包组件
制造 -> 销售 : 产品
deactivate 制造
销售 ->[ : 产品
deactivate 销售
@enduml

销售设计制造销售设计制造销售销售设计设计制造制造销售设计制造订单产品需求其他工艺设计外包外包组件产品产品

使用teoz关键字表示锚定的特殊时间段。

@startuml
!pragma teoz true
{上班} 社畜 -> 公司 : 打卡
|||
{下班} 公司 -> 社畜 : 打卡
{上班} <-> {下班} : 8小时
@enduml

8小时社畜公司社畜公司社畜公司打卡打卡8小时

使用«»为参与者添加构造类型。在构造类型中使用(参数,颜色)来制定特定的图标。

@startuml
participant "参与者" as par <<Participant>>
participant "组织者" as org <<(A,white)>>

par -> org : 申请
return 确认
@enduml

<<Participant>>A «Participant»参与者«Participant»参与者组织者组织者申请确认

可以使用boxend box画一个将参与者包裹起来的盒子,box关键字后也可以添加标题和背景颜色。

@startuml
autoactivate on
participant 销售
box "本部" #lightblue
participant 设计
participant 制造
end box

销售 -> 设计 : 产品需求
设计 -> 制造 : 工艺
制造 -> 销售 : 产品
@enduml

本部销售设计制造销售设计制造销售销售设计设计制造制造销售设计制造产品需求工艺产品

使用hide footbox可以移除下方的参与者标注。

@startuml
hide footbox
Bob -> Alice : hello
Alice -> Bob : ciao
@enduml

BobAliceBobAlicehellociao

使用skinparam关键字定义时序图的外观样式。

@startuml

skinparam handwritten true
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

Please use '!option handwritten true' to enable handwritten<u>First Class<u>Second Class<u>Last Class<u>User<u>First Class<u>Second Class<u>Last ClassUserUserFirst ClassFirst ClassSecond ClassSecond ClassLast ClassLast Class<u>First Class<u>Second Class<u>Last ClassDoWorkCreateRequestDoWorkWorkDoneRequestCreatedDone

@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

Foo1Foo2Alice1Alice2Bob1Bob2OutAlice1Alice1Alice2Alice2Bob1Bob1Bob2Bob2OutOuthelloout

  • plantuml/时序图.txt
  • 最后更改: 2023/02/14 11:12
  • Ian Goo