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 关键字旧版用 participant4、老版本语法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 版本。