Typora绘制-时序&序列图

**注意：**时序&序列图的高亮新旧版本会正常显示

时序&序列图

mermaid官方网站文档教程链接(英文)

社区维护的中文文档站

1、新版本语法

sequenceDiagram如下仅是基础的常用功能语法，如需更全面内容可参考官网教程文档

参与者
复制代码
```
participant A
actor 用户
```
定义角色，actor 侧重用户角色
同步消息
复制代码
```
A->>B: 文本
```
实线箭头，主动调用
返回消息
复制代码
```
B-->>A: 文本
```
虚线箭头，响应返回
激活态
复制代码
```
activate A
deactivate A
```
显示对象方法调用中的执行状态
循环
复制代码
```
loop 条件

  A->>B: 重复操作

end
```
重复执行的逻辑块

分支

复制代码

alt 条件 1
A->>B: 分支 1
else 条件 2
A->>B: 分支 2
end

多条件判断分支

注释（同理标注提示，非代码注释）
复制代码
```
Note left of A: 文本
Note over A,B: 文本
```
左侧 / 跨角色添加说明

并行

复制代码

par 任务 1
A->>B: 操作 1
and 任务 2
C->>D: 操作 2
end

并行执行的流程块

注释规则
- 单行注释：%% 注释内容（必须以 %% 开头，可放在行首 / 行尾）；
- 多行注释：无原生支持，需每行加 %%；
- 可放在行首、行尾，也可单独占一行，不影响代码解析；
- 注释内可包含任意字符（中文、符号、空格），无需转义。
特殊规则（避坑重点）
- 语法核心坑：特殊字符转义、块语法闭合、参与者命名唯一，是避免时序图不渲染的关键；
  
  特殊字符未转义，导致解析失败，节点文本、消息文本含 :/()/[]/{} 等特殊符号，或中文全角标点，会直接导致时序图不渲染。用反斜杠 \ 转义特殊符号，全角标点替换为半角
- 渲染坑：控制消息文本长度、避免嵌套过深，防止布局错乱；
- 兼容性坑：旧版删除样式配置、用 alt 替代 opt，复制代码先清隐形字符。

2、代码示例

复制代码

sequenceDiagram
    %% 新版全局配置（自定义样式）
    %%{init: {'sequence': {'actorFontSize': 12, 'messageFontColor': '#1890ff'}}}%%
    
    actor 用户  // 新版 actor 关键字（旧版用 participant）
    participant 前端
    participant 后端
    
    %% 新版简化激活态：->>+ 激活，-->>- 取消
    用户->>+前端: 点击登录
    前端->>+后端: 提交账号密码
    后端-->>-前端: 返回 token
    前端-->>-用户: 跳转到首页
    
    %% 新版可选分支（opt）
    opt 记住密码
        前端->>前端: 缓存 token 到本地
    end
    Note over 前端,后端: 登录完成

3、效果示例

用户后端前端用户后端前端 opt $记住密码$ 登录完成用户 // 新版 actor 关键字（旧版用 participant）点击登录提交账号密码返回 token 跳转到首页缓存 token 到本地用户 // 新版 actor 关键字（旧版用 participant）

4、老版本语法

sequenceDiagram新版本功能可以支持更丰富的内容，旧版本写法上几乎没有什么变动，头部声明也没有变化，就不介绍太多了。

复制代码

sequenceDiagram
    %% 旧版/新版都支持的基础语法
    participant A as 客户端
    participant B as 服务端
    A->>B: 同步请求  // 实线箭头（主动调用）
    B-->>A: 异步响应  // 虚线箭头（返回结果）

服务端客户端服务端客户端同步请求 // 实线箭头（主动调用）异步响应 // 虚线箭头（返回结果）

5、新旧版本差异

新旧语法的主要区别（新增特性 / 简化写法）

功能 / 语法	旧版语法	新版语法（v1.0+）	说明
参与者简写	仅支持 `participant A`	支持 `actor 用户`/`A->B` 隐式定义	`actor` 更贴合 "用户角色" 语义
激活态	仅 `activate A`/`deactivate A`	新增 `A->>+B`（激活）/`A-->>-B`（取消）	简化激活态写法
注释位置	仅 `Note left/right of A`	新增 `Note over A,B: 文本`（跨角色）	注释更灵活
配置方式	无全局配置	支持 `%%{init: {...}}%%` 自定义样式	可改字体 / 颜色 / 间距
并行流程	无原生支持（需嵌套注释模拟）	原生 `par...and...end`	官方支持并行逻辑
分支语法	仅 `alt...else...end`	新增 `opt...end`（可选分支）	补充分支类型

基础场景：几乎无差异
高级场景：flowchart 新增专属功能
- 更丰富的连线控制
- 布局与节点优化
- 更灵活的交互

6、版本兼容性

Typora 版本 < 1.0 ：内置 Mermaid < v10，仅支持旧版核心语法，新版简化写法（如 A->>+B、actor）会降级为普通消息，激活态不生效，但流程仍能渲染；
Typora 版本 ≥ 1.0：内置 Mermaid ≥ v10，完全支持新旧语法，新版简化写法和样式配置均可正常使用；
如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。