主题
时序图
🌐 Sequence diagrams
时序图是一种交互图，它展示了各个过程如何相互操作以及操作的顺序。
Mermaid 可以绘制时序图。
🌐 Mermaid can render sequence diagrams.
信息
关于节点的说明，“end”这个词可能会破坏图表，因为 Mermaid 语言的脚本方式。
如果不可避免，必须使用括号（）、引号“”或括号{}，[]来封装“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.
边界
🌐 Boundary
如果你想为参与者使用边界符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.
控制
🌐 Control
如果你想为参与者使用控制符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.
实体
🌐 Entity
如果你想为参与者使用实体符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.
数据库
🌐 Database
如果你想为参与者使用数据库符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.
集合
🌐 Collections
如果你想为参与者使用集合符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.
队列
🌐 Queue
如果你想为参与者使用排队符号，请使用如下所示的 JSON 配置语法。
🌐 If you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.
别名
🌐 Aliases
角色可以有一个方便的标识符和描述性的标签。
🌐 The actor can have a convenient identifier and a descriptive label.
角色创建与销毁（v10.3.0+）
🌐 Actor Creation and Destruction (v10.3.0+)
可以通过消息创建和销毁 actor。为此，请在消息前添加创建或销毁指令。
🌐 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:
被销毁的参与者 participant-name 在声明后没有对应的销毁消息。请检查时序图。
如果修复图表代码不能消除此错误，并且渲染所有其他图表也会出现相同的错误，那么你需要将 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 ...
end
box rgba(33,66,99,0.5)
... actors ...
end信息
如果你的组名是颜色，你可以将该颜色强制设为透明：
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 ten types of arrows currently supported:
| 类型 | 描述 |
|---|---|
-> | 无箭头的实线 |
--> | 无箭头的虚线 |
->> | 带箭头的实线 |
-->> | 带箭头的虚线 |
<<->> | 双向箭头的实线（v11.0.0+） |
<<-->> | 双向箭头的虚线（v11.0.0+） |
-x | 末端带叉的实线 |
--x | 末端带叉的虚线 |
-) | 末端带开放箭头的实线（异步） |
--) | 末端带开放箭头的虚线（异步） |
激活
🌐 Activations
可以激活和停用一个角色。（停）激活可以是专门的声明：
🌐 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 [右侧 | 左侧 | 上方] [参与者]：注释内容
🌐 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:
换行
🌐 Line breaks
可以在备注和信息中添加换行符：
🌐 Line break can be added to Note and Message:
角色名字中的换行需要别名：
🌐 Line breaks in Actor names requires aliases:
循环
🌐 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或者如果有可选的序列（如果没有 else）。
🌐 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
rect COLOR
... content ...
end颜色是使用 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.
给出的数字是十进制，因此 # 可以编码为 #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
角色可以拥有包含指向外部页面的个性化链接的弹出菜单。例如，如果一个角色代表一个网络服务，有用的链接可能包括指向服务健康仪表板的链接、包含该服务代码的仓库，或描述该服务的维基页面的链接。
🌐 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
| Class | Description |
|---|---|
| actor | Styles for the actor box. |
| actor-top | Styles for the actor figure/ box at the top of the diagram. |
| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
| text.actor | Styles for text of all of the actors. |
| text.actor-box | Styles for text of the actor box. |
| text.actor-man | Styles for text of the actor figure. |
| actor-line | The vertical line for an actor. |
| messageLine0 | Styles for the solid message line. |
| messageLine1 | Styles for the dotted message line. |
| messageText | Defines styles for the text on the message arrows. |
| labelBox | Defines styles label to left in a loop. |
| labelText | Styles for the text in label for loops. |
| loopText | Styles for the text in the loop box. |
| loopLine | Defines styles for the lines in the loop box. |
| note | Styles for the note box. |
| noteText | Styles for the text on in the note boxes. |
示例样式表
🌐 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 文件来完成的。如何使用 CLI 在 mermaidCLI 页面中有描述。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:
| Parameter | Description | Default value |
|---|---|---|
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif |
| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif |
| noteFontSize | Sets the font size for actor-attached notes | 14 |
| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |
| noteAlign | Sets the text alignment for text in actor-attached notes | center |
| messageFontSize | Sets the font size for actor<->actor messages | 16 |
| messageFontFamily | Sets the font family for actor<->actor messages | "trebuchet ms", verdana, arial |
| messageFontWeight | Sets the font weight for actor<->actor messages | "trebuchet ms", verdana, arial |