【Tool】UML时序图详解及Markdown语法

liupjie
4,165 阅读3分钟

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

序列图根据时间序列展示对象如何进行协作。它展示了在用例的特定场景中，对象如何与其他对象交互。

元素

UML时序图在Markdown语法中固定以sequenceDiagram开头。

image.png

参与者/角色

  • 参与者/角色（Participants/Actors）可以隐式声明，也可以显式声明，它们的顺序与在代码中声明的顺序一致。
  • 隐式声明
老板->>小明: 你好
小明-->>老板: 你好
老板-)小明: 请你出去

sequenceDiagram
老板->>小明: 你好
小明-->>老板: 你好
老板-)小明: 请你出去
  • 显式声明
participant 老板
participant 小明
老板->>小明: 你好
小明-->>老板: 你好
老板-)小明: 请你出去

sequenceDiagram
participant 老板
participant 小明
老板->>小明: 你好
小明-->>老板: 你好
老板-)小明: 请你出去

别名

  • 我们可以给参与者起一个方便的别名as，在之后只需要使用别名即可。
participant B as 老板
participant M as 小明
B->>M: 你好
M-->>B: 你好
B-)M: 请你出去

sequenceDiagram
participant B as 老板
participant M as 小明
B->>M: 你好
M-->>B: 你好
B-)M: 请你出去

消息

  • 消息线可以由实线和虚线来表示。 |类型|描述| |:---:|:---:| |->|没有箭头的实线| |-->|没有箭头的虚线| |->>|有箭头的实线| |-->>|有箭头的虚线| |-x|末端有十字叉的实线| |--x|末端有十字叉的虚线| |-)|带有打开箭头的实线| |--)|带有打开箭头的虚线|
participant B as 老板
participant M as 小明
B -> M: 你好
B --> M: 你好
B ->> M: 你好
B -->> M: 你好
B ->> M: 你好
B -x M:你好
B --x M:你好
B -) M:你好
M --) B:gun

sequenceDiagram
participant B as 老板
participant M as 小明
B -> M: 你好
B --> M: 你好
B ->> M: 你好
B -->> M: 你好
B ->> M: 你好
B -x M:你好
B --x M:你好
B -) M:你好
M --) B:gun

激活

  • 激活角色或者使角色失活。
  • 使用activate/deactivate实现
participant B as 老板
participant M as 小明
B -> M: 你好
B --> M: 你好
B -) M:你好
activate M
M --) B:gun
deactivate M

sequenceDiagram
participant B as 老板
participant M as 小明
B -> M: 你好
B --> M: 你好
B -) M:你好
activate M
M --) B:gun
deactivate M
  • 在消息箭头后使用+/-来实现
participant B as 老板
participant M as 小明
B -> M: 你好
B --> M: 你好
B -) M:你好
activate M
M --) B:gun
deactivate M

sequenceDiagram
participant B as 老板
participant M as 小明
B-> M: 你好
B-->+ M: 你好
B -) M:你好
M --)- B:gun
  • 同一个角色重复激活
participant B as 老板
participant M as 小明
B ->+ M: 你好
B -)+ M:你好
M -->- B: 你好
M --)- B:gun

sequenceDiagram
participant B as 老板
participant M as 小明
B ->+ M: 你好
B -)+ M:你好
M -->- B: 你好
M --)- B:gun

说明

  • 为时序图添加一个说明Note，可以通过指定方向来定制说明的位置
  • 左（left of）、右（right of）、跨越（over）
participant B as 老板
Note left of B: 暴发户
participant M as 小明
Note right of M:董事长的亲孙子
Note over B,M : 相亲相爱一家人
B ->+ M: 你好
B -)+ M:你好
M -->- B: 你好
M --)- B:gun

sequenceDiagram
participant B as 老板
Note left of B: 暴发户
participant M as 小明
Note right of M:董事长的亲孙子
Note over B,M : 相亲相爱一家人
B ->+ M: 你好
B -)+ M:你好
M -->- B: 你好
M --)- B:gun

循环

  • 表示一个循环loop...end
participant B as 老板
Note left of B: 暴发户
participant M as 小明
Note right of M:董事长的亲孙子
B ->> M: 你好
M -) B:我爷爷是董事长
loop 每小时一次
B -) M : baba
end
M --) B:gun
B -) M : 好勒

sequenceDiagram
participant B as 老板
Note left of B: 暴发户
participant M as 小明
Note right of M:董事长的亲孙子
B ->> M: 你好
M -) B:我爷爷是董事长
loop 每小时一次
B -) M : baba
end
M --) B:gun
B -) M : 好勒

选择

  • 在时序图中表示选择，使用alt...else..end来表示。
  • 若是没有else的选择，可以使用opt来表示。
participant B as 老板
participant M as 小明
B ->> M: 你爷爷是董事长吗？
alt 是的
M -) B:我爷爷是董事长
else 不是
M -) B:我爷爷不是董事长
end
opt 额外回复
M --) B:想干嘛？
end
B -) M : 没事，就问问

sequenceDiagram
participant B as 老板
participant M as 小明
B ->> M: 你爷爷是董事长吗？
alt 是的
M -) B:我爷爷是董事长
else 不是
M -) B:我爷爷不是董事长
end
opt 额外回复
M --) B:想干嘛？
end
B -) M : 没事，就问问

并行

  • 表示并行发生，使用par...and...end

  • 单层并行

par A to B
A->>B: hello,B
and A to C
A->>C: hello,C
end
C-->>A: hello A
B-->>A: hello A

sequenceDiagram
par A to B
A->>B: hello,B
and A to C
A->>C: hello,C
end
C-->>A: hello A
B-->>A: hello A
  • 嵌套并行
par A to B
A->>B: hello,B
and A to C
A->>C: hello,C

par C to D
C-)D:hello D
and C to E
C-)E:hello E
end

end
C-->>A: hello A
B-->>A: hello A
D--)C: hello C
E--)C: hello C

sequenceDiagram
par A to B
A->>B: hello,B
and A to C
A->>C: hello,C

par C to D
C-)D:hello D
and C to E
C-)E:hello E
end

end
C-->>A: hello A
B-->>A: hello A
D--)C: hello C
E--)C: hello C

背景高亮

  • 使用rect...end实现，颜色可以使用CSS的颜色名称,RGB,HEX,HSL,RGBA,HSLA值来指定。
participant B as 老板
participant M as 小明
rect yellow
B ->> M: 你好
rect rgb(255,0,0)
M -) B:我爷爷是董事长
M --) B:gun
end
B -) M : 好勒
end

sequenceDiagram
participant B as 老板
participant M as 小明
rect yellow
B ->> M: 你好
rect rgb(255,0,0)
M -) B:我爷爷是董事长
M --) B:gun
end
B -) M : 好勒
end

序列号

  • 使用autonumber来自动生成序列号
autonumber
participant B as 老板
participant M as 小明
B ->> M: 你好
M -) B:我爷爷是董事长
M --) B:gun
B -) M : 好勒

sequenceDiagram
autonumber
participant B as 老板
participant M as 小明
B ->> M: 你好
M -) B:我爷爷是董事长
M --) B:gun
B -) M : 好勒

以上便是UML时序图的介绍，以及相关的Markdown语法。

avatar
文章
阅读
粉丝