Mermaid中文文档

Appearance

序列图 ​

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

Mermaid 可以渲染序列图。

Code:
mermaid

NOTE

关于节点的一个说明，单词“end”可能会破坏图表，这是由于 mermaid 语言的编写方式造成的。 如果不可避免，则必须使用括号()、引号""或方括号{}、[]将单词“end”括起来。例如：(end)、[end]、{end}。

语法 ​

参与者 ​

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

Code:
mermaid

角色 ​

如果您特别想使用角色符号而不是带有文本的矩形，则可以使用如下所示的 actor 语句：

Code:
mermaid

别名 ​

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

Code:
mermaid

角色创建和销毁 (v10.3.0+) ​

可以通过消息创建和销毁角色。为此，请在消息前添加 create 或 destroy 指令。

create participant B
A --> B: Hello

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

Code:
mermaid

不可修复的角色/参与者创建/删除错误 ​

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

已销毁的参与者 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

NOTE

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

box transparent Aqua
... actors ...
end
Code:
mermaid

消息 ​

消息可以显示为实线或虚线。

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

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

类型描述
->实线，无箭头
-->虚线，无箭头
->>实线，有箭头
-->>虚线，有箭头
<<->>实线，有双向箭头 (v11.0.0+)
<<-->>虚线，有双向箭头 (v11.0.0+)
-x实线，末端带叉号
--x虚线，末端带叉号
-)实线，末端带开放箭头 (异步)
--)虚线，末端带开放箭头 (异步)

激活 ​

可以激活和停用角色。（去）激活可以是专用的声明：

Code:
mermaid

还可以通过在消息箭头后附加 +/- 后缀来使用快捷方式表示法：

Code:
mermaid

对于同一个角色，激活可以堆叠：

Code:
mermaid

注释 ​

可以在序列图中添加注释。这通过表示法完成 Note [ right of | left of | over ] [Actor]: Text in note content

请参见下面的示例：

Code:
mermaid

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

Code:
mermaid

换行符 ​

可以将换行符添加到注释和消息中：

Code:
mermaid

角色名称中的换行符需要别名：

Code:
mermaid

循环 ​

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

loop Loop text
... statements ...
end

请参见下面的示例：

Code:
mermaid

Alt ​

可以在序列图中表达替代路径。这通过表示法完成

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

或者如果序列是可选的（如果非 else）。

opt Describing text
... statements ...
end

请参见下面的示例：

Code:
mermaid

并行 ​

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

这通过表示法完成

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

请参见下面的示例：

Code:
mermaid

也可以嵌套并行块。

Code:
mermaid

临界区 ​

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

这通过表示法完成

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

请参见下面的示例：

Code:
mermaid

也可以根本没有选项

Code:
mermaid

此临界块也可以嵌套，与上面看到的 par 语句等效。

中断 ​

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

这通过表示法完成

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

请参见下面的示例：

Code:
mermaid

背景高亮 ​

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

rect COLOR
... content ...
end

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

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

请参见下面的示例：

Code:
mermaid

注释 ​

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

实体代码转义字符 ​

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

Code:
mermaid

给出的数字是 10 进制，因此 # 可以编码为 #35;。也支持使用 HTML 字符名称。

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

sequenceNumbers ​

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

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

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

Code:
mermaid

角色菜单 ​

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

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

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

高级菜单语法 ​

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

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

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

一个例子如下：

Code:
mermaid

样式 ​

序列图的样式是通过定义许多 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循环框中文本的样式。
loopLine定义循环框中线的样式。
note注释框的样式。
noteText注释框中文本的样式。

示例样式表 ​

css
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 字符串或相应的对象。

javascript
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