【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.

sequenceDiagram
    Consumer-->>API: Book something
    loop 3 times
        API-->>BookingService: Start booking process
        break when the booking process fails
            API-->>Consumer: show failure
        end
        alt Hotel 1 not available
            API-->>BookingService: Try another hotel
        end
        opt If hotel 2 is available
            API-->>Consumer: Send confirmation
        end
        API-->>Consumer: Send final confirmation
    end

片段化替代路径 - 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.

sequenceDiagram
    Consumer-->>API: Start booking process
    API-->>BookingService: Start booking process
    alt Booking succeeds
        BookingService-->>API: Booking succeeds
        API-->>Consumer: Booking succeeds
    else Booking fails
        BookingService-->>API: Booking failed
        break Valid alternative accomodations exist
            API-->>Consumer: Suggest alternative accomodations
            alt Consumer accepts one of the alternatives
                Consumer-->>API: Consumer accepts alternative
                API-->>BookingService: Start booking process with alternative
                BookingService-->>API: Booking succeeds
                API-->>Consumer: Booking succeeds
            else Consumer does not accept alternatives
                Consumer-->>API: Consumer rejects alternative
                API-->>Consumer: Booking fails
            end
        end
    end

注意片段化替代路径中的 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