Mermaid 语法

> 以下内容整理自：[CSDN](https://blog.csdn.net/Primary_wind/article/details/148198538) | 整理人： 安玉

## Markdown 集成
- 支持 Mermaid 的 Markdown 渲染器（如 GitHub、Obsidian）可直接嵌入 Mermaid 代码：
  ```markdown
  ```mermaid
  graph TD
    A[开始] --> B[结束]
  ```

## 基本语法

### 流程图 (Flowchart)
流程图用于表示过程或工作流，支持有向图和无向图。
```mermaid
graph TD
  A[开始] -->|步骤1| B{判断}
  B -->|是| C[操作1]
  B -->|否| D[操作2]
  C --> E[结束]
  D --> E
```

- **节点定义**：`A[文本]` 定义矩形节点，`B{文本}` 定义菱形节点（通常用于条件判断）。
- **连接**：`-->` 表示有向箭头，`---` 表示无向连接。
- **标签**：`|标签|` 添加箭头上的文字说明。

### 时序图 (Sequence Diagram)
用于展示对象之间的交互顺序。
```mermaid
sequenceDiagram
  participant A as 用户
  participant B as 服务器
  A->>B: 发送请求
  B-->>A: 返回响应
```

- **参与者**：`participant 别名 as 显示名称` 定义参与者。
- **消息**：`->>` 表示实线箭头（同步调用），`-->>` 表示虚线箭头（异步调用）。

### 类图 (Class Diagram)
用于描述类之间的关系，适用于面向对象设计。
```mermaid
classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog
```

- **类定义**：`class 类名 { 属性/方法 }`。
- **继承**：`<|--` 表示继承关系，`--` 表示关联。

### 状态图 (State Diagram)
表示系统的状态转换。
```mermaid
stateDiagram-v2
  [*] --> Idle
  Idle --> Running : Start
  Running --> Stopped : Stop
  Stopped --> [*]
```

- **状态**：`状态名` 定义状态，`[*]` 表示开始/结束。
- **转换**：`--> 目标状态 : 事件` 表示状态转换。

## 高级功能

### 样式自定义
Mermaid 支持 CSS 样式自定义，例如：
```mermaid
graph TD
  A[开始] --> B[结束]
  classDef custom fill:#f9f,stroke:#333,stroke-width:2px;
  class A,B custom;
```

- 使用 `classDef` 定义样式，`class` 应用到节点。

### 子图 (Subgraph)
用于分组节点，便于组织复杂图表：
```mermaid
graph TD
  subgraph Group1
    A --> B
  end
  subgraph Group2
    C --> D
  end
  A --> C
```

### 交互性
- 在 Mermaid Live Editor 中，图表支持点击节点跳转（需配置 `link`）。
- 示例：
  ```mermaid
  graph TD
    A[点击我] -->|跳转| B
    click A "https://example.com" "跳转到网站"
  ```

## 常见问题与解决方案

1. **图表不渲染**：
   - 检查 Mermaid 脚本是否正确加载。
   - 确保代码块使用 `mermaid` 语言标识。
2. **复杂图表性能问题**：
   - 简化图表结构，减少节点数量。
   - 使用子图分组以提高可读性。
3. **跨平台兼容性**：
   - 不同 Markdown 渲染器对 Mermaid 的支持程度不同，建议测试渲染效果。

## 资源与参考
- **官方文档**：https://mermaid-js.github.io/mermaid/
- **社区支持**：GitHub Issues、Stack Overflow
- **示例库**：Mermaid 官方 GitHub 仓库提供大量示例代码。