admin管理员组文章数量:1596555
用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/intro/
除了时序图之外,该网站还支持自动生成类图/状态图/流程图等图表。
进入链接页面在左侧选择对应类型的图介绍即可。
公众号二两仙气儿 欢迎同好交流
版权声明:本文标题:Mermaid在线生成时序图 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726616746a1078273.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论