Mermaid flowchart 基础速查表 + subgraph子图速查表 + classDef样式速查表（原版 Markdown，可直接复制到Obsidian）
表格格式速查表完全对齐，md原生表格，不会出现HTML‑pre撑列问题
Mermaid‑Flowchart 流程图完整速查表
| 名称 | 代码 | 用例 |
|---|---|---|
| 代码块完整骨架 | |
Obsidian原生绘图，一对包裹一张图；结束图表独占一行写，不能内部重复写flowchart |
| 布局方向 | flowchart LR |
LR：从左到右；TB：从上到下(默认)；RL：从右向左；BT：从下向上 |
| 矩形方框 | id[显示文字] |
s1[业务步骤1]，普通流程节点最常用；id只能英文数字下划线，显示文字可中文 |
| 圆角矩形 | id(显示文字) |
s2(开始/结束)，用于起止节点 |
| 菱形判断框 | id{显示文字} |
judge{条件判断}，做分支判断 |
| 旗帜形 | id>显示文字] |
note>备注说明]，用作备注节点 |
| 实线箭头 | A --> B |
s1 --> judge，最基础连接线 |
| 实线无箭头 | A --- B |
s1 --- s2，只做连线不表达方向 |
| 虚箭头 | A -.-> B |
s1 -.-> s3，表示备选、间接关系 |
| 粗箭头 | A ==> B |
start ==> ok，代表强流转 |
| 连线带文字 | A --文字--> B |
judge --是--> ok；judge --否--> no，分支标注 |
| 多输入汇聚 | A --> C |
a1[数据A] --> total[汇总]；a2[数据B] --> total[汇总]，多个节点指向同一个目标 |
| 两张独立图表模板 |
|
多张图必须多组代码块；禁止同一个块写两次flowchart；块之间保留空行 |
| Obsidian导出SVG | 阅读模式，右键图表 →复制SVG |
【不稳定备选】复制SVG源码粘贴HTML；Obsidian该功能经常失效，优先使用VS‑Code导出 |
| VS‑Code Mermaid‑Editor导出SVG | 1.源码保存为 xxx.mmd |
✅稳定首选；拿到完整SVG源码直接嵌入HTML，无需JS，浏览器直接渲染 |
Mermaid‑classDef 节点样式速查表
| 名称 | 代码 | 用例 |
|---|---|---|
| classDef基础语法 | classDef 样式名 fill:#颜色,stroke:#颜色,stroke‑width:px |
自定义节点背景色、边框色、边框粗细；写在flowchart内部最开头 |
| 给单个节点套用样式 | class 节点ID 样式名 |
class err errorStyle；给指定ID节点应用已定义classDef样式 |
| 一次性给多个节点套用同一样式 | class 节点A,节点B,节点C 样式名 |
class w1,w2 warnStyle；多个ID逗号分隔，批量上色 |
| 行内直接简写赋值（无需class关键字） | id[文字]:::样式名 |
err[异常]:::errorStyle；行内直接绑定样式，代码紧凑 |
| 示例‑错误红色样式 | classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke‑width:2px |
错误、异常节点，红底红粗边框 |
| 示例‑警告黄色样式 | classDef warnStyle fill:#fff2cc,stroke:#ee9900,stroke‑width:1px |
警告提示节点，黄底橙边框 |
| 示例‑成功绿色样式 | classDef okStyle fill:#d5e8d4,stroke:#288828,stroke‑width:1px |
成功、正常节点，浅绿底绿色边框 |
| classDef完整可复制模板 | flowchart LR |
业务流程图三套标准配色模板，直接复制修改文字即可 |
Mermaid‑Subgraph 子图（分组框）速查表
| 名称 | 代码 | 用例 |
|---|---|---|
| 基础子图骨架 | subgraph 分组名称 |
绘制带标题的分组框；subgraph开头，end结束分组；必须放在 flowchart 内部 |
| 基础完整示例 | |
在一张流程图内部开辟一个带标题方框，把若干节点收纳进去 |
| 子图之间连线 | |
不同分组内部节点互相连接，跨分组流转 |
| 子图嵌套（组内再套组） | |
多级分组，适合系统分层；注意 end 成对匹配 |
| 直接对子图连线 | |
箭头直接指向分组框本身，不是指向内部节点；subgraph名称带空格时必须使用别名写法 |
| 子图设置ID别名（推荐） | subgraph GID["分组显示标题"] |
GID为程序ID（英文），引号内是显示中文标题；解决中文子图ID连线异常问题 |
| 子图内部布局方向 | subgraph G |
子框内部独立方向：TB从上到下 / LR从左到右，可和外层流程图方向不一样 |
| 完整业务模板‑两级分组 | |
标准业务框图，输入‑处理‑输出三层分组，直接修改文字即可使用 |
使用说明
- 完整复制全部内容粘贴Obsidian，原生Markdown表格，不会出现HTML表格那种代码撑开列宽；
<pre>标签是markdown表格内保留换行写法，Obsidian可以正常渲染；- 如果后续导出HTML仍然单元格撑开，给页面CSS增加：
table pre {white-space:pre-wrap;}
📌语法强制约束（高频踩坑）
- 节点ID不能中文、不能空格；显示文本可以中文。同一张图ID不可重名。
- 一张图仅允许一次flowchart XX声明，不要在代码块内部重复写。
- 所有符号全部英文半角，禁止中文
【】、－－>。 - 结束标记
```必须独占一行。 - Obsidian预览异常：
Ctrl‑R重载；确认设置Mermaid开关打开。 - classDef规则：classDef定义必须写在flowchart内部最靠前位置，定义写在节点之后会样式不生效；注释使用
%%。
📌subgraph强制避坑要点
subgraph和对应的end必须成对出现，少写end直接图表报错空白。- subgraph 写在
flowchart LR/TB里面，不能写到流程图外面。 - 如果要用箭头指向子图本身：优先用
GID["中文标题"]别名语法；不要直接用中文当子图ID，连线会失效。 - 缩进仅方便阅读，语法不强制；建议统一4空格，方便排查缺少end。
- 一张图可写多个subgraph；多张图放在不同的```mermaid代码块。
- 预览空白优先检查：end是否配对、subgraph是否写在flowchart外部。
高频错误示例
❌错误1：subgraph写在flowchart外面
subgraph A
s1[xxx]
end
flowchart LR
s1-->s2
❌错误2：classDef写在节点后面（样式失效）
flowchart LR
ok[成功]:::okStyle
classDef okStyle fill:#d5e8d4
最小完整示例（直接复制测试）
```mermaid
flowchart LR
%%样式放最前面
classDef okStyle fill:#d5e8d4,stroke:#288828,stroke‑width:1px
classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke‑width:2px
start(开始) --> judge{条件判断}
judge --是--> ok[执行逻辑A]:::okStyle
judge --否--> no[执行逻辑B]:::errorStyle
```
文件分工规范
.mmd：纯mermaid源码文件，优先编辑此文件，用于生成SVG，不包含markdown反引号标记；.md：代码+图表一体文档，用于阅读、Obsidian预览；不作为导出源；修改图表优先修改.mmd，再同步md。
可以直接全部复制整块文本粘贴Obsidian。