Typora绘制-流程图

注意：代码中未高亮显示、老版本代码可以高亮显示，注意：此高亮指的是源码，不是下面明文的示例代码

流程图

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

社区维护的中文文档站

(1)新版本语法

flowchart

语法

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

• 方向标识

  标识	含义	示例
  TD	从上到下	flowchart TD
  LR	从左到右	flowchart LR
  BT	从下到上	flowchart BT
  RL	从右到左	flowchart RL

• 节点规则（核心规则）

  节点是流程图的最小单元，语法格式：节点ID[显示文本]，核心规则

• 节点 ID

  • 唯一且无特殊字符（仅字母、数字、下划线，不能以数字开头）；
  • 区分大小写（A 和 a 是两个不同节点）；
  • 示例：login123 ✅、123login ❌、login-123 ❌。

• 节点形状与语法（固定格式，不能混用符号）：

  形状	语法格式	规则说明
  矩形	ID[文本]	方括号必须成对，文本可含空格
  圆角矩形	ID(文本)	圆括号必须成对
  菱形(判断)	ID	大括号必须成对
  双矩形	ID[[文本]]	双括号必须成对
  旗帜形	ID>文本]	左尖括号 + 右方括号

• 特殊字符处理

  节点文本含 []/()/{} 等符号时，需用反斜杠转义

• 基础连线（箭头）规则

  连线样式	语法	规则说明
  普通实线	-->	必须是两个短横线 + 箭头
  虚线	-.->	短横线 + 点 + 箭头
  加粗实线	===>	两个等号 + 箭头
  带标签	--标签-->	标签需放在两个短横线之间
  双向箭头	<-->	左右箭头成对

• 连线方向

  默认跟随布局方向，也可手动指定（如 A -down-> B 强制向下），支持 up/down/left/right

• 多节点连线

  可链式编写，也可分行，效果一致

• 子图规则

  • 子图用于拆分复杂流程，语法：subgraph 子图名称 + 内容 + end；
  • subgraph 和 end 必须成对出现，子图名称可含空格；
  • 子图内可自定义布局方向（覆盖全局方向）；
  • 子图内节点 ID 仍需全局唯一（不能与外部节点重名）。

• 注释规则

  • 单行注释：%% 注释内容（必须以 %% 开头，可放在行首 / 行尾）；
  • 多行注释：无原生支持，需每行加 %%。

• 样式规则：自定义节点/；连线样式

  • classDef 定义样式类，::: 绑定到节点（样式类名区分大小写）；
  • linkStyle 定义连线样式，参数为「连线索引（从 0 开始）+ 样式」。

• 特殊规则（避坑重点）

  • 空格规则：关键字（如 flowchart/subgraph）后必须加空格，节点 / 连线前后的空格不影响（推荐加空格，提升可读性）；
  • 换行规则：一条完整的节点 / 连线语句可换行，但需保证语法完整；
  • 大小写规则：flowchart/subgraph/end 等关键字不区分大小写（FlowChart/FLOWCHART 均可），但节点 ID、样式类名区分大小写。

代码示例

# 流程图相关代码
flowchart TD nodeSpacing: 100Start((开始))End((结束))Start --> Req[接收请求]Req --> Auth{鉴权通过?}Auth -->|否| AuthFail[返回 401]AuthFail --> EndAuth -->|是| CacheCheck{缓存命中?}CacheCheck -->|是| CacheReturn[返回缓存数据]CacheReturn --> Log[记录访问日志]Log --> EndCacheCheck -->|否| DBQuery[查询数据库]DBQuery --> DBOK{查询成功?}DBOK -->|否| DBError[返回 500 错误]DBError --> LogDBOK -->|是| CacheWrite[写入缓存]CacheWrite --> Response[返回结果]Response --> Log%% 子系统示例subgraph 缓存系统CacheCheckCacheReturnCacheWriteendsubgraph 数据库系统DBQueryDBOKDBErrorend

效果示例

flowchart TDStart((开始))End((结束))Start --> Req[接收请求]Req --> Auth{鉴权通过?}Auth -->|否| AuthFail[返回 401]AuthFail --> EndAuth -->|是| CacheCheck{缓存命中?}CacheCheck -->|是| CacheReturn[返回缓存数据]CacheReturn --> Log[记录访问日志]Log --> EndCacheCheck -->|否| DBQuery[查询数据库]DBQuery --> DBOK{查询成功?}DBOK -->|否| DBError[返回 500 错误]DBError --> LogDBOK -->|是| CacheWrite[写入缓存]CacheWrite --> Response[返回结果]Response --> Log%% 子系统示例subgraph 缓存系统CacheCheckCacheReturnCacheWriteendsubgraph 数据库系统DBQueryDBOKDBErrorend

(2)老版本语法

graph新版本功能可以支持更丰富的内容，旧版本就不介绍太多了

graph TD
st[开始] --> op[登录]

graph TD st[开始] --> op[登录]

(3)新旧版本差异

​ graph 是 Mermaid v10 之前的通用语法，flowchart 是 v10 及以后推出的专用流程图语法，两者的差异主要体现在「功能支持」和「未来维护」上，而非「基础渲染效果」：

维度	graph（旧版）	flowchart（新版）
版本背景	v10 前的默认流程图语法（通用）	v10 后专为流程图设计（专用）
基础功能	支持节点、普通连线、子图（够用）	完全兼容 graph 的基础功能
高级功能	仅支持少量箭头样式，无布局优化	支持自定义连线、多类型箭头、布局微调、样式增强
官方态度	仅维护，不新增功能（兼容为主）	重点迭代，持续新增流程图专属特性
兼容性	全版本支持（老 Typora 也能用）	v10+ 支持（新版 Typora 已适配）

• 基础场景：几乎无差异
• 高级场景：flowchart 新增专属功能（graph 不支持）
  • 更丰富的连线控制
  • 布局与节点优化
  • 更灵活的子图与交互

(4)版本兼容性

1. Typora 版本 < 1.0：内置 Mermaid < v10，flowchart 仅等价于 graph，高级功能无效；

2. Typora 版本 ≥ 1.0：内置 Mermaid ≥ v10，flowchart 可使用所有高级特性；

3. 如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。