Hexo的Yilia主题下安装mermaid流程图

安装

解决Hexo安装mermaid插件的报错问题之后
运行以下命令，mermaid才能添加成功

npm i mermaid

修改配置

在yilia主题目录下找到配置文件_config.yml,配置如下：

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: default

下载相关js

mermaid.min.js下载地址
把相关脚本放到yilia/source/lib目录下

配置after-footer.ejs

在after-footer.ejs文件中添加

<% if (theme.mermaid.enable) { %>
    <script src='/lib/mermaid.min.js'></script>
  <script>
	  $(document).ready(function(){
        var mermaid_config = {
          startOnLoad: true,
          theme:'<%- theme.mermaid.theme %>',
          flowchart: {
            useMaxWidth: false,
            htmlLabels: true
          }
        }
        mermaid.initialize(mermaid_config);
      });
  </script>
<% } %>

修改背景颜色

因为原先流程图的背景颜色较深，导致一些深色箭头看不清。
流程图显示块和代码块，实际上使用的都是<pre></pre>这样的标签。
在 yilia/source/main.xxxx.css文件中，找到.article-entry .highlight,.article-entry pre这块的定义，在代码块后面添加

.article-entry .highlight,.article-entry pre{
    background:#1a0139;
    margin:10px 0;
    padding:10px;
    overflow:hidden;
    overflow-x:auto;
    color:#fff;
    font-size:.9em;
    line-height:22.400000000000002px 
}
//添加下面的代码，取消背景色，这样流程图出来就看的很清晰了
.article-entry pre, .mermaid{
    background:transparent;
}

示例

graph LR
    A[开始] --> B[中间步骤]
    B --> C[结束]

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 Another :2014-01-12, 12d
        another task    :24d

sequenceDiagram
    participant Alice
    participant Bob
    Alice ->> Bob: 你好，Bob！
    Bob -->> Alice: 你好，Alice！

参考文章链接：https://edsiongithub.github.io/2021/09/26/16/
美人鱼官方文档：https://mermaid.js.org/intro/

赏

谢谢你请我喝咖啡！

微信