markdown高级技巧：绘制图例和公式

前言

做工程的人经常会有绘制图例和数学公式的需求，现在是数字化办公的时代，用笔和纸书写已经不是潮流，那么有没有好的工具方便我们在电脑撰写文档时把图例和公式又快又好的书写呢？

介绍

答案时有的，mermaid这个工具可以用来绘制流程图、时序图，十分简单、高效！而mathjax可以用来书写各种各样的的数学公式，在网页端通过简单文本的方法把图例和公式渲染出来，是广大软件工程师的必会神器👍👍👍

安装

mermaid

安装hexo-filter-mermaid插件，安装前切换源下载更快一些

1 2	npm config set registry https://registry.npmmirror.com npm install hexo-filter-mermaid --save

替换markdown渲染器，默认的不能正常渲染

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-markdown-it markdown-it-mermaid --save

mathjax

安装hexo-filter-mathjax插件

1	npm install hexo-filter-mathjax --save

配置

mermaid

配置_config.yml文件

mermaid:
  enable: true
  theme: default
  cdn: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

markdown:
  plugins:
    - markdown-it-mermaid  # 启用 Mermaid 支持
  anchors:
    level: 2
    permalink: true
    separator: '-'

禁止mermaid高亮，否则渲染不出来

highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
  exclude_languages: [mermaid]  # 禁止高亮处理 Mermaid 代码块

在node_modules\主题名\layout\_partial\head.ejs文件下加入以下内容

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ 
    startOnLoad: true,
    theme: 'default'  // 可选：default / dark / forest / neutral
  });
</script>

mathjax

配置_config.yml文件

1
2
3

mathjax:
  enable: true
  cdn: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

