【Markdown】【mermaid】Mermaid时序图基础语法Sequence Diagrams

本文主要是介绍【Markdown】【mermaid】Mermaid时序图基础语法Sequence Diagrams - Basic Syntax，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

时序图 - Sequence Diagrams

简介 - Introduction

时序图是一种交互图，显示了流程如何相互操作以及它们的执行顺序。它可以用来描述用例场景或设计一个良好的面向对象系统。

Sequence diagrams are a type of interaction diagram that illustrate how flows operate with one another and in what order. They can be used to describe use case scenarios or to design a good object-oriented system.

Mermaid可以渲染时序图。时序图的代码如下所示：

Mermaid can render sequence diagrams. The code for a sequence diagram looks like this:

语法 - Syntax

参与者 - Participants

参与者可以隐式地定义，就像上面的示例一样。mermaid也支持通过 participant 关键字显式地定义参与者。

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:

别名 - Aliases

可以为参与者定义一个快捷方式，如下所示：

Actors can be defined with an alias, using the as keyword:

动作 - Actions

可以使用符号 ->、-->、->>、-->> 来表示实线或虚线的箭头。可以添加文本用于描述箭头表示的交互。比如 -> 箭头后面可以添加 : text。

There is a slight difference between:

-> used for solid arrow
--> used for dotted arrow
->> used for solid arrow with async semantic and should be used to represent calls that are not waited for to return. Typically used in a request-response pattern to represent the request.
-->> used for dotted arrow with async semantic. Generally used to model a response being returned from a request-response pattern.

You can add a text to your arrow using :<text> after the arrow characters or before for the returned response.

激活状态 - Activations

可以使用 activate 和 deactivate 关键字来表示参与者的激活状态。

It is possible to activate and deactivate participants, by using activate and deactivate

省略 activate 和 deactivate 关键字时会自动激活。

Activations can be stacked for same actor:

备注 - Notes

可以通过 Note [ right of | left of | over ] [Actor]: Text 的语法添加备注。

It is possible to add notes to a sequence diagram. This is done by the notation Note [ right of | left of | over ] [Actor]: Text where text is the text inside the note.

可以在某个参与者的右侧或左侧放置备注：

See the example below:

可以在多个参与者上方放置备注：

It is also possible to create notes spanning two participants:

循环 - Loops

可以使用 loop 关键字表示循环。循环中的内容要缩进。

It is possible to express loops in a sequence diagram. This is done by the notation loop Loop text. To add content to loop, indent it.

See the example below:

选择 - Alt

可以使用 alt 关键字表示选择。选择中的内容要缩进。

It is possible to express alternative paths in a sequence diagram. This is done by the notation alt Description. To add content to alt, indent it.

See the example below:

并行 - Parallel

可以使用 par 关键字表示并行。并行中的内容要缩进。

It is possible to show actions that are happening in parallel. This is done by the notation par [Action 1] and [Action 2]. To add content to a parallel block, indent it.

See the example below:

背景高亮 - Background Highlighting

可以使用 rect 关键字高亮某一部分图表的背景。

It is possible to highlight flows by providing colored background rects. This is done by the notation rect rgb(0, 255, 0). To add content to a rect block, indent it.

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

可以使用 HTML 字符名称来转义字符。

It is possible to escape characters using the syntax exemplified here.

Numbers given are base 10, so # can be encoded as #35;. It is also supported to use HTML character names.

Styling

可以对图表的各个部分应用样式：

It is possible to style the sequence diagram in a limited way. Currently the three configurations below are supported:

%%{init: { 'theme': 'base' }}%%
%%{init: { "theme": "dark", 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
%%{init: { 'theme': 'base', 'themeVariables': { 'primaryTextColor': '#00ff00', 'actorLineColor': '#ff0000'}}}%%

你需要将这个配置加在你的图表定义前面以使 theme 生效，如下所示：

You need to add this configuration before your diagram definition, as shown below:

片段化循环 - Fragmented Loops

要创建一个片段化循环，需要像通常一样定义循环，并将不重复的片段放在一个可选部分中。

To create a fragmented loop, define your loop as you normally would, placing the fragments that don’t repeat inside of an optional section.

sequenceDiagramConsumer-->>API: Book somethingloop 3 timesAPI-->>BookingService: Start booking processbreak when the booking process failsAPI-->>Consumer: show failureendalt Hotel 1 not availableAPI-->>BookingService: Try another hotelendopt If hotel 2 is availableAPI-->>Consumer: Send confirmationendAPI-->>Consumer: Send final confirmationend

片段化替代路径 - Fragmented Alt

片段化替代路径与常规替代路径类似，但可以中断和继续替代路径。

Fragmented alt is similar to regular alt. The difference being that it allows for a breaking out and a continuation of the alt scenario.

sequenceDiagramConsumer-->>API: Start booking processAPI-->>BookingService: Start booking processalt Booking succeedsBookingService-->>API: Booking succeedsAPI-->>Consumer: Booking succeedselse Booking failsBookingService-->>API: Booking failedbreak Valid alternative accomodations existAPI-->>Consumer: Suggest alternative accomodationsalt Consumer accepts one of the alternativesConsumer-->>API: Consumer accepts alternativeAPI-->>BookingService: Start booking process with alternativeBookingService-->>API: Booking succeedsAPI-->>Consumer: Booking succeedselse Consumer does not accept alternativesConsumer-->>API: Consumer rejects alternativeAPI-->>Consumer: Booking failsendendend

注意片段化替代路径中的 break 语句。当没有片段化替代路径可用时，break 指令允许您指定当前替代路径应如何中断。

Note the “break” inside the fragmented alt. The “break” allows the developer to specify under what circumstances that current alt fragment should break.

严格模式 - Strict mode

可以通过在图表定义上方添加指令来启用严格模式：

You can enable strict mode on your diagram by adding %%{init: { 'theme': 'base', 'sequence': { 'showSequenceNumbers': true } }%% before your diagram definition like so:

严格模式下不允许使用旧的语法（如 -->），并且必须使用新的语法（如 ->> 或 -->> 表示异步）。此外，还必须使用 activate 和 deactivate 关键字来表示激活状态。

In strict mode, only the new notation is allowed (e.g. --> is forbidden, must use -->>, for async) and sequence numbers are added to the diagram. Strict mode also enables showSequenceNumbers, this shows sequence numbers on the diagram.

箭头类型 - Arrow types

There are six types of arrows currently supported:

Type	Description
->	Solid line without arrow
–>	Dotted line without arrow
->>	Solid line with arrowhead
–>>	Dotted line with arrowhead
-x	Solid line with a cross at the end
–x	Dotted line with a cross at the end