news 2026/10/21 11:36:58

Mermaid之时序图

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Mermaid之时序图

时序图 Sequence Diagram

Mermaid 手册 · 第 03 篇 / 共 16 篇

参与者、消息箭头、生命线激活、逻辑块(alt/loop/par/opt/critical/break)、分组框与序号。

适用版本:Mermaid 11.x 主线版本;标有 beta 的图表类型语法可能随版本演进。


时序图 Sequence Diagram

用于表达"谁在什么时间给谁发了什么消息",是接口文档、协议说明、链路分析的主力。

基础示例

数据库服务端浏览器数据库服务端浏览器用户点击登录1POST /login2查询用户3用户记录4200 + token5跳转首页6用户

参与者声明

participant A %% 普通参与者 participant A as 别名 %% 带显示名 actor A %% 人形图标 actor A as 用户

participant的声明顺序决定左右排列顺序;未声明而直接出现的参与者会按首次出现顺序自动创建。

消息箭头

语法外观语义
A->B实线,无箭头少见
A-->B虚线,无箭头少见
A->>B实线 + 实心箭头同步调用
A-->>B虚线 + 实心箭头异步返回 / 响应
A-xB实线 + 叉消息丢失 / 失败
A--xB虚线 + 叉异步失败
A-)B实线 + 开箭头异步消息
A--)B虚线 + 开箭头异步消息(返回)
A<<->>B双向实线双向通信(较新版本)
A<<-->>B双向虚线双向通信(较新版本)

生命线激活

activate S %% 或 S->>+S: 简写 deactivate S %% 或 S-->>-S: 简写

简写形式把+/-直接放在箭头上,写起来更紧凑:

BABA请求响应

逻辑块

循环

BABAloop[每 5 秒]心跳pong

条件分支

DCADCAalt[缓存命中][缓存未命中]读缓存命中数据查数据库数据

可选(单分支)

LALAopt[开启了审计]写审计日志

并行

CBACBApar[并行请求]请求 B请求 C

临界区 / 断言(critical)

BABAcritical[建立连接][连接超时]connect重试

强制中断(break)

BABAbreak[参数非法]返回 400

注释

Note left of A: 左侧注释 Note right of A: 右侧注释 Note over A: 覆盖单个参与者 Note over A,B: 跨参与者注释

支持<br/>换行(在允许 HTML 的渲染端)。

分组框(box)

给一组参与者加外框与配色,适合按"内网/外网""客户端/服务端"划分:

服务端客户端API移动 App浏览器API移动 App浏览器请求请求

序号与自动编号

autonumber %% 自动给每条消息编号 autonumber 10 %% 从 10 开始 autonumber 10 5 %% 从 10 开始,步长 5

参与者创建与销毁

渲染错误:Mermaid 渲染失败: The destroyed participant undefined does not have an associated destroying message after its declaration. Please check the sequence diagram.

其他配置

%%{init: {'sequence': {'mirrorActors': false, 'showSequenceNumbers': true, 'wrap': true}}}%%

常用项:mirrorActors(底部是否镜像参与者)、showSequenceNumbers、wrap、messageAlign、actorMargin、diagramMarginX/Y。


版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/21 11:36:14

POT规范|一套个人自研NPM包本地生命周期管理体系

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/21 11:30:15

权限模型落地:RBAC表设计与接口鉴权实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/21 11:29:18

从 H.264 裸流到 RTSP 推流:一次完整的工程实现

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/21 11:26:10

EmulatorJS 3 步跑通:浏览器模拟器前端,本地就能开玩

EmulatorJS 3 步跑通&#xff1a;浏览器模拟器前端&#xff0c;本地就能开玩 【免费下载链接】EmulatorJS A web-based frontend for RetroArch 项目地址: https://gitcode.com/GitHub_Trending/em/EmulatorJS 想在网页里挂一个能跑老游戏的入口&#xff0c;又不想自己搭…

作者头像 李华