Mermaid-时序图

Mermaid Markdown
program
发布日期:   2024-01-22
更新日期:   2024-07-04
文章字数:   2.3k
阅读时长:   11 分
阅读次数:  

Mermaid-时序图

序列图是一种交互图，显示进程如何彼此运行以及以什么顺序运行。

Code:

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!

语法

参加者

可以像本页第一个示例中那样隐式定义参与者。 参与者或参与者按照图表源文本中的出现顺序渲染。 有时，你可能希望以不同于第一条消息中的顺序显示参与者。 可以通过执行以下操作来指定角色的出场顺序：

Code:

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

角色

如果你特别想使用角色符号而不是带有文本的矩形，则可以通过使用角色语句来实现，如下所示。

Code:

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

别名

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

Code:

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 创建和销毁 (v10.3.0+)

可以通过消息创建和销毁参与者。 为此，请在消息之前添加创建或销毁指令。

create participant B
A --> B: Hello

创建指令支持参与者/参与者区分和别名。 消息的发送者或接收者可以被销毁，但只能创建接收者。

Code:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree

分组/框

角色可以分组在垂直框中。 你可以使用以下符号定义颜色（如果没有，它将是透明的）和/或描述性标签：

box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
#继承
box transparent Aqua
... actors ...
end

Code:

sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charly?
    B->>C: Hello Charly, how are you?
    box rgb(33,66,99)
    participant D
    participant E
    end
sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charly?
    B->>C: Hello Charly, how are you?
    box rgb(33,66,99)
    participant D
    participant E
    end

信息

消息可以有两条显示，可以是实线，也可以是虚线。

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

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

类型 描述
-> 没有箭头的实线
--> 没有箭头的虚线
->> 带箭头的实线
-->> 带箭头的虚线
-x 末端有十字的实线
--x 末端带有十字的虚线。
-) 末尾带有空心箭头的实线（异步）
--) 末尾带有空心箭头的虚线（异步）

激活

可以激活和停用角色。 (de)activation 可以是专用声明：

Code:

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

还有一种快捷表示法，即在消息箭头后附加 +/- 后缀：

Code:

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

同一角色的激活可以叠加：

Code:

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!

注意

可以向序列图添加注释。 这是通过注释[右边的 | 的左边 | over ] [Actor]: 注意内容中的文本

请参阅下面的示例：

Code:

sequenceDiagram
    participant John
    Note right of John: Text in note
sequenceDiagram
    participant John
    Note right of John: Text in note

还可以创建跨越两个参与者的注意：

Code:

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

还可以添加换行符（一般适用于文本输入）：

Code:

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction<br/>But now in two lines
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
But now in two lines

循环

可以在序列图中表达循环。 这是通过符号完成的

loop Loop text
... statements ...
end

Code:

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 Describing text
... statements ...
else
... statements ...
end

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

opt Describing text
... statements ...
end

请参阅下面的示例：

Code:

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

平行线

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

这是通过符号完成的

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

请参阅下面的示例：

Code:

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!

也可以嵌套并行块。

Code:

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

临界区

可以通过对情况进行条件处理来显示必须自动发生的操作。

这是通过符号完成的

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

请参阅下面的示例：

Code:

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
    option Network timeout
        Service-->Service: Log error
    option Credentials rejected
        Service-->Service: Log different error
    end

也有可能根本没有选项

Code:

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

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

中断

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

这是通过符号完成的

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

请参阅下面的示例：

Code:

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

请参阅下面的示例：

Code:

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.

注释

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

Code:

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

用于转义字符的实体代码

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

Code:

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

可以在序列图中的每个箭头上附加一个序列号。 可以通过图表代码打开它，如下图所示：

Code:

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!
文章作者: 👑Dee👑
文章链接: https://www.saddyfire.cn/2024/01/22/mermaid-sequence/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 👑Dee👑 !
Mermaid Markdown
  目录