序列图¶

序列图是一种交互图，显示流程如何相互操作以及以何种顺序操作。

Mermaid 可以渲染序列图。

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

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

注解

关于节点的说明，由于 mermaid 语言的脚本方式，“end” 这个词有可能破坏图表。

如果不可避免，必须使用小括号 ()、引号 “” 或大括号 {}，[] 来括住 “end” 这个词：(end), [end], {end}

语法¶

参与者¶

参与者的定义可以是隐性的，就像本页面的第一个例子一样。参与者或行动者是按照图表源文本中的出现顺序呈现的。有时你可能想以不同的顺序显示参与者，而不是他们在第一条信息中出现的方式。可以通过以下方式来指定行动者的出现顺序：

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

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 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!

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

信息¶

信息可以有两种显示方式，要么是实线，要么是虚线。

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

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

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.
-)	Solid line with an open arrow at the end (async)
–)	Dotted line with a open arrow at the end (async)

激活¶

激活和停用一个行为体是可能的。(去)激活可以是专门的声明。

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

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!

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!

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 | left of | over ] [Actor]: Text 中的内容：

sequenceDiagram
    participant John
    Note right of John: Text in note

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

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

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

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

Parallel¶

有可能显示平行发生的行动。

这可以通过以下符号来实现

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

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

背景高亮¶

可以通过提供彩色的背景矩形来突出流量。这可以通过以下符号来实现。

颜色是用 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 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
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!

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

给出的数字是基数10，所以 # 可以编码为 #35;。也支持使用 HTML 字符名称。

因为分号可以代替换行符来定义标记，你需要使用 #59; 来在消息文本中包含分号。

sequenceNumbers¶

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

    <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!

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!

Actor 菜单¶

行为体可以有弹出式菜单，其中包含指向外部页面的个性化链接。例如，如果一个角色代表一个网络服务，有用的链接可能包括一个指向服务健康仪表板的链接，包含服务代码的 repo，或者描述服务的维基页面。

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

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!

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!

高级 Menu 语法¶

有一种高级语法是依靠 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!

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!

nocode-book 0.1 文档

序列图

导航

序列图¶

语法¶

参与者¶

行动者¶

别名¶

信息¶

激活¶

注解¶

循环¶

Alt¶

Parallel¶

背景高亮¶

转义字符的实体代码¶

sequenceNumbers¶

Actor 菜单¶

高级 Menu 语法¶

序列图¶

语法¶

参与者¶

行动者¶

别名¶

信息¶

激活¶

注解¶

循环¶

Alt¶

Parallel¶

背景高亮¶

转义字符的实体代码¶

sequenceNumbers¶

Actor 菜单¶

高级 Menu 语法¶