**注意**代码中未高亮显示、老版本代码可以高亮显示此高亮指的是源码不是下面明文的示例代码流程图mermaid官方网站文档教程链接(英文)社区维护的中文文档站1、新版本语法flowchart如下仅是基础的常用功能语法如需更全面内容可参考官网教程文档方向标识标识含义示例TD从上到下flowchart TDLR从左到右flowchart LRBT从下到上flowchart BTRL从右到左flowchart RL节点规则核心规则节点是流程图的最小单元语法格式节点ID[显示文本]核心规则节点 ID唯一且无特殊字符仅字母、数字、下划线不能以数字开头区分大小写A和a是两个不同节点示例login123✅、123login❌、login-123❌。节点形状与语法固定格式不能混用符号形状语法格式规则说明矩形ID[文本]方括号必须成对文本可含空格圆角矩形ID(文本)圆括号必须成对菱形(判断)ID{文本}大括号必须成对双矩形ID[[文本]]双括号必须成对旗帜形ID文本]左尖括号 右方括号特殊字符处理节点文本含[]/()/{}等符号时需用反斜杠转义基础连线箭头规则连线样式语法规则说明普通实线–必须是两个短横线 箭头虚线-.-短横线 点 箭头加粗实线两个等号 箭头带标签–标签–标签需放在两个短横线之间双向箭头–左右箭头成对连线方向默认跟随布局方向也可手动指定如A -down- B强制向下支持up/down/left/right多节点连线可链式编写也可分行效果一致子图规则子图用于拆分复杂流程语法subgraph 子图名称 内容 endsubgraph和end必须成对出现子图名称可含空格子图内可自定义布局方向覆盖全局方向子图内节点 ID 仍需全局唯一不能与外部节点重名。注释规则单行注释%% 注释内容必须以%%开头可放在行首 / 行尾多行注释无原生支持需每行加%%。样式规则自定义节点/连线样式classDef定义样式类:::绑定到节点样式类名区分大小写linkStyle定义连线样式参数为「连线索引从 0 开始 样式」。特殊规则避坑重点空格规则关键字如flowchart/subgraph后必须加空格节点 / 连线前后的空格不影响推荐加空格提升可读性换行规则一条完整的节点 / 连线语句可换行但需保证语法完整大小写规则flowchart/subgraph/end等关键字不区分大小写FlowChart/FLOWCHART均可但节点 ID、样式类名区分大小写。2、代码示例# 流程图相关代码 flowchart TD %% 先定义子图和内部节点 subgraph 缓存系统 CacheCheck{缓存命中?} CacheReturn[返回缓存数据] CacheWrite[写入缓存] end subgraph 数据库系统 DBQuery[查询数据库] DBOK{查询成功?} DBError[返回 500 错误] end %% 再定义全局节点、连线 Start((开始)) End((结束)) Start -- Req[接收请求] Req -- Auth{鉴权通过?} Auth --|否| AuthFail[返回 401] AuthFail -- End Auth --|是| CacheCheck CacheCheck --|是| CacheReturn CacheReturn -- Log[记录访问日志] Log -- End CacheCheck --|否| DBQuery DBQuery -- DBOK DBOK --|否| DBError DBError -- Log DBOK --|是| CacheWrite CacheWrite -- Response[返回结果] Response -- Log3、效果示例数据库系统缓存系统否是是否否是缓存命中?返回缓存数据写入缓存查询数据库查询成功?返回 500 错误开始结束接收请求鉴权通过?返回 401记录访问日志返回结果4、老版本语法graph新版本功能可以支持更丰富的内容旧版本就不介绍太多了graph TD st[开始] -- op[登录]开始登录5、新旧版本差异graph是 Mermaidv10 之前的通用语法flowchart是 v10 及以后推出的专用流程图语法两者的差异主要体现在「功能支持」和「未来维护」上而非「基础渲染效果」维度graph旧版flowchart新版版本背景v10 前的默认流程图语法通用v10 后专为流程图设计专用基础功能支持节点、普通连线、子图够用完全兼容 graph 的基础功能高级功能仅支持少量箭头样式无布局优化支持自定义连线、多类型箭头、布局微调、样式增强官方态度仅维护不新增功能兼容为主重点迭代持续新增流程图专属特性兼容性全版本支持老 Typora 也能用v10 支持新版 Typora 已适配基础场景几乎无差异高级场景flowchart 新增专属功能graph 不支持更丰富的连线控制布局与节点优化更灵活的子图与交互6、版本兼容性Typora 版本 1.0内置 Mermaid v10flowchart仅等价于graph高级功能无效Typora 版本 ≥ 1.0内置 Mermaid ≥ v10flowchart可使用所有高级特性如何查版本Typora → 帮助 → 关于 Typora可看到 Typora 版本。