📘 Mermaid 流程图快速指南
适合小白入门 · 包含常用语法和注意事项
📌 基础结构
流程图以 flowchart TD（从上到下）或 LR（从左到右）开头。
节点用 ID[显示文字] 表示，箭头用 --> 连接。
flowchart TD
A[开始] --> B[处理]
B --> C{判断条件}
C -- 是 --> D[结果1]
C -- 否 --> E[结果2]
🧩 常用节点形状
矩形（默认）ID[文字]
圆角矩形ID(文字)
菱形（判断）ID{文字}
平行四边形ID[/文字/]
六边形ID{{文字}}
圆形（开始/结束）ID((文字))
➡️ 箭头与标签
--> 普通箭头-- 文字 --> 带标签的箭头-->|文字| 另一种标签写法-.-> 虚线箭头==> 加粗箭头
💡 分支与合并
使用判断节点（菱形）分出多个条件分支，每个分支用不同的标签。
多个分支可以汇聚到同一个节点。
C{条件} -- 是 --> D[执行A]
C -- 否 --> E[执行B]
D & E --> F[结束] ⚠️ 常见错误 & 注意事项
- 避免使用全角括号
（） —— 请使用半角 ()，否则会报词法错误。 - 节点文字中的特殊字符 —— 如
[] {} () 等，请用引号包裹，或改用 <br> 换行。 - 空格问题 —— 节点ID和文字之间不要有空格，如
A[开始] 正确，A [开始] 错误。 - 箭头标签中的符号 —— 如果标签包含特殊字符（如
|），建议用引号包裹，如 -- "条件" -->。 - 子图（subgraph） —— 可以用
subgraph 标题 ... end 来分组。 - 中文支持 —— Mermaid 原生支持中文，但需确保文件编码为 UTF-8。
📋 完整示例（可直接复制使用）
flowchart TD
A[用户登录] --> B{验证信息}
B -- 成功 --> C[进入主页]
B -- 失败 --> D[显示错误]
D --> E[重新输入]
E --> B
C --> F[退出登录]
F --> G[结束]
💡 更多语法请参考 官方文档
