Mermaid 图表与 LaTeX 公式示例

2025年10月8日

目录
目录

Mermaid 图表与 LaTeX 公式完整指南

这篇文章展示了如何在 Astro 博客中使用 Mermaid 绘制各种图表和使用 LaTeX 编写数学公式。

📊 Mermaid 图表示例

1. 流程图 (Flowchart)

graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    C --> E[加载数据]
    E --> F{数据加载成功?}
    F -->|成功| G[渲染页面]
    F -->|失败| H[显示错误]
    D --> I[输入凭证]
    I --> J{验证成功?}
    J -->|是| C
    J -->|否| K[显示错误消息]
    K --> I

2. 时序图 (Sequence Diagram)

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库
    
    用户->>浏览器: 访问网站
    浏览器->>服务器: 发送 HTTP 请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回数据
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 显示页面

3. 甘特图 (Gantt Chart)

gantt
    title 项目开发进度
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :done,    des1, 2024-01-01, 2024-01-10
    UI 设计           :done,    des2, 2024-01-08, 2024-01-20
    section 开发阶段
    前端开发          :active,  dev1, 2024-01-15, 2024-02-15
    后端开发          :         dev2, 2024-01-20, 2024-02-20
    section 测试阶段
    单元测试          :         test1, 2024-02-10, 2024-02-25
    集成测试          :         test2, 2024-02-20, 2024-03-05

4. 类图 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +eat()
    }
    class Dog {
        +String breed
        +bark()
        +fetch()
    }
    class Cat {
        +String color
        +meow()
        +scratch()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

5. 状态图 (State Diagram)

stateDiagram-v2
    [*] --> 待审核
    待审核 --> 审核中: 开始审核
    审核中 --> 已通过: 审核通过
    审核中 --> 已拒绝: 审核拒绝
    已通过 --> 已发布: 发布
    已拒绝 --> 待审核: 重新提交
    已发布 --> [*]

6. 饼图 (Pie Chart)

pie title 编程语言使用分布
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "Go" : 10
    "Rust" : 5
    "其他" : 5

7. Git 图 (Git Graph)

gitGraph
    commit id: "初始化项目"
    commit id: "添加 README"
    branch develop
    checkout develop
    commit id: "开发新功能"
    commit id: "修复 bug"
    checkout main
    merge develop
    commit id: "发布 v1.0"
    branch hotfix
    checkout hotfix
    commit id: "紧急修复"
    checkout main
    merge hotfix

🧮 LaTeX 数学公式示例

1. 行内公式

这是一个行内公式示例：圆的面积公式是 A=πr2A = \pi r^2，其中 rr 是半径。

爱因斯坦的质能方程：E=mc2E = mc^2

二次方程的解：x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

2. 块级公式 (Display Math)

毕达哥拉斯定理：

a2+b2=c2a^2 + b^2 = c^2

积分公式：

∫abf(x) dx=F(b)−F(a)\int_{a}^{b} f(x) \, dx = F(b) - F(a)

矩阵表示：

[abcd][xy]=[ax+bycx+dy]\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix}

求和公式：

∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

极限定义：

lim⁡x→∞1x=0\lim_{x \to \infty} \frac{1}{x} = 0

傅里叶变换：

F(f)(w)=∫−∞∞f(x)e−2πiwx dx\mathcal{F}(f)(w) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i wx} \, dx

麦克斯韦方程组：

∇⋅E=ρϵ0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ϵ0∂E∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

概率论：贝叶斯定理

P(A∣B)=P(B∣A)⋅P(A)P(B)P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}

统计学：正态分布

f(x)=1σ2πe−12(x−μσ)2f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}

📝 使用说明

Mermaid 语法

在 Markdown 中使用 Mermaid，只需要使用代码块并指定语言为 mermaid：

```mermaid
graph TD
    A --> B
```

LaTeX 数学公式语法

行内公式：使用单个 $ 符号包裹

这是行内公式 $E = mc^2$

块级公式：使用双 $$ 符号包裹

$$
\int_{a}^{b} f(x) \, dx
$$

🎯 常用 LaTeX 符号速查

符号LaTeX描述
α\alpha小写希腊字母 alpha
β\beta小写希腊字母 beta
Σ\Sigma大写希腊字母 sigma (求和)
∫\int积分符号
∞\infty无穷大
≈\approx约等于
≤\leq小于等于
≥\geq大于等于
±\pm正负号
×\times乘号
÷\div除号
√\sqrt{}平方根
∂\partial偏导数
∇\nabla梯度算子

🌟 小贴士

  1. Mermaid 图表适合展示流程、关系和数据可视化
  2. LaTeX 公式适合展示数学、物理、统计等科学公式
  3. 两者都支持深色模式自动适配
  4. 复杂图表建议使用在线编辑器先预览效果

现在你可以在博客文章中自由使用这两个强大的工具了！🎉