为Hexo博客引入Mermaid流程图渲染

阅读数: 0次 2025-07-08

字数：952字 | 预计阅读时长：4分钟

前言

今天想要使用Markdown的Mermaid流程图功能，Typora中可以正常渲染，但是使用Hexo生成静态网页，流程图果然无法正常渲染。

可以通过安装Mermaid渲染插件并做一些相应的配置来实现Mermaid的正常渲染。

有的Hexo主题自带支持Mermaid渲染，这里只针对本身无Mermaid渲染功能的主题，如本博客使用的Yilia。

添加Mermaid渲染功能

1. 安装插件

Mermaid的官方页面：Mermaid | Diagramming and charting tool

需要用到的插件是hexo-filter-mermaid-diagrams：webappdevelp/hexo-filter-mermaid-diagrams: mermaid diagrams for hexo

如果Hexo博客的插件管理器使用的是NPM，可以用下面的命令安装：

1	npm install --save hexo-filter-mermaid-diagrams

如果是Yarn，使用：

1	yarn add hexo-filter-mermaid-diagrams

其他插件管理器同理。

2. 修改主题配置文件

打开当前使用的主题文件夹下的主题配置文件_config.yml，在尾部添加Mermaid渲染选项：

# mermaid https://github.com/knsv/mermaid
# https://github.com/webappdevelp/hexo-filter-mermaid-diagrams
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

3. 添加渲染代码

以Yilia主题为例，在主题文件夹下的yilia/layout/_partials/after-footer.ejs文件的尾部添加：

<!-- 添加Mermaid流程图渲染bagin-->
<% if (theme.mermaid.enable) { %>
  <script src="https://s4.zstatic.net/ajax/libs/mermaid/11.8.1/mermaid.min.js" integrity="sha512-BFmLwKC92En/Mv3/tTlkzotbuaJlvgUvGRyDh1037lTgKhP326tEL1mDN0wl8kXC/ZbNsKd7mT4iOjFC+EhoNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'theme.mermaid.theme'});
    }
  </script>
<% } %>
<!-- 添加Mermaid流程图渲染end -->

如果主题文件夹下的after-footer文件不是ejs格式，而是swig或是pug格式，可以参考插件官方的对应页面来添加对应的配置。
其中外部引入的mermaid.min.js文件的Script标签可以替换为：
1
<script src="https://s4.zstatic.net/ajax/libs/mermaid/11.8.1/mermaid.min.js" integrity="sha512-BFmLwKC92En/Mv3/tTlkzotbuaJlvgUvGRyDh1037lTgKhP326tEL1mDN0wl8kXC/ZbNsKd7mT4iOjFC+EhoNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

此时再次生成静态文件，网页中的Mermaid流程图应该已经被正常渲染。

修改渲染样式

如果主题的代码块背景颜色较深，可能会导致流程图的连线看不清，可以通过修改CSS文件来去掉流程图渲染框的背景颜色。

因为流程图显示块使用的是<pre></pre>标签，因此直接修改CSS添加Mermaid类的背景色无法生效，需要做的修改如下：

打开主题文件夹下的yilia/source/main.xxxx.css文件，找到.article-entry .highlight, .article-entry pre的定义，在这个代码块后面设置mermaid渲染样式：

.article-entry .highlight,
.article-entry pre {
  background: #3a464c;
  margin: 10px 0;
  padding: 10px;
  overflow: auto;
  color: #fff;
  font-size: 0.9em;
  line-height: 22.400000000000002px;
}

/* 修改Mermaid渲染样式-修改背景色为透明 */
.article-entry pre,
.mermaid {
  background: transparent;
  font-weight: 500;
  text-shadow: none !important;
}

至此，Mermaid流程图渲染配置完成！

效果

Mermaid语法可参考官方文档：Mermaid | Diagramming and charting tool

也可参考其他教程，如：Markdown 流程图绘制详解-CSDN博客

例如C语言中while循环的流程图代码为：

graph TB
    A[初始化变量] --> B([循环开始])
    B --> C{循环条件判断}
    C -- 条件为真 --> D[执行循环体]
    D --> E[更新循环变量]
    E --> C
    C -- 条件为假 --> F([循环结束])

最终渲染效果如下：

graph TB
    A[初始化变量] --> B([循环开始])
    B --> C{循环条件判断}
    C -- 条件为真 --> D[执行循环体]
    D --> E[更新循环变量]
    E --> C
    C -- 条件为假 --> F([循环结束])

参考链接

本文来源： 青江的个人站
本文链接： https://hanqingjiang.com/2025/07/08/20250708_hexoMermaid/
版权声明： 本作品采用 CC BY-NC-SA 4.0 进行许可。转载请注明出处！