hexo支持mermaid

• 前言
• 安装插件
• 编辑配置文件
• 在 ejs 中引入 mermaid.js
• Q&A

前言

一定要参考[官网](mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io))

不要相信垃圾 CSDN

安装插件

npm 安装

npm install hexo-filter-mermaid-diagrams

项目 [GitHub 主页]webappdevelp/hexo-filter-mermaid-diagrams: mermaid diagrams for hexo (github.com)

编辑配置文件

修改文件 themes/pure/_config.yml

文件最好添加以下内容：

# 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

在 ejs 中引入 mermaid.js

修改 themes/pure/layout/_common/footer.ejs

添加以下内容

<% if (theme.mermaid.enable) { %>
  <script src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
<% } %>

Q&A

如果加载完后，显示的图不正确，那么很有可能是因为引入 mermaid.min.js 的链接不正确