使用 Mermaid 生成时序图

简介

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 Mermaid 通过允许用户创建便于修改的图表来解决这一难题

基本语法

Participants

Participants 定义了时序图中的各个参与者

代码：

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

效果：

Actors

如果想使用角色符号而不是带有文本的矩形，可以按照以下方式使用actor语句。

代码：

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

效果：

Aliases

可以为参与者和角色设置别名

代码：

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

效果：

Grouping / Box

角色可以分组在垂直框中。可以使用以下表示法定义颜色（如果不指定，将为透明）或描述性标签：

代码：

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?

效果：

Messages

消息可以以两种方式显示，一种是实线，另一种是虚线。

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

类型	描述
->	无箭头的实线
-->	无箭头的虚线
->>	带箭头的实线
-->>	带箭头的虚线
-x	实线末端有十字标记
--x	虚线末端有十字标记
-)	实线末端有开放箭头（异步）
--)	虚线末端有开放箭头（异步）

Activations

可以激活和停用参与者。激活和停用可以通过专用声明来实现：

代码：

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

效果：

Notes

可以向时序图中添加注释。

代码：

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

效果：

Loops

在序列图中可以表示循环。这是通过以下表示法实现的：

代码：

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

效果：

Alt

在序列图中可以表示替代路径。这是通过以下表示法实现的：

代码：

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

可以显示并行发生的动作

代码：

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

效果：

如何快速开始

到这里，你应该已经对基本语法有了了解，可以在这个在线编辑器里面直接体验： Mermaid Live Editor