【MarkerDown】CSDN Markdown之时序图sequenceDiagram详解
CSDN Markdown之时序图sequenceDiagram详解
- 序列图 sequenceDiagram
- 参与者与组
-
- 参与者 participant
- 拟人符号 actor
- 别名 as
- 组 box
- 消息(连线)
- 激活/失活 activate/deactivate
- 备注 Note
- 循环 loop
- 备选 Alt
- 并行 par
- 临界区 critical
- 中断 break
- 背景高亮 rect
- 注释 %%
- 转义字符的实体代码
- 序号 autonumber
- 人物菜单 link
-
- 高级菜单语法 links
- 样式
-
- 使用的部分类
- 表单示例
- 配置
-
- 可能的配置参数:
序列图 sequenceDiagram
序列图是一种交互图，显示进程如何相互操作以及按什么顺序操作。
Mermaid 可以渲染序列图.
代码:
```mermaid
sequenceDiagram
张三->>李四: 李女士, 最近过得好吗?
李四–>>张三: 我很好!
张三-)李四: 待会见!
```
备注：
注意事项:由于mermaid 语言的脚本编写方式，end一词可能会破坏图表。
如果必须使用end作为文本，必须使用括号()、引号""或方括号{},[]将单词end括起来。即：(end), [end], {end}.
参与者与组
参与者 participant
参与者可以像本页的第一个示例中那样被隐式定义。参与者或人物在图表源文本中会隐式按交互记录顺序依次呈现。有时，您可能希望参与者不按交互记录依次呈现。可以通过以下操作指定演员的出场顺序：
代码:
mermaid sequenceDiagram participant 张三 participant 李四 张三->>李四: 你好，李女士！ 李四->>张三: 你好，张先生！
拟人符号 actor
如果您特别想使用actor符号替换掉带文本的矩形框，可以按照下面的说明来书写actor语句。
代码:
mermaid sequenceDiagram actor 张三 actor 李四 张三->>李四: 李女士，您好！ 李四->>张三: 张先生，您好！
别名 as
参与者可以有个变量名和描述性的标签名
代码:
mermaid sequenceDiagram participant A as 张三 participant B as 李四 A->>B: 李女士, 最近过得好吗? B->>A: 嗯，我很好!
组 box
参与者可以分组在垂直框中。您可以使用以下符号定义颜色（如果没有设置颜色，则默认为透明）。
box Aqua 组描述
... 参与者...
end
box 没有设置颜色的组
... 参与者...
end
box rgb(33,66,99)
... 参与者...
end
如果你的组名是一种颜色，你可以强制设置组的颜色为transparent透明
box transparent Aqua
... 参与者...
end
代码:
sequenceDiagram
box Purple 张三 & 李四
participant 张三
participant 李四
end
box 另外一组
participant 王五
participant 赵六
end
张三->>李四: 李女士,最近身体怎么样?
李四->>张三: 我很好!
张三->>王五: 王先生, 赵女士怎么样了?
王五->>赵六: 赵女士,最近身体怎么样?
消息(连线)
消息有两种显示形式，既可以显示在实线上，也可以显示在虚线上
[Actor][Arrow][Actor]:Message text
目前支持八种类型的连接线:
| 类型 | 描述 |
|---|---|
| -> | 没有箭头的实线 |
| –> | 没有箭头的虚线 |
| ->> | 带箭头的实线 |
| –>> | 带箭头的虚线 |
| -x | 末端带有×的实线 |
| –x | 末端带有×的虚线 |
| -) | 末端带有开放箭头的实线 (异步) |
| –) | 末端带有开放箭头的虚线 (异步) |
激活/失活 activate/deactivate
可以标识参与者对话的开始与结束。(de)activation 语法如下：
代码:
mermaid sequenceDiagram 张三->>李四: 李女士, 最近过得好吗? activate 李四 李四-->>张三: 嗯，我很好! deactivate 李四
还有一种快捷方式表示法，在消息箭头后加上+/-后缀：
代码:
mermaid sequenceDiagram 张三->>+李四: 李女士, 最近过得好吗? 李四-->>-张三: 嗯，我很好!
同一参与者可以进行堆叠激活:
代码:
mermaid sequenceDiagram 张三->>+李四: 李女士, 最近过得好吗? 张三->>+李四: 李女士, 你能听到我说话吗? 李四-->>-张三: 张先生，你好，我能听见你说话! 李四-->>-张三: 我过得非常好!
备注 Note
你可以在序列图中添加备注。这是通过以下语句实现：
Note [ right of | left of | over ] [Actor]: 备注内容中的文本
请参阅下面的示例:
代码:
mermaid sequenceDiagram participant 张三 Note right of 张三: 备注中的文本
还可以创建跨越两个参与者的备注：
代码:
mermaid sequenceDiagram 张三->李四: 李女士, 最近过得好吗? Note over 张三,李四: 常见的互动
还可以添加换行符（通常适用于文本输入）：
代码:
mermaid sequenceDiagram 张三->李四: 李女士, 最近过得好吗? Note over 张三,李四: 常见的互动
这是第二行的备注
循环 loop
可以在序列图中表示循环。这是通过以下语句实现：
loop 循环文本
... 参与者交互记录 ...
end
请参阅下面的示例:
代码:
mermaid sequenceDiagram 张三->李四: 李女士, 最近过得好吗? loop 每分钟问一次 李四-->张三: 嗯，我很好! end
备选 Alt
可以在序列图中表示条件 ，这是通过以下语句实现：
alt 描述文本
... 参与者交互记录...
else 描述文本
... 参与者交互记录...
end
或者需要表示一个可以选的序列内容(else).
opt 描述文本
... 参与者交互记录...
end
请参阅下面的示例:
代码:
mermaid sequenceDiagram 张三->>李四: 李女士, 最近过得好吗? alt 身体抱恙 李四->>张三: 无精打采 ┭┮﹏┭┮ else 身体健康 李四->>张三: 感觉神清气爽 end opt 额外的回答 李四->>张三: 谢谢关心 end
并行 par
可以序列图中显示并行的交互记录信息。
这是通过以下语句实现：
par [行为 1]
... 参与者交互记录...
and [行为 2]
... 参与者交互记录...
and [行为 N]
... 参与者交互记录...
end
请参阅下面的示例:
代码:
mermaid sequenceDiagram par 张三对李四说 张三 ->>李四: 大家好! and 张三对王五说 张三 ->>王五: 大家好! end 李四-->>张三 : 你好，张先生! 王五-->>张三 : 你好，张先生!
可以对多个并行进行嵌套.
代码:
临界区 critical
可以显示必须触发的事件，然后通过不同的触发事件做不同的处理
可以通过以下语句实现：
critical [一定触发的事件]
... 参与者交互记录...
option [触发事件 A]
... 参与者交互记录...
option [触发事件 B]
... 参与者交互记录...
end
请参阅下面的示例:
代码:
sequenceDiagram
critical 建立与数据库的连接
服务-->数据库: 连接
option 网络超时
服务-->服务: 记录错误
option 凭据被拒绝
服务-->服务: 记录不同的错误
end
也有可能根本没有选择
代码:
sequenceDiagram
critical 建立与数据库的连接
服务-->数据库: 连接
end
这个临界区也可以嵌套，相当于上面看到的par语句。
中断 break
可以在序列图表示中断参与者交互 (通常对异常进行处理).
可以通过以下语句实现：
break [触发条件]
... 参与者交互记录...
end
请参阅下面的示例:
代码:
sequenceDiagram
消费者-->接口: 预定一些东西
接口-->预订服务: 开始预订流程
break 当预订过程失败时
接口-->消费者: 显示故障
end
接口-->计费服务: 启动计费过程
背景高亮 rect
你可以通过rect设置颜色来高亮交互记录的背景。
这是通过以下语句实现：
颜色使用rgb和rgba语法进行定义。.
rect rgb(0, 255, 0)
... 参与者交互记录...
end
rect rgba(0, 0, 255, .1)
... 参与者交互记录 ...
end
请参阅下面的示例:
代码:
```mermaid
sequenceDiagram
participant 张三
participant 李四
rect rgb(191, 223, 255)
note right of 张三: 张三 calls 李四.
张三->>+李四: 李女士, 最近过得好吗?
rect rgb(200, 150, 255)
张三->>+李四: 李女士, 你能听到我说话吗?
李四-->>-张三: 张先生，你好，我能听见你说话!
end
李四-->>-张三: 我过得非常好!
end
张三 ->>+ 李四: 你今晚想去看电影吗？
李四-->>- 张三: 好的，电影院见.
```
注释 %%
可以在序列图中加入注释，解下器将忽略这些注释，注释必须在所注释代码之上且必须以%%（双百分号）开头。注释这行还是到下一行的任何文本都会被视作为注释，包括任何图表语句。
代码:
mermaid sequenceDiagram 张三->>李四: 李女士, 最近过得好吗? %% 这是一个注释 李四-->>张三: 我过得非常好!
转义字符的实体代码
可以使用下面示例的语句来转义字符。
代码:
mermaid sequenceDiagram 张三->>李四: 我 #35; 你! 李四->>张三: 我 #9829; 你 #infin; 倍!;
实体代码是以16进制进行编码的, 所以#字符 可以用 #35;进行编码。 还支持使用HTML字符名称。
因为;(分号)可以替换换行符放在信息结尾，直接放在文本中间将不会被解析器识别，所以如果文本中需要包含;(分号)请使用#59;来代替。
序号 autonumber
可以在序列图中的每个连线上附加一个序列号。将mermaid 添加到网站时，可以进行如下配置：
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>
你可以通过序列图中的autonumber关键字打开此功能.
代码:
mermaid sequenceDiagram autonumber 张三->>李四: 李女士,最近身体好吗? loop 体检 李四->>李四: 与病魔斗争 end Note right of 李四: 理性思考! 李四-->>张三: 我很好! 李四->>王五: 你现在身体是怎么样? 王五-->>李四: 我身体非常好!
人物菜单 link
人物可以有弹出菜单，其中包含指向关于此人物得外部链接。
这可以通过添加一个或多个链接行进行配置，格式为：
link : @
代码:
mermaid sequenceDiagram participant 张三 participant 李四 link 张三: 平台 @ https://dashboard.contoso.com/张三 link 张三: 百科 @ https://baike.baidu.com/item/张三/76379 link 李四: 平台 @ https://dashboard.contoso.com/李四 link 李四: 百科 @ https://baike.baidu.com/item/李四/37113 张三->>李四: 李女士,最近身体好吗? 李四-->>张三: 我很好! 张三-)李四: 待会见!
高级菜单语法 links
有一种高级语法依赖于JSON格式。如果您习惯使用JSON格式，刚好它也支持JSON语法。
可以通过以下格式添加链接：
links :
请参阅下面的示例:
代码:
mermaid sequenceDiagram participant 张三 participant 李四 links 张三: {"平台": "https://dashboard.contoso.com/张三", "百科": "https://baike.baidu.com/item/张三/76379"} links 李四: {"平台": "https://dashboard.contoso.com/张三", "百科": "https://baike.baidu.com/item/李四/37113"} 张三->>李四: 李女士,最近身体好吗? 李四-->>张三: 我很好! 张三-)李四: 待会见!
样式
序列图的样式是通过定义许多css类来定义。以下类是从src/themes/ssequence.scss文件中提取的。
使用的部分类
| 类 | 描述 |
|---|---|
| actor | 图表顶部参与者文本框的样式 |
| text.actor | 图表顶部参与者文本框中的文本样式。 |
| actor-line | 参与者竖线. |
| messageLine0 | 消息实线样式 |
| messageLine1 | 消息虚线样式 |
| messageText | 消息连接上文本样式 |
| labelBox | 定义循环左侧标签框样式 |
| labelText | 循环标签中文本的样式 |
| loopText | 循环款中文本的样式 |
| loopLine | 定义循环框中直线的样式 |
| note | 备注框的样式。 |
| noteText | 备注框中的文本样式。 |
表单示例
body {
background: white;
}
.actor {
stroke: #ccccff;
fill: #ececff;
}
text.actor {
fill: black;
stroke: none;
font-family: Helvetica;
}
.actor-line {
stroke: grey;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: black;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: black;
}
#arrowhead {
fill: black;
}
.messageText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
.labelBox {
stroke: #ccccff;
fill: #ececff;
}
.labelText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: #ccccff;
}
.note {
stroke: #decc93;
fill: #fff5ad;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
配置
可以调整用于渲染序列图的边距。
这是通过定义 mermaid.sequenceConfig 或CLI在配置中使用json文件来完成的。mermaidCLI 页中介绍了如何使用CLI。mermaid.sequenceConfig可以设置为带有配置参数的JSON字符串或相应的对象。
mermaid.sequenceConfig = {
diagramMarginX: 50,
diagramMarginY: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
mirrorActors: true,
};
可能的配置参数:
| 参数 | 描述 | 默认值 |
|---|---|---|
| mirrorActors | 打开/关闭图表下方和上方参与者的渲染 | false |
| bottomMarginAdj | 调整图形向下结束的距离。 带有css的宽边框样式可能会生成不需要的剪裁，这就是为什么存在此配置参数的原因。 | 1 |
| actorFontSize | 设置参与者描述的字体大小 | 14 |
| actorFontFamily | 设置参与者描述的字体 | “Open Sans”, sans-serif |
| actorFontWeight | 设置演员描述的字体粗细 | “Open Sans”, sans-serif |
| noteFontSize | 设置参与者附加备注的字体大小 | 14 |
| noteFontFamily | 设置参与者附加备注的字体 | “trebuchet ms”, verdana, arial |
| noteFontWeight | 设置参与者附加备注的字体粗细 | “trebuchet ms”, verdana, arial |
| noteAlign | 设置参与者附加备注的对齐方式 | center |
| messageFontSize | 设置参与者与参与者之间的消息字体大小 | 16 |
| messageFontFamily | 设置参与者与参与者之间的消息字体 | “trebuchet ms”, verdana, arial |
| messageFontWeight | 设置参与者与参与者之间的消息字体粗细 | “trebuchet ms”, verdana, arial |