前言

Github:https://github.com/HealerJean

博客:http://blog.healerjean.com

参考:https://plantuml.com/zh/sequence-diagram

1、声明参与者

1.1、参与者配置

@startuml

participant   流程框
actor         角色
boundary      边界
control       控制
entity        实体
database      数据库
collections   集合
queue         队列

@enduml

image-20230111155203348

1.2、背景色

@startuml

participant   流程框 #red
actor         角色   #yellow
boundary      边界   #blue
control       控制   #gray
entity        实体  
database      数据库
collections   集合
queue         队列

@enduml

image-20230111155355473

1.3、参与者顺序

使用 order 关键字来定制参与者的显示顺序。

@startuml

participant   流程框 order 1 #red
actor         角色   order 2 #yellow
boundary      边界   order 3  #blue
control       控制   order 4 #gray
entity        实体   order 5
database      数据库 order 6
collections   集合   order 7
queue         队列   order 8

@enduml


image-20230111155555976

2、消息和箭头

2.1、文本对齐

箭头上的文本对齐可以用 skinparam sequenceMessageAlign,后接参数left,rightcenter

@startuml

skinparam sequenceMessageAlign right

participant 老板
participant 员工

老板 -> 老板 : 今天表扬谁呢
老板 -> 员工 : 干的不错
员工 -> 老板 : 谢谢老板

@enduml

image-20230111160152103

2.2、响应信息显示在箭头下面

skinparam responseMessageBelowArrow true命令,让响应信息显示在箭头下面。

@startuml

skinparam sequenceMessageAlign right
skinparam responseMessageBelowArrow true

participant 老板
participant 员工

老板 -> 老板 : 今天表扬谁呢
老板 -> 员工 : 干的不错
员工 -> 老板 : 谢谢老板

@enduml

image-20230111160319168

2.3、箭头

@startuml

skinparam sequenceMessageAlign center

participant 老板
participant 员工

老板 ->x 员工 : 添加最后的x 表示丢失的信息
老板 -> 员工 :  普通箭头(加黑)
老板 ->> 员工 : 普通箭头(不加黑)
老板 -\ 员工 :  箭头(上面黑)
老板 -/ 员工 :  箭头(下面黑)

老板 ->o 员工 :  在箭头后面加一个o

老板 <-> 员工 :  双线箭头


老板 -->    员工 :  响应 虚线带有箭头(加黑)
老板 -->>   员工 :  响应 虚线带有箭(不加黑)
老板 <--> 员工 :    箭头双线箭头(不加黑)
老板 <<-->> 员工 :  箭头双线箭头(不加黑)

@enduml

image-20230111161229009

2.3.1、修改箭头颜色

@startuml

skinparam sequenceMessageAlign center

participant 老板
participant 员工

