Typora 原生流程图语法完全指南（Flowchart.js）
Typora 通过集成 flowchart.js 原生支持流程图渲染。
使用 ```````mermaid flowchat```` 代码块触发，无需安装任何插件。
### 文章目录
- [Typora 原生流程图语法完全指南（Flowchart.js）](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [@[toc]](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [一、基本结构](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [二、节点语法](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [2.1 节点定义格式](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [2.2 节点类型一览](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [2.3 节点定义示例](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [三、连接语法](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [3.1 基本连接](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [3.2 条件节点的连接](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [3.3 指定连接方向](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [3.4 并行节点的连接](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [四、完整示例](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.1 最简示例](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.2 带判断的流程](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.3 带循环的流程（回路）](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.4 带 IO 和子程序的流程](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.5 带并行路径的流程](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.6 控制箭头方向的流程](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [4.7 带超链接的节点](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [五、Flowstate 节点样式](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [5.1 给节点打标签](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [5.2 Flowstate 的限制（Typora 中）](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [六、注意事项与常见问题](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [✅ 正确写法](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [❌ 常见错误](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [关于中文](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [关于多行文字](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
- [七、语法速查卡](#文章目录 Typora 原生流程图语法完全指南（Flowchart.js） @[toc] 一、基本结构 二、节点语法 2.1 节点定义格式 2.2 节点类型一览 2.3 节点定义示例 三、连接语法 3.1 基本连接 3.2 条件节点的连接 3.3 指定连接方向 3.4 并行节点的连接 四、完整示例 4.1 最简示例 4.2 带判断的流程 4.3 带循环的流程（回路） 4.4 带 IO 和子程序的流程 4.5 带并行路径的流程 4.6 控制箭头方向的流程 4.7 带超链接的节点 五、Flowstate 节点样式 5.1 给节点打标签 5.2 Flowstate 的限制（Typora 中） 六、注意事项与常见问题 ✅ 正确写法 ❌ 常见错误 关于中文 关于多行文字 七、语法速查卡)
一、基本结构
一个 flowchart.js 流程图由两部分组成：
节点定义区（Node Definitions）
（空行分隔）
连接定义区（Connection Definitions）在 Typora 中的写法：
markdown
```mermaid
flowchat
节点变量名=>节点类型: 显示文字
节点变量名->节点变量名
```二、节点语法
2.1 节点定义格式
nodeName=>nodeType: 节点文字[|flowstate][:>urlLink]| 部分 | 说明 | 是否必填 |
|---|---|---|
nodeName |
节点变量名，用于连接引用，只能用字母、数字、下划线 | 必填 |
=> |
固定分隔符 | 必填 |
nodeType |
节点类型（见下表） | 必填 |
: 节点文字 |
节点内显示的文本，冒号后有一个空格 | 必填 |
| ` | flowstate` | 自定义样式标签（可选） |
:>urlLink |
点击跳转的链接（可选） | 可选 |
2.2 节点类型一览
| 节点类型 | 关键字 | 形状 | 说明 |
|---|---|---|---|
| 开始 | start |
圆角矩形（椭圆） | 流程的起点，默认文字 "Start" |
| 结束 | end |
圆角矩形（椭圆） | 流程的终点，默认文字 "End" |
| 操作步骤 | operation |
矩形 | 表示一个具体操作 |
| 输入/输出 | inputoutput |
平行四边形 | 表示 IO 操作（输入或输出） |
| 纯输入 | input |
平行四边形 | 仅表示输入 |
| 纯输出 | output |
平行四边形 | 仅表示输出 |
| 子程序 | subroutine |
双竖线矩形 | 表示调用一个子流程 |
| 判断/条件 | condition |
菱形 | 表示一个判断，分出 yes/no 两路 |
| 并行 | parallel |
双横线矩形 | 表示多条路径同时进行 |
2.3 节点定义示例
markdown
```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 处理数据
io=>inputoutput: 读写文件
inp=>input: 用户输入
out=>output: 打印结果
sub=>subroutine: 调用子程序
cond=>condition: 是否继续?
para=>parallel: 并行处理
st->op
```Created with Raphaël 2.3.0 开始 处理数据
markdown
```mermaid
flowchat
st=>start: 开始
io=>inputoutput: 输入密码
cond=>condition: 密码是否正确？
op_success=>operation: 登录成功
op_fail=>operation: 提示错误并锁定
e=>end: 结束
st->io->cond
cond(yes)->op_success->e
cond(no, right)->op_fail(bottom)->io
```Created with Raphaël 2.3.0 开始 输入密码 密码是否正确？ 登录成功 结束 提示错误并锁定 yes no
三、连接语法
3.1 基本连接
使用 -> 连接节点，可以链式写多个：
节点A->节点B->节点C3.2 条件节点的连接
condition 类型节点需要指定 yes 和 no 两个出口：
cond(yes)->节点A
cond(no)->节点B3.3 指定连接方向
在节点名后括号内加方向，控制箭头从哪个方向伸出：
节点名(方向)->下一节点可用方向：right、left、top、bottom（默认从底部向下）
条件节点指定方向：
cond(yes, right)->节点A
cond(no, bottom)->节点B普通节点指定方向：
op1(right)->op23.4 并行节点的连接
parallel 类型使用 path1、path2、path3... 分支：
para(path1, bottom)->节点A
para(path2, right)->节点B
para(path3, left)->节点C四、完整示例
4.1 最简示例
markdown
```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 执行操作
st->op->e
```Created with Raphaël 2.3.0 开始 执行操作 结束
4.2 带判断的流程
markdown
```mermaid
flowchat
st=>start: 开始
cond=>condition: 用户已登录?
login=>operation: 跳转登录页
home=>operation: 进入主页
e=>end: 结束
st->cond
cond(yes)->home->e
cond(no)->login->e
```Created with Raphaël 2.3.0 开始 用户已登录? 进入主页 结束 跳转登录页 yes no
4.3 带循环的流程（回路）
markdown
```mermaid
flowchat
st=>start: 开始
op=>operation: 处理数据
cond=>condition: 处理完成?
e=>end: 结束
st->op->cond
cond(yes)->e
cond(no)->op
```Created with Raphaël 2.3.0 开始 处理数据 处理完成? 结束 yes no
4.4 带 IO 和子程序的流程
markdown
```mermaid
flowchat
st=>start: 开始
inp=>operation: 读取配置文件
op=>operation: 初始化系统
sub=>operation: 调用认证模块
out=>operation: 输出日志
e=>end: 结束
st->inp->op->sub->out->e
```Created with Raphaël 2.3.0 开始 读取配置文件 初始化系统 调用认证模块 输出日志 结束
4.5 带并行路径的流程
markdown
```mermaid
flowchat
st=>start: 开始
op=>operation: 拆分任务
para=>parallel: 并行执行
task1=>operation: 任务 A
task2=>operation: 任务 B
merge=>operation: 合并结果
e=>end: 结束
st->op->para
para(path1, bottom)->task1->merge
para(path2, right)->task2->merge
merge->e
```Created with Raphaël 2.3.0 开始 拆分任务 并行执行 任务 A 合并结果 结束 任务 B
4.6 控制箭头方向的流程
markdown
```mermaid
flowchat
st=>start: 开始
op1=>operation: 步骤一
op2=>operation: 步骤二
cond=>condition: 审核通过?
reject=>operation: 打回修改
e=>end: 结束
st->op1(right)->op2->cond
cond(yes, right)->e
cond(no, bottom)->reject(right)->op1
```Created with Raphaël 2.3.0 开始 步骤一 步骤二 审核通过? 结束 打回修改 yes no
4.7 带超链接的节点
节点可以绑定 URL，点击后跳转（在 Typora 导出 HTML 时有效）：
markdown
```mermaid
flowchat
st=>start: 开始:>https://example.com[blank]
op=>operation: 查看文档:>https://docs.example.com
e=>end: 结束
st->op->e
```[blank] 表示在新标签页打开，省略则在当前页打开。
Created with Raphaël 2.3.0 开始 查看文档 结束
五、Flowstate 节点样式
flowstate 允许给节点打上自定义样式标签，通过 | 符号附加在节点定义末尾。
5.1 给节点打标签
nodeName=>nodeType: 节点文字|标签名示例：
op1=>operation: 已完成步骤|past
op2=>operation: 当前步骤|current
op3=>operation: 待办步骤|future5.2 Flowstate 的限制（Typora 中）
Typora 渲染时，flowstate 的外观样式（颜色、字体等）由底层 JS 选项控制，在纯 Markdown 文件中无法直接通过代码块内的语法修改颜色。flowstate 标签本身是标识符，样式需通过 JavaScript API 配置（Typora 不暴露此配置入口）。
因此在 Typora 的 flow 代码块中，|flowstate 标签可以写，但视觉效果不变，主要用于逻辑标注或未来导出到 HTML 后配合自定义脚本使用。
六、注意事项与常见问题
✅ 正确写法
op=>operation: 文字内容节点类型后的冒号 : 与文字之间必须有一个空格。
❌ 常见错误
| 错误写法 | 问题 | 正确写法 |
|---|---|---|
op=>operation:文字 |
冒号后无空格 | op=>operation: 文字 |
op=>operation : 文字 |
=> 后有空格 |
op=>operation: 文字 |
节点名 -> |
变量名含空格 | nodeName-> |
cond->yes->op |
条件出口写法错误 | cond(yes)->op |
end=>end: end |
变量名用了保留字 | e=>end: 结束 |
关于中文
节点变量名 不支持中文，只能用英文字母、数字和下划线。
节点显示文字（冒号后面的部分）完全支持中文。
markdown
```mermaid
flowchat
st=>start: 开始 ✅ 变量名 st，显示"开始"
结束=>end: 开始 ❌ 变量名不能用中文
st->结束
```Created with Raphaël 2.3.0 开始 ✅ 变量名 st，显示"开始" 开始 ❌ 变量名不能用中文
markdown
```mermaid
flowchat
st=>start: 开始 ✅ 变量名 st，显示"开始"
end=>end: 结束 ✅ 变量名 end，显示"结束"
st->end
```Created with Raphaël 2.3.0 开始 ✅ 变量名 st，显示"开始" 结束 ✅ 变量名 end，显示"结束"
关于多行文字
节点文字支持换行，使用 \n：
op=>operation: 第一行\n第二行七、语法速查卡
# ── 节点定义 ──────────────────────────────────────
st =>start: 开始/结束节点（圆角矩形）
e =>end: 结束节点
op =>operation: 操作节点（矩形）
io =>inputoutput: 输入/输出节点（平行四边形）
inp =>input: 输入节点
out =>output: 输出节点
sub =>subroutine: 子程序节点（双竖线矩形）
cond =>condition: 判断节点（菱形）
para =>parallel: 并行节点
# ── 可选附加 ──────────────────────────────────────
op=>operation: 文字|样式标签 # flowstate 样式标签
st=>start: 文字:>https://url.com # 绑定超链接
st=>start: 文字:>https://url[blank] # 新标签页打开
# ── 连接定义 ──────────────────────────────────────
A->B->C # 基本链式连接
cond(yes)->A # 条件 yes 出口
cond(no)->B # 条件 no 出口
cond(yes, right)->A # 条件出口 + 方向
op(right)->next # 普通节点指定方向
para(path1, bottom)->A # 并行路径 1
para(path2, right)->B # 并行路径 2
# ── 可用方向 ──────────────────────────────────────
right / left / top / bottom参考资料：Typora 官方文档 · flowchart.js 官方仓库