发表于2022-01-14更新于2023-05-04字数统计666阅读次数213阅读次数15

偏技术的文章有时会用到各种图形，一般来说可以做好图然后截图放到文章中就好了，虽然但图片本身也很小，但存一大堆图片占用空间总觉得不是很好。

mermaid

mermaid官方网站

mermaid支持很多种图形的渲染，用它是个不错个选择。它可以渲染出多种复杂的图形。例如下面这个。

      Adding GANTT diagram functionality to mermaid2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-212014-01-232014-01-252014-01-27Completed task            Completed task in the critical line Implement parser and jison          Describe gantt syntax               Active task               Create tests for parser             Add gantt diagram to demo page      Add another diagram to demo page    Future task               Future task in critical line        Describe gantt syntax               Add gantt diagram to demo page      Add another diagram to demo page    Future task2              Create tests for renderer           Add to mermaid                      Functionality added                 A sectionCritical tasksDocumentationLast section      Adding GANTT diagram functionality to mermaid

而绘制它也仅仅需要几行代码

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

安装步骤很简单，只需要三步

安装hexo插件

npm i hexo-filter-mermaid-diagrams

配置hexo

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "8.13.8" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

进入你的项目文件中的themes\stun\layout\_partials\footer\footer.pug文件下，我用的主题使用pug语言，所以我加入这一行代码即可

script(src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js")

如果是.swig结尾的主题页面文件，可以参考如下配置

{% 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>
{% endif %}

如果是原生js的则更简单,插入这行代码即可

<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js"></script>

参考和推荐