老板 -[#red]> 员工 :  普通箭头(加黑)
老板 -[#yellow]> 员工 :  普通箭头(加黑)
老板 -[#blue]> 员工 :  普通箭头(加黑)
老板 -[#gray]> 员工 :  普通箭头(加黑)


@enduml

image-20230111161426737

2.4、对消息进行编号

@startuml

skinparam sequenceMessageAlign center

participant 老板
participant 员工

autonumber
老板 -> 员工 :  普通箭头(加黑)
老板 -> 员工 :  普通箭头(加黑)

autonumber 2
老板 -> 员工 :  普通箭头(加黑)
老板 -> 员工 :  普通箭头(加黑)

@enduml

image-20230111161535221

3、页面标题、眉角、页脚

@startuml

header 页眉毛
footer 页脚
title 页面标题

skinparam sequenceMessageAlign center

participant 老板
participant 员工

autonumber
老板 -> 员工 :  普通箭头(加黑)
老板 -> 员工 :  普通箭头(加黑)


@enduml

4、生命线

++ 激活目标(可选择在后面加上#color

-- 撤销激活源

** 创建目标实例

!! 摧毁目标实例

4.1、普通生命线

@startuml


title 页面标题
autonumber
skinparam sequenceMessageAlign center

participant 老板
participant 小王员工
participant 小张同事


老板 -> 小王员工 ++ :  小张最近在干嘛呢

小王员工 ->  小张同事 ++ : 你最近干嘛呢
小张同事 --> 小王员工 -- : 最近准备准备,随时跑路

小王员工 ->  小张同事 ++ : 为啥呢
小张同事 --> 小王员工 -- : 哎,不涨薪呗

小王员工 --> 老板 : 完蛋了,小张准备跑路了,还不告诉我
@enduml

image-20230111165050910

4.2、嵌套的生命线

@startuml


title 页面标题

skinparam sequenceMessageAlign center

participant 老板
participant 小王员工
participant 小张同事

autonumber 1
老板 -> 小王员工 ++ :  小张最近在干嘛呢


autonumber 1
小王员工 ->  小王员工 ++-- : 老板依然问了,我打听下吧

小王员工 -> 小张同事 ++ : 最近干嘛呢
小张同事 --> 小王员工 -- : 准备跑路了

小王员工 -> 小王员工 ++-- : 我要告诉老板

autonumber 2
小王员工 --> 老板 -- : 完蛋了,小张准备跑路了,还不告诉我

老板 -> 小王员工 ++ : 帮我问下他去哪里高就
小王员工 -> 小张同事 --++ : 告诉我你去哪里
小张同事 ->  老板 !! : 我去哪里关你老板屁事

@enduml

image-20230111173938796

4.3、添加颜色

@startuml


title 页面标题

skinparam sequenceMessageAlign center
autonumber

participant 老板
participant 小王员工
participant 小张同事

p
老板 -> 小王员工 ++ #red :  小张最近在干嘛呢


小王员工 -> 小张同事 --++ #gray: 最近干嘛呢

小张同事 --> 老板 -- : 准备跑路了
@enduml

image-20230111170106544

5、填充区设置

@startuml

skinparam sequenceMessageAlign center
skinparam BoxPadding 20
skinparam ParticipantPadding 10

box '公司'
title 页面标题
autonumber

participant 老板
participant 小王员工
participant 小张同事


老板 -> 小王员工 ++ #red :  小张最近在干嘛呢

小王员工 -> 小张同事 --++ #gray: 最近干嘛呢
小张同事 --> 老板 -- : 准备跑路了
小王员工 -> 爸爸 ++ : 在家里我是爸爸
end box



box '家庭'
autonumber
participant 爸爸
participant 妈妈
participant 儿子

爸爸 -> 妈妈 ++  :  家长会今天去了吗?
妈妈 -> 儿子 --++ : 今天家长会?
儿子 --> 爸爸 --: 爸爸,我骗你的,没有家长会
end box
@enduml

image-20230111172246853

6、注释

@startuml

skinparam sequenceMessageAlign center
autonumber
participant 爸爸
participant 妈妈
participant 儿子

note left of 爸爸 : 我是爸爸
note left of 妈妈 : 我是妈妈
note right of 儿子: 我是妈妈
note over  爸爸,儿子 : 咱们是父子

爸爸 -> 妈妈 ++  :  家长会今天去了吗?

妈妈 -> 儿子 --++ : 今天家长会?

儿子 --> 爸爸 --: 爸爸,我骗你的,没有家长会
@enduml

image-20230111172937264

7、组合消息(函数)

7.1、alt / ( if | else )

@startuml

skinparam sequenceMessageAlign center
autonumber
participant 土豪
participant 取款机

土豪 -> 取款机 : 查询余额
取款机 --> 土豪 : 余额

alt 余额 > 5000
土豪 -> 取款机 : 取上限值 5000 

else 5000 < 余额 < 100
土豪 -> 取款机 : 有多少取多少

else 余额 < 100
    土豪 -> 取款机 : 退卡
end

取款机 -->> 土豪 : 退卡
@enduml

image-20230111173221166

7.2、Par 并行

@startuml

skinparam sequenceMessageAlign center
autonumber
participant 老板
participant 员工

老板 ->  员工  ++ : 开始实行996

par 并行
autonumber 1
员工 -> 员工 ++-- : 刷微博
员工 -> 员工 ++-- : 工作
员工 -> 员工 ++-- : 打游戏
end

autonumber 2
员工 --> 老板 : 9点下班
@enduml

image-20230111173710562

ContactAuthor