时序图 - 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:

Alice John Hello John, how are you? Great! See you later! Alice John

语法 - 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:

John Alice Hello John, how are you? Great! John Alice

别名 - Aliases

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

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

Alice John Hello John, how are you? Great! Alice John

动作 - 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.

Alice John Hello John, how are you? Great! Alice John

激活状态 - Activations

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

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

Alice John Hello John, how are you? Great! Alice John

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

Activations can be stacked for same actor:

Alice John Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Alice John

备注 - 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:

John Text in note John

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

It is also possible to create notes spanning two participants:

Alice John Hello John, how are you? A typical interaction Alice John

循环 - 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:

Alice John Hello John, how are you? Great! loop [Every minute] Alice John

选择 - 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:

Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob

并行 - 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:

Alice Bob John Hello guys! Hello guys! par [Alice to Bob] [Alice to John] Hi Alice! Hi Alice! Alice Bob John

背景高亮 - 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:

Alice John Alice calls John. Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Did you want to go to the game tonight? Yeah! See you there. Alice John

注释 - 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.

Alice John Hello John, how are you? Great! Alice John

实体类 - Entity codes to escape characters

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

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

A B I ♥ you! I ♥ you ∞ times more! A B

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:

Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob

片段化循环 - 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:

Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob

严格模式下不允许使用旧的语法（如 -->），并且必须使用新的语法（如 ->> 或 -->> 表示异步）。此外，还必须使用 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:

TypeDescription
->Solid line without arrow
–>Dotted line without arrow
->>Solid line with arrowhead
–>>Dotted line with arrowhead
-xSolid line with a cross at the end
–xDotted line with a cross at the end
# microsoft
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