Typora绘制-流程图

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

流程图

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

社区维护的中文文档站

1、新版本语法

flowchart

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

方向标识

标识含义示例

TD 从上到下 flowchart TD

LR 从左到右 flowchart LR

BT 从下到上 flowchart BT

RL 从右到左 flowchart RL
节点规则（核心规则）

节点是流程图的最小单元，语法格式：节点ID[显示文本]，核心规则
节点 ID
- 唯一且无特殊字符（仅字母、数字、下划线，不能以数字开头）；
- 区分大小写（A 和 a 是两个不同节点）；
- 示例：login123 ✅、123login ❌、login-123 ❌。

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

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

形状	语法格式	规则说明
矩形	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、样式类名区分大小写。

2、代码示例

复制代码

# 流程图相关代码
flowchart TD nodeSpacing: 100
    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[返回 500 错误]
    DBError --> Log

    DBOK -->|是| CacheWrite[写入缓存]
    CacheWrite --> Response[返回结果]
    Response --> Log

    %% 子系统示例
    subgraph 缓存系统
        CacheCheck
        CacheReturn
        CacheWrite
    end

    subgraph 数据库系统
        DBQuery
        DBOK
        DBError
    end

3、效果示例

数据库系统
缓存系统
否
是
是
否
否
是
开始
结束
接收请求
鉴权通过?
返回 401
缓存命中?
返回缓存数据
记录访问日志
查询数据库
查询成功?
返回 500 错误
写入缓存
返回结果

4、老版本语法

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

复制代码

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

开始
登录

5、新旧版本差异

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

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

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

6、版本兼容性

Typora 版本 < 1.0 ：内置 Mermaid < v10，flowchart 仅等价于 graph，高级功能无效；
Typora 版本 ≥ 1.0 ：内置 Mermaid ≥ v10，flowchart 可使用所有高级特性；
如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。