Appearance
序列图
¥Sequence diagrams
序列图是一种交互图，显示进程如何彼此运行以及以什么顺序运行。
¥A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid 可以渲染序列图。
¥Mermaid can render sequence diagrams.
INFO
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
语法
¥Syntax
参加者
¥Participants
可以像本页第一个示例中那样隐式定义参与者。参与者或参与者按照图表源文本中的出现顺序渲染。有时，你可能希望以不同于第一条消息中的顺序显示参与者。可以通过执行以下操作来指定角色的出场顺序：
¥The participants can be defined implicitly as in the first example on this page. The participants or actors are rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a different order than how they appear in the first message. It is possible to specify the actor's order of appearance by doing the following:
角色
¥Actors
如果你特别想使用角色符号而不是带有文本的矩形，则可以通过使用角色语句来实现，如下所示。
¥If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
别名
¥Aliases
角色可以有一个方便的标识符和描述性标签。
¥The actor can have a convenient identifier and a descriptive label.
Actor 创建和销毁 (v10.3.0+)
¥Actor Creation and Destruction (v10.3.0+)
可以通过消息创建和销毁参与者。为此，请在消息之前添加创建或销毁指令。
¥It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
create participant B
A --> B: Hello创建指令支持参与者/参与者区分和别名。消息的发送者或接收者可以被销毁，但只能创建接收者。
¥Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
无法修复的参与者/参与者创建/删除错误
¥Unfixable actor/participant creation/deletion error
如果创建或删除参与者时出现以下类型的错误：
¥If an error of the following type occurs when creating or deleting an actor/participant:
被销毁的参与者参与者名称在其声明后没有关联的销毁消息。请检查顺序图。
¥The destroyed participant participant-name does not have an associated destroying message after its declaration. Please check the sequence diagram.
修复图表代码并不能消除此错误，并且所有其他图表的渲染都会导致相同的错误，那么你需要将 mermaid 版本更新到（v10.7.0+）。
¥And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
分组/框
¥Grouping / Box
角色可以分组在垂直框中。你可以使用以下符号定义颜色（如果没有，它将是透明的）和/或描述性标签：
¥The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
endINFO
If your group name is a color you can force the color to be transparent:
box transparent Aqua
... actors ...
end信息
¥Messages
消息可以有两条显示，可以是实线，也可以是虚线。
¥Messages can be of two displayed either solid or with a dotted line.
[Actor][Arrow][Actor]:Message text目前支持六种类型的箭头：
¥There are six types of arrows currently supported:
| 类型 | 描述 |
|---|---|
-> | 没有箭头的实线 |
--> | 没有箭头的虚线 |
->> | 带箭头的实线 |
-->> | 带箭头的虚线 |
-x | 末端有十字的实线 |
--x | 末端带有十字的虚线。 |
-) | 末尾带有空心箭头的实线（异步） |
--) | 末尾带有空心箭头的虚线（异步） |
激活
¥Activations
可以激活和停用角色。(de)activation 可以是专用声明：
¥It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
还有一种快捷表示法，即在消息箭头后附加 +/- 后缀：
¥There is also a shortcut notation by appending +/- suffix to the message arrow:
同一角色的激活可以叠加：
¥Activations can be stacked for same actor:
注意
¥Notes
可以向序列图添加注释。这是通过符号 Note [ right of | 完成的。 左边| 结束] [角色]：注意内容中的文本
¥It is possible to add notes to a sequence diagram. This is done by the notation Note [ right of | left of | over ] [Actor]: Text in note content
请参阅下面的示例：
¥See the example below:
还可以创建跨越两个参与者的注意：
¥It is also possible to create notes spanning two participants:
还可以添加换行符（一般适用于文本输入）：
¥It is also possible to add a line break (applies to text input in general):
循环
¥Loops
可以在序列图中表达循环。这是通过符号完成的
¥It is possible to express loops in a sequence diagram. This is done by the notation
loop Loop text
... statements ...
end请参阅下面的示例：
¥See the example below:
替代
¥Alt
可以在序列图中表达替代路径。这是通过符号完成的
¥It is possible to express alternative paths in a sequence diagram. This is done by the notation
alt Describing text
... statements ...
else
... statements ...
end或者如果有可选的序列（如果没有其他）。
¥or if there is sequence that is optional (if without else).
opt Describing text
... statements ...
end请参阅下面的示例：
¥See the example below:
平行线
¥Parallel
可以显示并行发生的动作。
¥It is possible to show actions that are happening in parallel.
这是通过符号完成的
¥This is done by the notation
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end请参阅下面的示例：
¥See the example below:
也可以嵌套并行块。
¥It is also possible to nest parallel blocks.
临界区
¥Critical Region
可以通过对情况进行条件处理来显示必须自动发生的操作。
¥It is possible to show actions that must happen automatically with conditional handling of circumstances.
这是通过符号完成的
¥This is done by the notation
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end请参阅下面的示例：
¥See the example below:
也有可能根本没有选项
¥It is also possible to have no options at all
这个关键块也可以嵌套，相当于上面看到的 par 语句。
¥This critical block can also be nested, equivalently to the par statement as seen above.
中断
¥Break
可以指示流内序列的停止（通常用于对异常进行建模）。
¥It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
这是通过符号完成的
¥This is done by the notation
break [something happened]
... statements ...
end请参阅下面的示例：
¥See the example below:
背景高亮
¥Background Highlighting
可以通过提供彩色背景矩形来高亮流。这是通过符号完成的
¥It is possible to highlight flows by providing colored background rects. This is done by the notation
颜色是使用 rgb 和 rgba 语法定义的。
¥The colors are defined using rgb and rgba syntax.
rect rgb(0, 255, 0)
... content ...
endrect rgba(0, 0, 255, .1)
... content ...
end请参阅下面的示例：
¥See the examples below:
注释
¥Comments
可以在序列图中输入注释，解析器将忽略这些注释。注释需要独占一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法
¥Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
用于转义字符的实体代码
¥Entity codes to escape characters
可以使用此处示例的语法对字符进行转义。
¥It is possible to escape characters using the syntax exemplified here.
给出的数字以 10 为基数，因此 # 可以编码为 #35;。还支持使用 HTML 字符名称。
¥Numbers given are base 10, so # can be encoded as #35;. It is also supported to use HTML character names.
由于可以使用分号代替换行符来定义标记，因此你需要使用 #59; 在消息文本中包含分号。
¥Because semicolons can be used instead of line breaks to define the markup, you need to use #59; to include a semicolon in message text.
sequenceNumbers
可以在序列图中的每个箭头上附加一个序列号。可以在向网站添加 Mermaid 时进行配置，如下所示：
¥It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
html
<script>
mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>也可以通过图表代码打开它，如下图所示：
¥It can also be turned on via the diagram code as in the diagram:
角色菜单
¥Actor Menus
参与者可以拥有包含指向外部页面的个性化链接的弹出菜单。例如，如果参与者代表 Web 服务，则有用的链接可能包括指向服务运行状况仪表板的链接、包含服务代码的存储库或描述服务的 wiki 页面。
¥Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
这可以通过添加一条或多条链接线来配置，格式如下：
¥This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url>高级菜单语法
¥Advanced Menu Syntax
有一种依赖于 JSON 格式的高级语法。如果你对 JSON 格式感到满意，那么这也存在。
¥There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
可以通过添加以下格式的链接行来配置：
¥This can be configured by adding the links lines with the format:
links <actor>: <json-formatted link-name link-url pairs>示例如下：
¥An example is below:
样式
¥Styling
序列图的样式是通过定义许多 CSS 类来完成的。在渲染期间，从位于 src/themes/sequence.scss 的文件中提取这些类
¥Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
使用的类
¥Classes used
| 类 | 描述 |
|---|---|
| 角色 | 角色框的样式。 |
| actor-top | 图表顶部的角色人物/框的样式。 |
| actor-bottom | 图表底部的角色人物/框的样式。 |
| text.actor | 所有角色的文本样式。 |
| text.actor-box | 角色框的文本样式。 |
| text.actor-man | 角色人物的文本样式。 |
| 角色线 | 角色的垂直线。 |
| messageLine0 | 实心消息行的样式。 |
| messageLine1 | 虚线消息行的样式。 |
| messageText | 定义消息箭头上的文本样式。 |
| labelBox | 定义循环左侧的样式标签。 |
| labelText | 循环标签中文本的样式。 |
| loopText | 循环框中文本的样式。 |
| loopLine | 定义循环框中线条的样式。 |
| note | 注释框的样式。 |
| noteText | 注释框中文本的样式。 |
样式表示例
¥Sample stylesheet
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;
}配置
¥Configuration
可以调整渲染序列图的边距。
¥It is possible to adjust the margins for rendering the sequence diagram.
这是通过定义 mermaid.sequenceConfig 或通过 CLI 使用带有配置的 json 文件来完成的。mermaidCLI 页描述了如何使用 CLI。mermaid.sequenceConfig 可以设置为带有配置参数的 JSON 字符串或相应的对象。
¥This is done by defining mermaid.sequenceConfig or by the CLI to use a json file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.
javascript
mermaid.sequenceConfig = {
diagramMarginX: 50,
diagramMarginY: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35,
mirrorActors: true,
};可能的配置参数：
¥Possible configuration parameters:
| 参数 | 描述 | 默认值 |
|---|---|---|
| mirrorActors | 打开/关闭图表下方和上方参与者的渲染 | false |
| 底部边距调整 | 调整图表结束的距离。使用 css 的宽边框样式可能会产生不需要的剪裁，这就是此配置参数存在的原因。 | 1 |
| 角色字体大小 | 设置角色描述的字体大小 | 14 |
| 角色字体家族 | 设置角色描述的字体系列 | "打开无字体"，无衬线字体 |
| 角色字体粗细 | 设置角色描述的字体粗细 | "打开无字体"，无衬线字体 |
| noteFontSize | 设置角色附加注释的字体大小 | 14 |
| noteFontFamily | 设置角色附加注释的字体系列 | "投石机女士"、verdana、宋体 |
| noteFontWeight | 设置角色附加注释的字体粗细 | "投石机女士"、verdana、宋体 |
| noteAlign | 设置角色附加注释中文本的文本对齐方式 | center |
| messageFontSize | 设置角色<->角色消息的字体大小 | 16 |
| messageFontFamily | 设置 actor<->actor 消息的字体系列 | "投石机女士"、verdana、宋体 |
| messageFontWeight | 设置角色<->角色消息的字体粗细 | "投石机女士"、verdana、宋体 |