如何用mermaid绘制时序图

[FrankKai]

• 为什么我选择用mermaid绘图
• 最简demo
• 排序
• 线段
• 活动期
• 备注
• 循环
• 注释
• 甘特图模拟js加载

为什么我选择用mermaid绘图

有尝试过一些绘图软件，例如draw.io，processon等等，这些绘图软件虽然强大，但都有一个通病：需要手动拖拽元素、连接线条、调整繁琐。对于绘制一些简单的时序图或者流程图而言，mermaid是一个非常好的选择。

优点如下：

• 无需关注线条链接，粗细等等UI细节
• 可以在markdown中用mermaid绘图，就好比用md写文档和用word写文档做对比
• 语法简单，结构清晰，便于维护和更新

[FrankKai]

最简demo

这个demo包含了，参与者，带箭头实线，带箭头虚线，备注，循环，可以覆盖常见场景。

• mermaid作为markdown代码片段的一种类型，标注后支持md即可解析
• sequenceDiagram声明图形为时序图

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

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

Loading

[FrankKai]

排序

语法：participant

通过participant进行排序，由上至下，先出现的位于更左侧。

```mermaid
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

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

Loading

别名/短命名

participant可以通过as设置alias，从而提升绘图效率

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

Loading

[FrankKai]

线段

语法： ->, -->, ->>, -->>, -x, --x
-是实线，--是虚线；>无箭头，>>带箭头；x带叉号

```mermaid
sequenceDiagram

participant A as Alice
participant B as Bob

    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A->B: 无箭头实线
    A-->B: 无箭头虚线
    A-x B: 有箭头实线，加上叉号
    A--x B: 有箭头虚线，加上叉号
```

sequenceDiagram

participant A as Alice
 participant B as Bob

    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A->B: 无箭头实线
    A-->B: 无箭头虚线
    A-x B: 有箭头实线，加上叉号
    A--x B: 有箭头虚线，加上叉号

Loading

[FrankKai]

活动期

语法：activate deactivate

活动期是垂直方向上的一个矩形，代表一个活动周期。

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

Loading

简写

可以通过+/-来简写

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

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

Loading

[FrankKai]

备注

语法：Note [ right of | left of | over ] [Actor]

用于在链路间增加一些备注说明，可以左侧，可以右侧，也可以横跨。

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

sequenceDiagram
    participant John
    Note right of John: Text in note

Loading

```mermaid
sequenceDiagram
    participant John
    Note left of John: Text in note
```

sequenceDiagram
    participant John
    Note left of John: Text in note

Loading

```mermaid
sequenceDiagram
    participant John
    Note over of John: Text in note
```

sequenceDiagram
    participant John
    Note over John: Text in note

Loading

[FrankKai]

循环

语法：loop end

可用于表示轮询，定时任务等等。

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

Loading

[FrankKai]

注释

语法：%%

```mermaid
sequenceDiagram
    %% 我是一个注释，你看不到我
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    %% 我是另一个注释，你也看不到我
```

sequenceDiagram
    %% 我是一个注释，你看不到我
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    %% 我是另一个注释，你也看不到我

Loading

[FrankKai]

甘特图模拟js加载

gantt
    dateFormat HH:mm:ss
    axisFormat %H:%M:%S

    section js fetching
    js资源1 :done, 10:00:00, 1m
    慢js :active, 10:01:00, 5m
    js资源2 : 10:01:00, 1m

gantt
    dateFormat HH:mm:ss
    axisFormat %H:%M:%S

    section js fetching
    js资源1 :done, 10:00:00, 1m
    慢js :active, 10:01:00, 5m
    Task 3 : 10:06:00, 1m

mermaid在线编辑器：https://mermaid.live/