
**注意**状态图的高亮新旧版本会正常显示状态图mermaid官方网站文档教程链接(英文)社区维护的中文文档站1、新版本语法stateDiagram-v2如下仅是基础的常用功能语法如需更全面内容可参考官网教程文档起点/终点[*]必须有状态转移--冒号后面写触发条件 / 事件状态定义状态名 状态名: 说明文字 state 长状态名 {} # 复合状态嵌套转移写法[*] -- S1 # 起点 S1 -- S2 # 普通转移 S1 -- S2: 事件 # 带触发条件 S2 -- [*] # 结束复合状态嵌套状态state 父状态 { [*] -- 子状态1 子状态1 -- 子状态2 }分支判断choicestate 分支 choice 状态A -- 分支 分支 -- 状态B: 条件1 分支 -- 状态C: 条件2fork /join并行state 分叉 fork state 合并 join注释规则单行注释%% 注释内容必须以%%开头可放在行首 / 行尾多行注释无原生支持需每行加%%特殊规则避坑重点语法核心坑特殊字符转义、块语法闭合、参与者命名唯一是避免时序图不渲染的关键特殊字符未转义导致解析失败节点文本、消息文本含:/()/[]/{}等特殊符号或中文全角标点会直接导致时序图不渲染。用反斜杠\转义特殊符号全角标点替换为半角渲染坑状态名不能有冒号、换行、特殊符号否则直接不渲染兼容性坑高级功能会有明显差异推荐使用新版本。2、代码示例示例1stateDiagram-v2 [*] -- 待支付: 创建订单 待支付 -- 待发货: 支付成功 待支付 -- 已取消: 超时/用户取消 state 发货中 { [*] -- 拣货 拣货 -- 打包 打包 -- 已揽收 } 待发货 -- 发货中 发货中 -- 已完成: 签收 已完成 -- [*] 已取消 -- [*]示例2stateDiagram-v2 [*] -- 未登录 未登录 -- 登录中: 点击登录 登录中 -- 已登录: 验证成功 登录中 -- 未登录: 密码错误 state 已登录 { [*] -- 正常浏览 正常浏览 -- 锁定中: 超时无操作 锁定中 -- 正常浏览: 解锁 锁定中 -- 未登录: 退出 } 已登录 -- 未登录: 主动退出3、效果示例示例1创建订单支付成功超时/用户取消签收待支付待发货已取消发货中拣货打包已揽收已完成示例2已登录点击登录密码错误超时无操作解锁退出验证成功主动退出未登录登录中正常浏览锁定中4、老版本语法stateDiagram新版本功能可以支持更丰富的内容新旧版本区别较大不建议使用就不介绍太多了。stateDiagram %% 旧版声明 [*] -- 待支付 待支付 -- 已取消: 超时超时待支付已取消5、新旧版本差异新旧语法的主要区别新增特性 / 简化写法基础场景核心兼容仅声明不同两者的核心差异如下表特性旧版stateDiagram新版stateDiagram-v2基础状态 / 转移支持核心逻辑兼容完全兼容旧版核心语法复合状态嵌套支持但布局混乱布局规整嵌套层级清晰分支不支持 / 渲染异常原生支持分支箭头不交叉并行fork/join几乎不可用支持并行状态流转样式自定义无配置项支持%%{init: {...}}%%调样式Typora 兼容性全版本支持但效果差Typora ≥1.0 完美支持旧版也兼容核心逻辑高级场景新增专属功能分支旧版渲染成普通状态新版显示分支节点choice并行状态旧版完全不渲染新版正常显示并行流转fork/join样式自定义仅新版 Typora ≥1.0 支持6、版本兼容性Typora 版本 1.0会自动降级为旧版渲染逻辑但核心的「状态 转移」仍正常显示只是布局 / 高级功能失效不会报错Typora 版本 ≥ 1.0能完整使用分支、并行、样式等所有功能如何查版本Typora → 帮助 → 关于 Typora可看到 Typora 版本。