Mermaid 中文网

主题

时序图 ​

🌐 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

演员可以有一个方便的标识符和一个描述性标签。别名可以通过两种方式定义：使用 as 关键字的外部语法，或者在配置对象中内联定义。

🌐 The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the as keyword, or inline within the configuration object.

外部别名语法 ​

🌐 External Alias Syntax

你可以在参与者声明后使用 as 关键字来定义别名：

🌐 You can define an alias using the as keyword after the participant declaration:

外部别名语法也适用于参与者刻板配置，允许你将类型指定与别名结合起来：

🌐 The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:

内联别名语法 ​

🌐 Inline Alias Syntax

或者，你可以直接在配置对象中使用 "alias" 字段定义别名。这适用于 participant 和 actor 关键字：

🌐 Alternatively, you can define an alias directly inside the configuration object using the "alias" field. This works with both participant and actor keywords:

别名优先级 ​

🌐 Alias Precedence

当同时提供内联别名（在配置对象中）和外部别名（使用 as 关键字）时，外部别名优先：

🌐 When both inline alias (in the configuration object) and external alias (using as keyword) are provided, the external alias takes precedence:

在上面的示例中，将显示“外部名称”和“外部数据库”，而不是“内部名称”和“内部数据库”。

🌐 In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".

角色创建与销毁（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

线条可以是实线或虚线，并且可以以各种类型的箭头、十字或开口箭头结束。

🌐 Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.

支持的箭头类型 ​

🌐 Supported Arrow Types

标准箭头类型

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

半箭头 (v11.12.3+)

以下半箭头类型支持更具表现力的时序图。通过增加破折号的数量（- → --），可以使用实线和虚线两种变体。

🌐 The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (- → --).

类型描述
-|\带顶半箭头的实线
--|\带顶半箭头的虚线
-|/带底半箭头的实线
--|/带底半箭头的虚线
/|-带反向顶半箭头的实线
/|--带反向顶半箭头的虚线
\\-带反向底半箭头的实线
\\--带反向底半箭头的虚线
-\\带顶棒形半箭头的实线
--\\带顶棒形半箭头的虚线
-//带底棒形半箭头的实线
--//带底棒形半箭头的虚线
//-带反向顶棒形半箭头的实线
//--带反向顶棒形半箭头的虚线
\\-带反向底棒形半箭头的实线
\\--带反向底棒形半箭头的虚线

中央连接 (v11.12.3+) ​

🌐 Central Connections (v11.12.3+)

Mermaid 时序图支持使用 () 的中心生命线连接。 这对于表示连接到中心点的消息或信号很有用，而不是直接从一个参与者到另一个参与者。

🌐 Mermaid sequence diagrams support central lifeline connections using a (). This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.

要表示中心连接，请在箭头语法后添加 ()。

🌐 To indicate a central connection, append () to the arrow syntax.

基本语法 ​

🌐 Basic Syntax

激活 ​

🌐 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 ...
end
rect 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

类描述
actor演员框的样式。
actor-top图表顶部演员图形/框的样式。
actor-bottom图表底部演员图形/框的样式。
text.actor所有演员文本的样式。
text.actor-box演员框文本的样式。
text.actor-man演员图形文本的样式。
actor-line演员的垂直线。
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 文件来完成的。如何使用 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:

| 参数 | 描述 | 默认值 |

| --- | --- | --- |

| mirrorActors | 打开/关闭图表下方以及上方演员的渲染 | false |

| bottomMarginAdj | 调整图表结束位置的下移距离。使用带有 CSS 的宽边框样式可能会产生不想要的裁剪，这就是这个配置参数存在的原因。 | 1 |

| actorFontSize | 设置角色描述的字体大小 | 14 |

| actorFontFamily | 设置角色描述的字体系列 | "Open Sans", 无衬线字体 |

| actorFontWeight | 设置演员描述的字体粗细 | "Open Sans", 无衬线字体 |

| noteFontSize | 设置附加在角色上的注释的字体大小 | 14 |

| noteFontFamily | 设置附加在角色上的备注的字体 | "trebuchet ms", verdana, arial |

| noteFontWeight | 设置附加在角色上的备注的字体粗细 | "trebuchet ms", verdana, arial |

| noteAlign | 设置附着在角色上的注释文本的对齐方式 | 居中 |

| messageFontSize | 设置演员<->消息的字体大小 | 16 |

| messageFontFamily | 设置 <-> 演员消息的字体 | "trebuchet ms", verdana, arial |

| messageFontWeight | 设置 <-> 演员消息的字体粗细 | "trebuchet ms", verdana, arial |

Opens in mermaid.ai