Hexo中加入Mermaid图

什么是Mermaid 图

Mermaid 是一款基于 JavaScript 的开源绘图工具，核心特点是：用纯文本代码替代手动拖拽，可以轻量的实现流程图类图等图像的绘画
特别是在ai广泛使用的现在，通过ai分析代码生成Mermaid源代码图很适合快速分析代码工作流程

如何在Hexo中使用Mermaid图

导入包

Hexo原生不支持Mermaid图的使用，这里需要用到一个包
快速下载：npm install hexo-filter-mermaid-diagrams --save

配置包

安装好这个包后需要在 _config.yml文件中配置
主要就是打开enable就好，其他的都有默认设置

mermaid:
  enable: true
  code_write: false
  theme:
    light: default
    dark: dark
  version: "10.6.1"  # 指定Mermaid版本（
  options:           # 全局自定义Mermaid渲染参数（进阶）
    fontSize: 14     # 图表文字大小（默认16）
    fontFamily: "Consolas, monospace"  # 图表字体（适配代码风格）
    logLevel: "error" # 日志级别（仅显示错误，减少控制台输出）
    startOnLoad: true # 页面加载时自动渲染图表（必开）

在主题文件夹中调用

这里用的是butterfly主题，在themes\butterfly\layout\includes下找到 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);
    }

接下来只需要在post的md文件中直接写mermaid语法的图就好啦

其他主题的添加方法可以参考github上的教程

---

你可能用的上的地址

项目主页
mermaid项目地址
mermaid写法学习