Chapter 08 / 10

Mermaid 图表与数学公式

在 Markdown 中嵌入流程图、时序图与 LaTeX 数学公式

Mermaid 简介

Mermaid 是一个基于文本的图表工具，可以用类似 Markdown 的语法绘制流程图、时序图、类图等。GitHub 从 2022 年起原生支持 Mermaid。

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E
```

↑ 上面的代码会渲染成如下流程图：

开始 ──→ [条件判断]
├── 是 ──→ 执行操作 ──→ 结束
└── 否 ──→ 跳过 ──────→ 结束

流程图（Flowchart）

```mermaid
flowchart LR
    A([开始]) --> B[/用户输入/]
    B --> C{验证输入}
    C -- 有效 --> D[(存储数据库)]
    C -- 无效 --> E[显示错误]
    E --> B
    D --> F([结束])
```

节点形状

语法形状
[矩形]矩形（默认）
(圆角矩形)圆角矩形
{菱形}菱形（判断）
([体育场形])椭圆（开始/结束）
[/平行四边形/]输入/输出
[(圆柱体)]数据库

方向控制

graph TD    # 从上到下（Top Down）
graph LR    # 从左到右（Left Right）
graph BT    # 从下到上（Bottom Top）
graph RL    # 从右到左（Right Left）

时序图（Sequence Diagram）

```mermaid
sequenceDiagram
    actor 用户
    participant 前端
    participant 后端
    participant 数据库

    用户->>前端: 提交登录表单
    前端->>后端: POST /api/login
    后端->>数据库: 查询用户
    数据库-->>后端: 返回用户信息
    后端-->>前端: 返回 JWT Token
    前端-->>用户: 跳转到首页
```

箭头类型

语法含义
->>实线箭头（同步请求）
-->>虚线箭头（响应/异步）
->实线（无箭头）
-->虚线（无箭头）
-x实线 + X（失败/销毁）

类图（Class Diagram）

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

其他图表类型

图表类型关键字用途
甘特图gantt项目进度管理
状态图stateDiagram-v2状态机可视化
实体关系图erDiagram数据库设计
用户旅程图journey用户体验设计
饼图pie比例展示
Git 图gitGraph分支历史可视化

数学公式（LaTeX）

GitHub（2022 年起）和多数文档工具支持 LaTeX 数学公式：

内联公式

著名的质能方程 $E = mc^2$ 由爱因斯坦提出。

黄金比例 $\varphi = \frac{1+\sqrt{5}}{2} \approx 1.618$

独立公式块

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{bmatrix}
x \\
y
\end{bmatrix}
=
\begin{bmatrix}
ax + by \\
cx + dy
\end{bmatrix}
$$
INFOGitHub 使用 MathJax 渲染数学公式。VS Code 需要安装 "Markdown+Math" 插件。如果你的目标平台不支持 LaTeX，可以用截图或外部工具（如 Mathway）生成公式图片。

常用 LaTeX 语法速查

功能LaTeX 语法输出
上标x^2x²
下标x_ixᵢ
分数\frac{a}{b}a/b
根号\sqrt{x}√x
求和\sum_{i=1}^{n}Σ
积分\int_a^b∫
希腊字母\alpha \beta \gammaα β γ

小结