【MarkDown】CSDN Markdown之时序图sequenceDiagram详解

少莫千华

已于 2023-06-21 18:09:59 修改

阅读量2.8k

点赞数 2

分类专栏：语言-排版文章标签： MarkDown 时序图 sequenceDiagram

于 2023-06-12 22:34:15 首次发布

本文链接：https://blog.csdn.net/chenlu5201314/article/details/131172349

版权

语言-排版专栏收录该内容

18 篇文章 2 订阅

订阅专栏

序列图 sequenceDiagram

序列图是一种交互图，显示进程如何相互操作以及按什么顺序操作。

Mermaid 可以渲染序列图.

代码:

sequenceDiagram
   	张三->>李四: 李女士, 最近过得好吗?
   	李四-->>张三: 我很好!
   	张三-)李四: 待会见!

备注：
注意事项:由于mermaid 语言的脚本编写方式，end一词可能会破坏图表。
如果必须使用end作为文本，必须使用括号()、引号""或方括号{},[]将单词end括起来。即：(end), [end], {end}.

参与者与组

参与者 participant

参与者可以像本页的第一个示例中那样被隐式定义。参与者或人物在图表源文本中会隐式按交互记录顺序依次呈现。有时，您可能希望参与者不按交互记录依次呈现。可以通过以下操作指定演员的出场顺序：

代码:

sequenceDiagram
  	participant 张三
  	participant 李四
  	张三->>李四: 你好，李女士！
  	李四->>张三: 你好，张先生！

拟人符号 actor

如果您特别想使用actor符号替换掉带文本的矩形框，可以按照下面的说明来书写actor语句。

代码:

sequenceDiagram
  	actor 张三
  	actor 李四
  	张三->>李四: 李女士，您好！
  	李四->>张三: 张先生，您好！

别名 as

参与者可以有个变量名和描述性的标签名

代码:

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 语法如下：

代码:

sequenceDiagram
   张三->>李四: 李女士, 最近过得好吗?
   activate 李四
   李四-->>张三: 嗯，我很好!
   deactivate 李四

还有一种快捷方式表示法，在消息箭头后加上+/-后缀：

代码:

sequenceDiagram
   张三->>+李四: 李女士, 最近过得好吗?
   李四-->>-张三: 嗯，我很好!

同一参与者可以进行堆叠激活:

代码:

sequenceDiagram
   张三->>+李四: 李女士, 最近过得好吗?
   张三->>+李四: 李女士, 你能听到我说话吗?
   李四-->>-张三: 张先生，你好，我能听见你说话!
   李四-->>-张三: 我过得非常好!

备注 Note

你可以在序列图中添加备注。这是通过以下语句实现：

Note [ right of | left of | over ] [Actor]: 备注内容中的文本

请参阅下面的示例:

代码:

sequenceDiagram
   participant 张三
   Note right of 张三: 备注中的文本

还可以创建跨越两个参与者的备注：

代码:

   张三->李四: 李女士, 最近过得好吗?
   Note over 张三,李四: 常见的互动

还可以添加换行符（通常适用于文本输入）：

代码:

sequenceDiagram
  张三->李四: 李女士, 最近过得好吗?
  Note over 张三,李四: 常见的互动<br/>这是第二行的备注

循环 loop

可以在序列图中表示循环。这是通过以下语句实现：

loop 循环文本
... 参与者交互记录 ...
end

请参阅下面的示例:

代码:

sequenceDiagram
  张三->李四: 李女士, 最近过得好吗?
  loop 每分钟问一次
      李四-->张三: 嗯，我很好!
  end

备选 Alt

可以在序列图中表示条件，这是通过以下语句实现：

alt 描述文本
... 参与者交互记录...
else 描述文本
... 参与者交互记录...
end

或者需要表示一个可以选的序列内容(else).

opt 描述文本
... 参与者交互记录...
end

请参阅下面的示例:

代码:

sequenceDiagram
   张三->>李四: 李女士, 最近过得好吗?
   alt 身体抱恙
       李四->>张三: 无精打采 ┭┮﹏┭┮
   else 身体健康
       李四->>张三: 感觉神清气爽
   end
   opt 额外的回答
       李四->>张三: 谢谢关心
   end

并行 par

可以序列图中显示并行的交互记录信息。
这是通过以下语句实现：

par [行为 1]
... 参与者交互记录...
and [行为 2]
... 参与者交互记录...
and [行为 N]
... 参与者交互记录...
end

请参阅下面的示例:

代码:

sequenceDiagram
   par 张三对李四说
       张三 ->>李四: 大家好!
   and 张三对王五说
       张三 ->>王五: 大家好!
   end
   李四-->>张三 : 你好，张先生!
   王五-->>张三 : 你好，张先生!

可以对多个并行进行嵌套.

代码:

sequenceDiagram
   par 张三对李四说
       张三->>李四: 我们去帮助王五他们吧！
   and 张三对王五说
       张三->>王五: 我想今天帮你做事！
       par 王五对赵六说
           王五->>赵六: 我们今天能做完吗?
       and 王五对卓七说
           王五 ->>卓七: 你今天能帮我们吗?
       end
   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

请参阅下面的示例:

代码:

sequenceDiagram
   participant 张三
   participant 李四	
   rect rgb(191, 223, 255)
   note right of 张三: 张三 calls 李四.
   张三->>+李四: 李女士, 最近过得好吗?
   rect rgb(200, 150, 255)
   张三->>+李四: 李女士, 你能听到我说话吗?
   李四-->>-张三:  张先生，你好，我能听见你说话!
   end
   李四-->>-张三: 我过得非常好!
   end
   张三 ->>+ 李四: 你今晚想去看电影吗？
   李四-->>- 张三: 好的，电影院见.

注释 %%

可以在序列图中加入注释，解下器将忽略这些注释，注释必须在所注释代码之上且必须以%%（双百分号）开头。注释这行还是到下一行的任何文本都会被视作为注释，包括任何图表语句。

代码:

sequenceDiagram
   张三->>李四: 李女士, 最近过得好吗?
   %% 这是一个注释
   李四-->>张三: 我过得非常好!

转义字符的实体代码

可以使用下面示例的语句来转义字符。

代码:

sequenceDiagram
   张三->>李四: 我 #35; 你!
   李四->>张三: 我 #9829; 你 #infin; 倍!;

实体代码是以16进制进行编码的, 所以#字符可以用 #35;进行编码。还支持使用HTML字符名称。

因为;(分号)可以替换换行符放在信息结尾，直接放在文本中间将不会被解析器识别，所以如果文本中需要包含;(分号)请使用#59;来代替。

序号 autonumber

可以在序列图中的每个连线上附加一个序列号。将mermaid 添加到网站时，可以进行如下配置：

<script>
  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>

你可以通过序列图中的autonumber关键字打开此功能.

代码:

sequenceDiagram
   autonumber
   张三->>李四: 李女士,最近身体好吗?
   loop 体检
       李四->>李四: 与病魔斗争
   end
   Note right of 李四: 理性思考!
   李四-->>张三: 我很好!
   李四->>王五: 你现在身体是怎么样?
   王五-->>李四: 我身体非常好!

人物菜单 link

人物可以有弹出菜单，其中包含指向关于此人物得外部链接。

这可以通过添加一个或多个链接行进行配置，格式为：

link <actor>: <link-label> @ <link-url>

代码:

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 <actor>: <json-formatted link-name link-url pairs>

请参阅下面的示例:

代码:

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