序列图

序列图是一种交互图，它显示了进程如何相互操作以及以什么顺序操作。

Code Chart 可以渲染序列图。

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

"end"

"end"

(end), [end], {end}

句法

参与者

可以像本页的第一个示例中那样隐式定义参与者。参与者或参与者按图表源文本中的出现顺序呈现。有时，您可能希望以不同于他们在第一条消息中出现的顺序显示参与者。可以通过执行以下操作来指定演员的出现顺序：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice

演员

如果您特别想使用演员符号而不是带有文本的矩形，您可以使用下面的演员语句来做到这一点。

sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice

别名

演员可以有一个方便的标识符和一个描述性的标签。

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

留言

消息可以是实线或虚线显示的两个。

[Actor][Arrow][Actor]:Message text

当前支持六种类型的箭头：

激活

可以激活和停用演员。(de)activation 可以是专门的声明：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

+通过将/-后缀附加到消息箭头还有一个快捷表示法：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

可以为同一个actor堆叠激活：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

笔记

可以向序列图添加注释。这是通过符号 Note [ right of | 完成的。左边| over ] [Actor]：笔记内容中的文本

请参见下面的示例：

sequenceDiagram
    participant John
    Note right of John: Text in note

也可以创建跨越两个参与者的注释：

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

循环

可以在序列图中表示循环。这是由符号完成的

loop Loop text
... statements ...
end

请参见下面的示例：

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

Alt

可以在序列图中表示替代路径。这是由符号完成的

alt Describing text
... statements ...
else
... statements ...
end

或者如果有可选的序列（如果没有其他）。

opt Describing text
... statements ...
end

请参见下面的示例：

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

平行

可以显示并行发生的动作。

这是由符号完成的

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

请参见下面的示例：

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

也可以嵌套并行块。

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

临界区

可以显示在有条件的情况下必须自动发生的动作。

这是由符号完成的

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

请参见下面的示例：

sequenceDiagram
    critical Establish a connection to the DB
        Service-->DB: connect
    option Network timeout
        Service-->Service: Log error
    option Credentials rejected
        Service-->Service: Log different error
    end

也有可能根本没有选择

sequenceDiagram
    critical Establish a connection to the DB
        Service-->DB: connect
    end

这个关键块也可以嵌套，相当于par上面看到的语句。

休息

可以在流中指示序列的停止（通常用于对异常进行建模）。

这是由符号完成的

break [something happened]
... statements ...
end

请参见下面的示例：

sequenceDiagram
    Consumer-->API: Book something
    API-->BookingService: Start booking process
    break when the booking process fails
        API-->Consumer: show failure
    end
    API-->BillingService: Start billing process

背景突出显示

可以通过提供彩色背景矩形来突出显示流。这是由符号完成的

颜色是使用 rgb 和 rgba 语法定义的。

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

请参阅以下示例：

sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

注释

可以在序列图中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以%%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!

用于转义字符的实体代码

可以使用此处示例的语法来转义字符。

sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!

给出的数字以 10 为底，因此#可以编码为#35;. 还支持使用 HTML 字符名称。

因为可以使用分号而不是换行符来定义标记，所以您需要#59;在消息文本中使用分号。

序列号

可以在序列图中的每个箭头上获得一个序列号。这可以在添加代码图表到网站时进行配置，如下所示：

    <script>
      mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
    </script>

也可以通过图表代码打开它，如图所示：

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

演员菜单

演员可以有弹出菜单，其中包含指向外部页面的个性化链接。例如，如果参与者代表 Web 服务，有用的链接可能包括指向服务健康仪表板的链接、包含服务代码的存储库或描述服务的 wiki 页面。

这可以通过添加一个或多个具有以下格式的链接行来配置：

link <actor>: <link-label> @ <link-url>

sequenceDiagram
    participant Alice
    participant John
    link Alice: Dashboard @ https://dashboard.contoso.com/alice
    link Alice: Wiki @ https://wiki.contoso.com/alice
    link John: Dashboard @ https://dashboard.contoso.com/john
    link John: Wiki @ https://wiki.contoso.com/john
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

高级菜单语法

有一种高级语法依赖于 JSON 格式。如果您对 JSON 格式感到满意，那么它也存在。

这可以通过添加具有以下格式的链接行来配置：

links <actor>: <json-formatted link-name link-url pairs>

下面是一个例子：

sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

造型

序列图的样式是通过定义许多 css 类来完成的。在渲染期间，这些类是从位于 src/themes/sequence.scss 的文件中提取的

使用的类

示例样式表

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;
}

配置

是否可以调整渲染序列图的边距。

这是通过定义mermaid.sequenceConfig.

mermaid.sequenceConfig = {
    diagramMarginX: 50,
    diagramMarginY: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    mirrorActors: true
};

可能的配置参数：