Appearance
这是 Mermaid 常用语法速查表，将流程图、序列图、类图等核心语法整合在一张表中，方便你在 Typora 里随时查阅。
| 图表类型 | 语法要点 / 代码示例 | 说明 |
|---|---|---|
| 流程图 | graph TD / flowchart LR | 方向：TD(上→下)、LR(左→右)、RL、BT |
A[矩形] B(圆角) C([体育场]) D[[子程序]] E[(数据库)] F((圆形)) G>旗帜] H{菱形} | 节点形状 | |
A --> B / A --- B / A -.-> B / A ==> B | 连线：实线箭头、无箭头、虚线箭头、粗箭头 | |
A -- 文字 --> B 或 `A --> | 文字 | |
subgraph 标题 ... end | 子图分组 | |
style A fill:#f9f,stroke:#333 | 节点样式（可逗号分隔多个节点） | |
classDef myStyle fill:#eee; 然后 class A,B myStyle | 定义并应用类样式 | |
| 序列图 | sequenceDiagram | 图表类型声明 |
participant A 或 actor A | 参与者（actor 为人形图标） | |
A->>B: 消息 (实线实心箭头) | 同步消息 | |
A-->>B: 返回 (虚线实心箭头) | 返回消息 | |
A->B: 消息 (实线箭头) | 同步消息 | |
A--B: 异步 (虚线箭头) | 异步消息 | |
A-xB: 丢失 (末尾×) | 消息丢失 | |
activate A / deactivate A 或 A->>+B: 激活 B-->>-A: 停用 | 激活条 | |
Note right of A: 注释 或 Note over A,B: 跨越注释 | 注释（位置：left/right/over） | |
loop 循环描述 ... end | 循环 | |
alt 条件1 ... else 条件2 ... end | 条件分支 | |
rect rgb(200,200,200) ... end | 背景高亮块 | |
| 类图 | classDiagram | 图表类型 |
class Animal { +String name +int age +makeSound() void} | 定义类（+公共，-私有，#保护） | |
| `A < | -- B` : 继承 | |
A *-- B : 组合 | 实心菱形 | |
A o-- B : 聚合 | 空心菱形 | |
A --> B : 关联 | 实线箭头 | |
A ..> B : 依赖 | 虚线箭头 | |
| `A .. | > B` : 实现 | |
A --> B : 标签 | 关系上添加文字 | |
| 状态图 | stateDiagram-v2 | 图表类型 |
[*] | 开始/结束状态 | |
状态名 或 [状态描述] | 状态节点 | |
S1 --> S2 : 事件/动作 | 状态转移 | |
state 复合状态 { [*] --> 子状态 ...} | 复合状态嵌套 | |
-- 或 --- | 并发状态的分隔线 | |
| 饼图 | pie title 标题 "标签1" : 30 "标签2" : 70 | 数值自动计算百分比 |
| 甘特图 | gantt title 标题 dateFormat YYYY-MM-DD section 阶段 任务1 :a1, 2024-01-01, 30d 任务2 :after a1, 20d | 项目时间线；状态：done，active，crit 等 |
| 思维导图 | mindmap root(中心) 分支1 叶子 分支2 | 需要较新 Mermaid 版本，Typora 部分版本可能不支持 |
| 通用技巧 | A[第一行<br>第二行] | 节点内换行 |
%% 这是注释 | 单行注释 | |
特殊字符：#34; 显示引号，#35; 显示 # | 转义特殊字符（数字为 HTML 实体编号） |