时序图 sequenceDiagram
时序图中的事件和信息依找上下关系依次发生
一个简单的例子:
sequenceDiagram
王大爷->>李大婶: 早啊!
李大婶->>王大爷: 早!
可以看到,上下关系标志着发生前后的顺序关系
参与者 participants
时序图中的参与者可以单独定义,也可以自动识别,效果是一样的,单独定义一般是要取别名的情况,取别名的方法也在下面例子中提到:
sequenceDiagram
participant A as 王大爷
participant B as 李大婶
%% 以下可以直接用别名替代
A->>B: 早啊!
B->>A: 早!
sequenceDiagram
王大爷->>李大婶: 早啊!
李大婶->>王大爷: 早!
沟通线形 types of arrows
There are six types of arrows currently supported:
Type | Description |
---|---|
-> | Solid line without arrow |
--> | Dotted line without arrow |
->> | Solid line with arrowhead |
-->> | Dotted line with arrowhead |
-x | Solid line with a cross at the end |
--x | Dotted line with a cross at the end. |
-) | Solid line with an open arrow at the end (async) |
--) | Dotted line with a open arrow at the end (async) |
激活 activate
用activate 和 deactivate 来标记激活区域
sequenceDiagram
participant A as 老板
participant B as 员工
participant C as 老婆
A ->> B : 把这个事情做一下
activate B
B ->> A : 老板,我干完了!
A ->> B : 再把这个事情做一下
B ->> A : 老板,我干完了!
A ->> B : 行,下班吧
deactivate B
B ->> C : 媳妇我下班啦
激活是可以重复的
sequenceDiagram
participant 测试
participant 开发
participant 产品经理
产品经理 ->> 开发 : 这个功能实现一下
activate 开发
开发 ->> 产品经理 : 知道了
测试 ->> 开发 : 这个BUG改一下
activate 开发
开发 ->> 测试 : 恩,我知道了,等着吧
开发 ->> 测试 : 改完了,你看看
deactivate 开发
开发 ->> 产品经理 : 搞完了
deactivate 开发
可以用在箭头符号后加上+
和-
的方法来标志激活状态,但是要注意,+
号是使得接收者的状态被激活,-
号是指发出者的状态被取消(此时发出者必须有状态可以被取消,不然会发生语法错误),举例如下:
sequenceDiagram
A -->>+ B : TEXT
A -->> B : TEXT
B -->>- A : TEXT
B -->> A : TEXT
标签 Notes
可以在参加者旁边附上标签,语法为 Note
+ right of / left of
+ participant
sequenceDiagram
participant 柯南
Note right of 柯南: 永远长不大
Note left of 柯南: 走哪哪有事
Note right of 柯南: 神力足球
也可以创建横跨两个参加者的Notes,语法为
Note
over
participant1,participanrt2 : 内容
如果想横跨多个参加者,选取最外侧的两个参加者即可
sequenceDiagram
participant A
participant B
participant C
Note over A,C : this is a note
A ->> C : where is the note?
循环 LOOP
语法为
- loop + 提示语
- 循环内容
- end
sequenceDiagram
loop 每一个小时问一次
黄牛->>顾客: 票子要不啦
end
替换项和可选项 alt opt
替换项alt表示在框内选择一种可能发生的情况
可选项opt表示一种可能发生的情况
基本类似上述loop的语法,所以只做示范
sequenceDiagram
participant A as 医生
Note left of A : 某些部分庸医
participant B as 患者
A ->> B : 请问你有什么状况?
%% alt 的用法
alt 咳嗽
B ->> A : 我觉得嗓子不太舒服
A ->> B: 那你去拍个片子吧
else 腹泻
B ->> A : 我觉得肚子不太舒服、
A ->> B: 那你去拍个片子吧
else 耳鸣
B ->> A : 我觉得耳朵不太舒服
A ->> B: 那你去拍个片子吧
end
%% opt 的用法
opt 反正就是拍片子
A ->> B: 那你去拍个片子吧
end
并行项 Parallel
表示同时发生的事情,框内事件同时发生,不存在先后关系
- par + 提示语
- 事件1
- 事件2
- ……
- and + 提示语
- 事件1
- 事件2
- ……
- end
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
并行项可以嵌套
sequenceDiagram
par 主管 吩咐 副主管
主管->>副主管: 我的助理来帮你,今天给我做完
and 主管 吩咐 助理
主管->>助理: 你去帮副主管处理一下
par 副主管 吩咐 开发
副主管->>开发: 今天把这个需求实现一下
and 副主管 吩咐 测试
副主管->>测试: 准备测试一下原型
end
end
开发 -->> 测试 : 第一版原型写好了,你测一下
par 测试 怒骂 开发
测试 -->> 开发 : 你搁着写BUG呢?
and 测试 报告 副主管
测试 -->> 副主管 : 这开发真不行,早点开了, 我来干
and 测试 报告 主管
测试 -->> 主管 : 这开发真不行,早点开了,我来干
end
背景高亮 Background Highlighting
改变某些区域的颜色,语法如下
- rect rgb(XXX,XXX,XXX)
- 内容
- end
举例如下
sequenceDiagram
participant A as 老板
participant B as 员工
rect rgb(191, 223, 255)
note right of A : 老板对员工的问询
A -->> B : 任务完成了吗
B -->> A : 还没完成
rect rgb(200, 150, 255)
note left of B : 员工对老板的解释
B -->> A : 主要是需求太复杂
end
end
注释 comments
和流程图的注释一样,可以参考,用%%开头
流程图序号 SequenceDiagramNumbers
用autonumber命令给流程图中的对话自动编号
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
相关资料
其他教程链接:
【Mermaid 语法详细教程 01】 流程图(Flowchart / graph)_NoEatMe的博客-CSDN博客
主要参考Mermaid官方文档:
Sequence diagrams | Mermaid