如果利用Mermaid在markdown文档中画时序图

在markdown文档中，可以利用mermaid插件来画时序图

以如下图为例：

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

语法

Participants

participants 是时序图中的参与者，其可以在前面明确定义，如下例子所示；也可以在画图的过程中隐含定义，如上述例子一样。

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

Actors

actor 与 participant 类似，只是图形表现的方式不太一样，如下所示：

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

别名

通过别名的方式，participant或者actor可以有一个方便的标识及对应的详细描述，如下所示：

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!

描述

[参与者][箭头][参与者]:描述内容

箭头的种类如下：

类型	描述
->	没有箭头的实线
-->	没有箭头的虚线
->>	有箭头的实线
-->>	有箭头的虚线
-x	末端有x的实线
--x	末端有x的虚线
-)	Solid line with an open arrow at the end (async)
--)	Dotted line with a open arrow at the end (async)

Activations

activate和deactivate的几种使用方式及效果

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

sequenceDiagram Alice->>John: hello, 你是刘曦文吗？ activate John John-->>Alice: 不是，我试试傻逼 deactivate John

也可以用+/-号来代替

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

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

activation功能可以叠加

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!

Notes

可以在序列图上给participant添加注解功能，该注解可以在participant的左边或者右边示例如下：

sequenceDiagram
    participant John
    Note right of John: Text in note

sequenceDiagram participant John Note right of John: Text in note

也可以将注解放到多个participant上

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

Loops

时序图中的循环语法如下：

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

alts

时序图还支持分支的用法，分支语法如下：

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

Comments

时序图中可以添加注释，用法如下：

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