Mermaid在线生成时序图

用Mermaid语言来绘制时序图

给大家推荐个可以在线生成时序图/类图/流程图的网站，网站根据Mermaid语言自动生成对应的图样。

https://mermaid-js.github.io/mermaid-live-editor/

Mermaid标记语言

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

下面我以时序图为例子来简单介绍下Mermaid标记语言的编写规则。

时序图

//时序图大致的结构如下
sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...

举一个简单的例子：

sequenceDiagram
小王 ->> 小李: bug解决了吗？
小李 -->> 小王: OK了！
小王 ->> 小李: 好

时序图属性介绍

①Participants - 参与者

参与者可以显式定义或者像上述例子一样隐式定义，显式定义语法如下

sequenceDiagram
    participant 小李
    participant 小王
    小李->>小王: Hi 小王
    小王->>小李: 你好，小李
//participant 是参与者的关键字，关键字后是定义的参与者名称

②Actors - 角色

角色就是我们经常见到的“小人图标”，语法如下

sequenceDiagram
    actor 老李
    actor 老王 
    老李->>老王: 早上好
    老王->>老李: 早阿
//actor是角色的关键字，关键字后是定义的角色名称

③Parallel - 并行

表示并行发生的动作，语法如下

//语法规则 par为关键字 连接用and 结束标识为end
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

//示例
sequenceDiagram
    par 小李 to 小王
        小李->>小王: Hello!
    and 小李 to 小张
        小李->>小张: Hello!
    end

④Alt - 条件（判断）

语法格式如下

alt Describing text
... statements ...
else
... statements ...
end
or if there is sequence that is optional (if without else).

opt Describing text
... statements ...
end

示例：

sequenceDiagram
    小李->>小王: bug修复完成了吗，一起吃饭啊？
    alt  bug修复未完成
        小王->>小李: 你先去吧，我就剩一点了
    else bug修复完成
        小王->>小李: 走走走，烧烤！
    end
    opt 其他情况
       小王->>小李: xxxxx
    end

⑤Activations - 激活&取消

可以通过activate和deactivate关键字来表示激活和取消

语法格式如下

sequenceDiagram
    activate [角色标识符]
    deactivate [角色标识符]
    
//activate：用于激活一个角色或对象，将其在序列图中显示为活动状态。
//deactivate：用于取消激活一个角色或对象，将其在序列图中显示为非活动状态

示例：

sequenceDiagram
    小李->>小王: 你好吗？
    activate 小王
    小王-->>小李: 相当好
    deactivate 小王

可以为同一个角色叠加多个激活/取消状态

示例：

sequenceDiagram
    小李->>+小王: 醒醒!上班了
    小李->>+小王: 听见了吗？要迟到了！
    小王-->>-小李: 让我再睡会
    小王-->>-小李: 眼睛睁不开

⑥Loops - 循环

可以在时序图中表示循环，语法如下：

loop text
... statements ...
end

示例:

sequenceDiagram
    Alice->>+Bob: 请求数据
    loop 数据处理
        Bob-->>-Alice: 处理数据
    end

⑦Note - 注释

可以在图中添加注释，语法如下

 Note [方向: 位置] of [对象]: 文本内容
方向：left（左侧）、right（右侧）、over（上方）、under（下方）
位置：相对于对象的位置，可以是具体的像素值或百分比
对象：被注释的对象（角色、组件等）
文本内容：注释的具体内容

示例：

sequenceDiagram
    Alice->>Bob: 请求数据
    Note right of Bob: 数据处理中...
    Bob-->>Alice: 返回数据
    Note left of Alice: 收到数据

⑧Critical Region - 关键区域

语法如下：

//critical：用于标识一个关键路径块，表示其中的操作是必要且关键的，如果出现问题将会中断整个流程。
//option：用于标识一个可选路径块，表示其中的操作是可选的，只有在特定条件下才会执行。
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
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

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

⑨Break - 中断（终止）

break关键字用于表示中断或终止某个流程或路径。

语法如下：

break [条件]
条件：可选参数，表示触发中断的条件。

示例：

sequenceDiagram
    User-->API: 查询数据
    API->>+Database: 执行查询
    break 查询失败时
        Database-->>-API: 返回错误
        API-->>User: 显示错误信息
    end
    API-->>User: 返回查询结果

sequenceDiagram
    User-->>API: 查询数据
    API->>+Database: 执行查询
    break 查询失败时
        Database-->>-API: 返回错误
        API-->>User: 显示错误信息
    end
    API-->>User: 返回查询结果

⑩Message - 消息

可以看到各个角色（对象间）传递消息，有的是用实线，有的是虚线，那么这些消息的具体含义是什么呢？

解释如下：

• ->：不带箭头的实线表示同步消息，发送方发送消息后会等待接收方处理完毕后再继续执行。
• -->：不带箭头的虚线表示异步消息，发送方发送消息后不需要等待接收方处理，可以立即继续执行。
• ->>：带箭头的实线表示返回消息，表示接收方对之前收到的消息进行回应。
• -->>：带箭头的虚线表示返回异步消息，与带箭头的实线类似，但是不需要等待接收方处理。
• -x：末端带有十字的实线表示删除消息，表示发送方取消先前的消息。
• --x：末端带有十字架的虚线表示删除异步消息，与带有十字的实线类似，但是不需要等待接收方处理。
• -)：末端带有开放箭头的实线表示异步消息，表示发送方发送消息后不需要等待接收方处理，并且不关心接收方是否成功接收。
• --)：末端带有开放箭头的虚线表示异步消息，与末端带有开放箭头的实线类似，但是不需要等待接收方处理。

其他：

上述的时序图属性可能并不全面，请以具体流程为准，一些细节可以查阅官网的说明文档。

说明文档链接如下：https://mermaid.js.org/intro/

除了时序图之外，该网站还支持自动生成类图/状态图/流程图等图表。

进入链接页面在左侧选择对应类型的图介绍即可。

公众号二两仙气儿 欢迎同好交流