Markdown 进阶：Mermaid 图表与 LaTeX 公式

发表于 2024-12-23 更新于 2026-07-16 Disqus：

Markdown 不只能写文字。借助 Mermaid 和 LaTeX，你可以在纯文本中画流程图、写数学公式，无需任何图形工具。

Mermaid 图表

Mermaid 是一个基于 JavaScript 的图表绘制工具，用类似 Markdown 的文本语法描述图表结构，渲染成可视化图形。

流程图（flowchart）

用 flowchart TD 声明从上到下的流程图。[] 表示矩形节点，{} 表示菱形判断：

flowchart TD
    A[开始] --> B{条件判断}
    B -- 是 --> C[执行操作]
    B -- 否 --> D[其他操作]
    C --> E[结束]
    D --> E

方向：TD（上→下）、LR（左→右）、RL（右→左）。

基础有向图（graph）

graph 是 flowchart 的前身，语法更简洁：

graph TD
    A --> B --> D
    A --> C --> D
    D --> E --> A

状态图（stateDiagram）

描述对象的状态转换。[*] 表示起始/终止状态：

stateDiagram-v2
    [*] --> Idle
    Idle --> Running: Start
    Running --> Idle: Stop
    Running --> [*]: Complete

时序图（sequenceDiagram）

展示多个参与者之间的交互顺序，常用于描述 API 调用流程：

sequenceDiagram
    participant User as 用户
    participant Browser as 浏览器
    participant Server as 后端服务器
    participant DB as 数据库

    User->>+Browser: 输入网址并按下回车
    Browser->>+Server: 发起 HTTP GET 请求
    Server->>+DB: 查询用户数据
    DB-->>-Server: 返回用户数据
    Server-->>-Browser: 返回 HTML + CSS + JS
    Browser-->>-User: 显示渲染后的页面

->>+ 同步调用（激活目标），-->>- 返回（关闭激活）。alt/else 条件分支，loop 循环。

类图（classDiagram）

描述类的结构和继承关系。<|-- 继承，+ public，- private：

classDiagram
    class Animal {
        +String species
        +void eat()
    }
    class Dog {
        +String breed
        +void bark()
    }
    Animal <|-- Dog

ER 图（erDiagram）

数据库实体关系图。关系符号：|| 恰好一个、o{ 零或多个、|{ 一个或多个：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string address
    }
    ORDER {
        int id
        date orderDate
    }

甘特图（gantt）

项目进度规划。after a1 表示在 a1 完成后开始，10d 持续 10 天：

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析           :a1, 2024-01-01, 10d
    原型设计           :a2, after a1, 10d
    section 开发
    编码               :b1, 2024-01-20, 20d
    测试               :b2, after b1, 10d

饼图（pie）

pie
    title 市场份额
    "苹果": 45
    "三星": 25
    "华为": 15
    "其他": 15

用户旅程图（journey）

描述用户在不同阶段的体验评分（1-5，越高越好）：

journey
    title 用户购买流程
    section 浏览产品
      用户感兴趣: 5: 用户
      用户犹豫: 3: 用户
    section 添加到购物车
      用户满意: 4: 用户
      用户犹豫: 2: 用户

Git 图（gitGraph）

可视化 Git 分支和提交历史：

gitGraph
    commit
    branch feature
    commit
    checkout main
    merge feature
    commit

LaTeX 数学公式

LaTeX 是学术排版的事实标准。在 Markdown 中用 $$ 包裹块级公式，$ 包裹行内公式。

微积分

积分：

导数与偏导数：

矩阵

用 bmatrix 环境绘制带方括号的矩阵：

行列式

用 vmatrix 环境绘制带竖线的行列式：

集合符号

符号	含义
`\infty`	无穷
`\cup`	并集
`\cap`	交集
`\in`	属于
`\notin`	不属于

速查

语法	效果
`x^2`
`x_{n+1}`
`\frac{a}{b}`
`\sqrt{x}`
`\sum_{i=1}^n`
`\prod_{i=1}^n`
`\lim_{x \to 0}`
`\alpha, \beta, \gamma`
`\leq, \geq, \neq`
`\rightarrow, \leftarrow`