序列图 ​

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

Mermaid 可以渲染序列图。

语法 ​

参与者 ​

参与者可以像本页的第一个示例中那样隐式定义。参与者或角色按照在图表源文本中出现的顺序呈现。有时您可能希望以不同于第一条消息中出现的顺序显示参与者。可以通过以下方式指定角色的出现顺序：

演员 ​

如果您特别想使用参与者符号而不是带有文本的矩形，您可以按照以下方式使用参与者语句来实现。

别名 ​

演员可以有一个方便的标识符和一个描述性的标签。

Actor 创建与销毁 (v10.3.0+) ​

可以通过消息创建和销毁actors。为此，在消息前添加创建或销毁指令。

create participant B
A --> B: Hello

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

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

如果在创建或删除参与者/参与者时发生以下类型的错误：

被销毁的参与者 participant-name 在声明后没有关联的销毁消息。请检查序列图。

修复图表代码并不能消除此错误，并且所有其他图表的渲染也会出现相同的错误，那么你需要将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

目前支持十种类型的箭头：

激活函数 ​

可以激活和停用一个actor。激活和停用可以通过专门的声明来实现：

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

激活可以堆叠给同一个角色：

注释 ​

可以在序列图中添加注释。这是通过符号 Note [ right of | left of | over ] [Actor]: 注释内容中的文本来完成的

请参见以下示例：

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

换行 ​

可以在Note和Message中添加换行符：

演员名称中的换行符需要别名：

循环 ​

可以在序列图中表达循环。这是通过符号完成的

loop Loop text
... statements ...
end

请参见以下示例：

Alt ​

在序列图中可以表达替代路径。这是通过符号完成的

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

或者如果有一个序列是可选的（如果没有else）。

opt Describing text
... statements ...
end

请参见以下示例：

并行 ​

可以显示并行发生的操作。

这是通过符号完成的

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

请参见以下示例：

也可以嵌套并行块。

关键区域 ​

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

这是通过符号完成的

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

请参见以下示例：

也有可能没有任何选项

这个关键块也可以嵌套，等同于上面看到的par语句。

中断 ​

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

这是通过符号完成的

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

请参见以下示例：

背景高亮 ​

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

rect COLOR
... content ...
end

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

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

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

请参见以下示例：

评论 ​

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

用于转义字符的实体代码 ​

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

给定的数字是十进制的，所以#可以编码为#35;。也支持使用HTML字符名称。

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

序列号 ​

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

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

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

演员菜单 ​

演员可以有弹出菜单，包含指向外部页面的个性化链接。例如，如果一个演员代表一个网络服务，有用的链接可能包括指向服务健康仪表板的链接、包含服务代码的仓库，或描述服务的维基页面。

这可以通过添加一个或多个格式为以下内容的链接行来配置：

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

高级菜单语法 ​

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

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

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

示例如下：

样式 ​

序列图的样式是通过定义一系列CSS类来完成的。在渲染过程中，这些类从位于src/themes/sequence.scss的文件中提取。

使用的类 ​

示例样式表 ​

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,
};

可能的配置参数: ​