序列图

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

Mermaid 可以渲染序列图。

信息

关于节点，由于 Mermaid 语言的编写方式，单词“end”可能会破坏图表。

如果不可避免，必须使用括号 ()、引号 "" 或方括号 {}、[] 将单词“end”括起来。例如：(end)、[end]、{end}。

语法

参与者

参与者可以在本页第一个示例中隐式定义。参与者或执行者按其在图表源文本中的出现顺序渲染。有时您可能希望以与他们在第一个消息中出现的顺序不同的顺序显示参与者。可以通过以下操作指定执行者出现的顺序

执行者

如果您想专门使用执行者符号而不是带有文本的矩形，可以使用下面的 actor 语句。

别名

执行者可以具有一个方便的标识符和一个描述性标签。

执行者创建和销毁 (v10.3.0+)

可以通过消息创建和销毁执行者。为此，在消息之前添加 create 或 destroy 指令。

create participant B
A --> B: Hello

Create 指令支持执行者/参与者区分和别名。消息的发送者或接收者可以被销毁，但只有接收者可以被创建。

无法修复的执行者/参与者创建/删除错误

如果在创建或删除执行者/参与者时出现以下类型的错误

已销毁的参与者 **参与者名称** 在其声明之后没有与之相关的销毁消息。请检查序列图。

如果修复图表代码不能消除此错误，并且所有其他图表的渲染都导致相同错误，则需要将 Mermaid 版本更新到 (v10.7.0+)。

分组 / 框

执行者可以分组到垂直框中。您可以使用以下表示法定义颜色（如果未定义，则将是透明的）和/或描述性标签

box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end

信息

如果您的组名是颜色，您可以强制颜色为透明

box transparent Aqua
... actors ...
end

消息

消息可以是两种显示方式，实线或虚线。

[Actor][Arrow][Actor]:Message text

目前支持十种类型的箭头

类型	描述
->	无箭头的实线
-->	无箭头的虚线
->>	带箭头头的实线
-->>	带箭头头的虚线
<<->>	->>
<<-->>	带双向箭头头的实线 (v11.0.0+)
-->>	带双向箭头头的虚线 (v11.0.0+)
-x	带十字形末端的实线
-)	--x
--)	带十字形末端的虚线

->

带开放箭头末端的实线（异步）

-->

带开放箭头末端的虚线（异步）

激活

可以激活和停用执行者。（停）激活可以是专用声明

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

激活可以针对同一执行者进行堆叠

注释

可以在序列图中添加注释。这是通过表示法 Note [ right of | left of | over ] [执行者]: 注释内容中的文本来完成

参见下面的示例

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

换行符

loop Loop text
... statements ...
end

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

可以在注释和消息中添加换行符

执行者名称中的换行符需要别名

alt Describing text
... statements ...
else
... statements ...
end

循环

opt Describing text
... statements ...
end

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

可以在序列图中表达循环。这是通过以下表示法来完成的

Alt

可以在序列图中表达备选路径。这是通过以下表示法来完成的

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

或者，如果存在可选的序列（如果有，但没有 else）。

并行

可以显示并行执行的操作。

可以在序列图中表达备选路径。这是通过以下表示法来完成的

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

这是通过以下表示法来完成的

还可以嵌套并行块。

临界区

可以显示必须自动发生的具有条件处理情况的操作。

可以在序列图中表达备选路径。这是通过以下表示法来完成的

break [something happened]
... statements ...
end

还有一种快捷表示法，通过将 `+`/`-` 后缀附加到消息箭头来实现

也可以根本没有选项

此临界块也可以嵌套，与上面的 `par` 语句相同。

rect COLOR
... content ...
end

中断

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

可以指示流程内的序列停止（通常用于模拟异常）。

背景突出显示

可以通过提供彩色背景矩形来突出显示流程。这是通过以下表示法来完成的

颜色使用 rgb 和 rgba 语法定义。

参见下面的示例

注释

可以在序列图中输入注释，解析器会忽略这些注释。注释必须单独成行，并且必须以 `%%`（双百分号）开头。从注释开始到下一个换行符的所有文本都将被视为注释，包括任何图表语法

转义字符的实体代码

可以使用此处示例的语法来转义字符。

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

因为分号可以用作换行符来定义标记，所以您需要使用 `#59;` 在消息文本中包含分号。

sequenceNumbers

可以在序列图中的每个箭头中附加一个序列号。这可以在将 Mermaid 添加到网站时进行配置，如下所示

html

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

它也可以通过图表代码打开，如图表所示

执行者菜单

执行者可以具有包含指向外部页面的个性化链接的弹出菜单。例如，如果执行者代表 Web 服务，则有用的链接可能包括指向服务运行状况仪表板、包含服务代码的存储库或描述服务的维基页面的链接。

links <actor>: <json-formatted link-name link-url pairs>

可以通过添加一个或多个以以下格式的链接行来配置它

高级菜单语法

有一种依赖于 JSON 格式的高级语法。如果您熟悉 JSON 格式，那么也存在这种格式。

可以通过添加以以下格式的链接行来配置它

一个例子如下	描述
样式	序列图的样式通过定义许多 CSS 类来完成。在渲染期间，这些类从位于 src/themes/sequence.scss 的文件中提取。
使用的类	类
actor	执行者框的样式。
actor-top	图表顶部执行者图形/框的样式。
actor-bottom	图表底部执行者图形/框的样式。
text.actor	所有执行者文本的样式。
text.actor-box	执行者框文本的样式。
text.actor-man	执行者图形文本的样式。
actor-line	执行者的垂直线。
messageLine0	实线消息线的样式。
messageLine1	虚线消息线的样式。
messageText	定义消息箭头上的文本的样式。
labelBox	定义循环左侧标签的样式。
labelText	循环标签中文本的样式。
loopText	注释框的样式。
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 文件来实现。CLI 使用方式请参考 mermaidCLI 页面。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