Mermaid 图表与 LaTeX 公式示例

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 = \pi r^2$，其中 $r$ 是半径。

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

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

2. 块级公式 (Display Math)

毕达哥拉斯定理：

$$a^2 + b^2 = c^2$$

积分公式：

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

矩阵表示：

$$\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix}$$

求和公式：

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

极限定义：

$$\lim_{x \to \infty} \frac{1}{x} = 0$$

傅里叶变换：

$$\mathcal{F}(f)(w) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i wx} \, dx$$

麦克斯韦方程组：

$$\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) = \frac{P(B|A) \cdot P(A)}{P(B)}$$

统计学：正态分布

$$f(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. 复杂图表建议使用在线编辑器先预览效果

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