在node_modules\主题名\layout\_partial\head.ejs文件下加入以下内容

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']]
  },
  chtml: {
    scale: 1.2  // 放大 1.2 倍（默认 1.0）
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>

主题配置

1
2
3

mathjax:
  enable: true
  per_page: false  # 或 true（按需加载）

图例

流程图

简单的流程图示范（横向）代码

1
2
3

flowchart LR
A[hexo] --> B[mermaid]
A --> C[latex]

简单的流程图示范（横向）效果

flowchart LR
A[hexo] --> B[mermaid]
A --> C[latex]

复杂的流程图（纵向）代码

graph TD
    A[启动导航] --> B[获取RTK定位数据]
    B --> C{精度是否达标?}
    C -->|是| D[生成作业路径]
    C -->|否| E[等待信号改善]
    D --> F[显示2D/3D视图]
    F --> G[持续更新位置]

复杂的流程图（纵向）效果

graph TD
    A[启动导航] --> B[获取RTK定位数据]
    B --> C{精度是否达标?}
    C -->|是| D[生成作业路径]
    C -->|否| E[等待信号改善]
    D --> F[显示2D/3D视图]
    F --> G[持续更新位置]

时序图

时序图示范代码

sequenceDiagram
    participant 用户
    participant 系统
    participant 定位模块
    participant 作业规划模块
    participant 显示模块

    用户->>系统: 启动农机导航
    系统->>定位模块: 请求定位数据
    定位模块->>系统: 返回多模定位数据
    系统->>系统: 卡尔曼滤波处理定位数据
    系统->>作业规划模块: 输入定位数据和作业模式
    作业规划模块->>系统: 生成作业路径
    系统->>显示模块: 渲染2D/3D作业图
    显示模块->>用户: 显示作业路径和农机位置
    loop 实时更新
        定位模块->>系统: 实时定位数据
        系统->>显示模块: 更新作业图
    end
    用户->>系统: 选择智能辅助功能
    系统->>系统: 执行避障/断点续航等功能

时序图示范效果

sequenceDiagram
    participant 用户
    participant 系统
    participant 定位模块
    participant 作业规划模块
    participant 显示模块

    用户->>系统: 启动农机导航
    系统->>定位模块: 请求定位数据
    定位模块->>系统: 返回多模定位数据
    系统->>系统: 卡尔曼滤波处理定位数据
    系统->>作业规划模块: 输入定位数据和作业模式
    作业规划模块->>系统: 生成作业路径
    系统->>显示模块: 渲染2D/3D作业图
    显示模块->>用户: 显示作业路径和农机位置
    loop 实时更新
        定位模块->>系统: 实时定位数据
        系统->>显示模块: 更新作业图
    end
    用户->>系统: 选择智能辅助功能
    系统->>系统: 执行避障/断点续航等功能

饼图

画一个比例饼代码

pie
    title 研发人员
    "硬件" : 45
    "软件" : 30
    "测试" : 25

比例饼效果

pie
    title 研发人员
    "硬件" : 45
    "软件" : 30
    "测试" : 25

类图

生成一个类的示意图代码

classDiagram
    class Human {
        +String name
        +eat()
    }
    class Man {
        +shaving()
    }
    Human <|-- Man

一个类的示意图效果

classDiagram
    class Human {
        +String name
        +eat()
    }
    class Man {
        +shaving()
    }
    Human <|-- Man

数学公式

积分

积分公式代码示例

1
2
3

$$
\int_{0}^{\pi/2} \sin x \ dx = 1
$$

积分公式效果
$$
\int_{0}^{\pi/2} \sin x \ dx = 1
$$

求导

求导代码示例

$$
\ f'(x) = \frac{d}{dx} (\ln x) = \frac{1}{x}
$$
$$
f''(x) = \frac{d}{dx} \left( \frac{1}{x} \right) = -\frac{1}{x^2}
$$

求导公式效果
$$
\ f’(x) = \frac{d}{dx} (\ln x) = \frac{1}{x}
$$

$$
f’’(x) = \frac{d}{dx} \left( \frac{1}{x} \right) = -\frac{1}{x^2}
$$

幂

幂函数代码示例

1
2
3

$$
\ f(x) = x^3 \
$$

幂函数公式效果
$$
\ f(x) = x^3
$$

对数

对数函数代码示例

1
2
3

$$
	f(x) = \log_3 x 
$$

对数函数公式示例
$$
f(x) = \log_3 x
$$

指数

指数函数代码示例

1
2
3

$$
	f(x) = 2^x
$$

指数函数公式效果
$$
f(x) = 2^x
$$

物理公式

牛顿第二定律

代码

1
2
3

$$
\sum \vec{F} = \frac{d\vec{p}}{dt} 
$$

公式
$$
\vec{F} = m \vec{a}
$$

质能方程

代码

1
2
3

$$
E = mc^2
$$

公式
$$
E = mc^2
$$

万有引力定律

代码

1
2
3

$$
\vec{F} = -G \frac{m_1 m_2}{r^2} \hat{r}
$$

公式
$$
\vec{F} = -G \frac{m_1 m_2}{r^2} \hat{r}
$$

欧拉公式

代码

1
2
3

$$
e^{i\theta} = \cos\theta + i\sin\theta 
$$

示例
$$
e^{i\theta} = \cos\theta + i\sin\theta
$$

$$
e^{x + iy} = e^x (\cos y + i\sin y)
$$

麦克斯韦方程组

代码

\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \quad &\text{(高斯定律)} \\
\nabla \cdot \mathbf{B} &= 0 \quad &\text{(磁高斯定律)} \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \quad &\text{(法拉第定律)} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \quad &\text{(安培-麦克斯韦定律)}
\end{aligned}

公式
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \quad &\text{(高斯定律)} \
\end{aligned}
$$

$$
\begin{aligned}
\nabla \cdot \mathbf{B} &= 0 \quad &\text{(磁高斯定律)} \
\end{aligned}
$$

$$
\begin{aligned}
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \quad &\text{(法拉第定律)} \
\end{aligned}
$$

$$
\begin{aligned}
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \quad &\text{(安培-麦克斯韦定律)}
\end{aligned}
$$

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。