^-^
Markdown流程图-Mermaid
最近更新：2025-06-20   |   字数总计：1k

Markdown流程图-Mermaid

目的：Hexo 引入流程图-Mermaid的支持

1 添加支持

Hexo 默认是markdown不支持Mermaid流程图的，需要添加支持，在 hexo 根目录下执行命令：

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

2 配置

  • 基础配置
    编辑 hexo 根目录下的 _config.yml，在最后添加如下内容：

1
2
3
4
5
6
7
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

  • 高级配置（可选）
    以next主题为例，编辑 themes/next/layout/_partials/footer.swig 在最后添加如下内容

1
2
3
4
5
6
7
8
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

如果你的主题下没有footer.swig文件，你需要在你的主题目录下搜索文件名为after-footer.ejs和after_footer.pug的文件，
根据文件名的不同在其最后添加不同的内容，这点在github上的 hexo-filter-mermaid-diagrams 教程已经明确交代了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 若是after_footer.pug，在最后添加内容
if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

# 若是after-footer.ejs，在最后添加
<% if (theme.mermaid.enable) { %>
  <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
<% } %>

3 Mermaid应用说明

  • 语法结构
    语法结构如下：A[名称] --> B(名称)
    其中，A、B均代表形状名称， -->表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

1
2
3
4
5
6
7
8
括号形式 形状样式
[ ] 矩形框
( ) 圆角矩形框
{ } 菱形
(( )) 圆形
如果没有形状边框，可以写成：C[语句] –> |语句| D[语句]或者C[语句] – 语句 –> D[语句]都可以。
相对而言，比 flowchart 更加简洁清晰，Mermaid还支持制作时序图、甘特图等。

更多详细内容还可以参考网站：https://mermaid-js.github.io/mermaid/#/

  • 测试
    接下来，先进行测试一下，使用markdown进行编写mermaid语句。如下所示：

源码:

1
2
3
4
5
6
7
8
9
10
graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA

写好后，可以在本地启动hexo查看效果如下图

效果：

graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA

其他示例：

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
graph LR
开始 --> A:1人5天
A:1人5天 --> 结束

开始 --> B:1人3天
B:1人3天 --> 结束

开始 --> C:1人2天
C:1人2天 --> 结束
graph LR
A:1 --> B:2
A:1 --> D:5
B:2 --> C:1
C:1 --> E:2
D:5 --> E:2

甘特图

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

title 产品计划表

gantt
dateFormat YYYY-MM-DD
axisFormat %m-%d

section 初期阶段
明确需求: 2016-03-01, 10d

section 中期阶段
跟进开发: 2016-03-11, 15d

section 后期阶段
走查测试: 2016-03-20, 9d

文章参考：
https://xianmengfei.gitee.io/2021/03/01/09相关工具/hexo优化：Markdown语法引入Flowchart、Mermaid和sequence流程图

mermaid 官方文档：https://mermaid.js.org/intro/
mermaid 中文文档：https://mermaid.nodejs.cn/intro/

end

2023-03-23 该篇文章被 up 打上标签: markdown hexo 归为分类: 技术

© 2025 UP / Home / Archive / Channel / Sitemap