Markdown 文件中使用Mermaid绘制状态关系图

Mermaid 是一种基于 Markdown 的可视化图表工具，支持绘制流程图、状态图、甘特图等。Mermaid也是 Obsidian 支持的图表绘制语言之一，可以直接在 Obsidian或者其他软件、网页等创建的Markdown 文件中编写 Mermaid 代码来生成状态转换图。比如在 Obsidian 中打开或创建一个笔记或者在CSDN中的Markdown编辑器中，插入 Mermaid 代码块，并添加状态关系图的代码后，保存文件后，Obsidian 或者CSDN编辑器会自动渲染出关系图，切换至阅读视图即可查看。下面介绍Mermaid 代码块的语法和状态图的基本用法

---

Mermaid 代码块的基本语法

在 Markdown 文件中，使用三个反引号开始和结束 Mermaid 代码块，并在开头指定 mermaid 关键字。

```mermaid
<Mermaid 图表代码>

---

Mermaid 状态图语法（stateDiagram）

Mermaid 的 状态图 使用 stateDiagram 或 stateDiagram-v2 绘制。以下是常见语法元素：

1. 创建状态节点

语法：

stateDiagram-v2
    状态1
    状态2

2. 定义状态之间的转换

语法：

stateDiagram-v2
    状态1 --> 状态2: 转换条件或事件

3. 初始和结束状态

• 初始状态用 [*] 表示。
• 结束状态用 [*] 或某一具体状态。 语法：

stateDiagram-v2
    [*] --> 状态1
    状态1 --> 状态2: 某事件
    状态2 --> [*]

4. 嵌套状态

语法：

stateDiagram-v2
    [*] --> 状态1
    状态1 --> 状态2
    状态2 --> 状态3

    state 状态1 {
        子状态1 --> 子状态2
        子状态2 --> 子状态3
    }

关键点：

1. 嵌套必须用 state 状态名 {} 来定义。
2. 嵌套内部的状态名称不能与外部状态名称冲突。
3. 嵌套内部的状态可以有自己的状态关系，但不能直接与外部状态连线。
4. stateDiagram-v2 不支持嵌套状态之外的多余空格或未闭合的 {}。

5. 添加注释

用 note 来标记注释。 语法：

stateDiagram-v2
    状态1 --> 状态2: 转换事件
    note left of 状态1: 这是一个注释
    note right of 状态2: 这是另一个注释

---

在 Obsidian 中的注意事项

1. 确保 Obsidian 的 Core 插件 中已启用 Mermaid。
   • 打开设置 → Core Plugins → 启用 Mermaid。
2. 在 Markdown 文件中插入上述 Mermaid 代码块，保存后会自动渲染为图表。

---