偏技术的文章有时会用到各种图形，一般来说能够做好图而后截图放到文章中就好了，尽管但图片自身也很小，但存一大堆图片占用空间总感觉不是很好。

mermaid

mermaid官方网站

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

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

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 chartmermaid: ## 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>

参考和举荐

  • 【hexo指南】hexo中运行shader和threejs
  • 【hexo指南】hexo配合github action 主动构建（多种形式）
  • 【hexo指南】hexo公布内容到gitee page
  • 【hexo指南】hexo公布内容到多个git仓库
  • 【hexo指南】hexo公布内容到多个git仓库