Hexo添加 Graphviz 插件

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

Graphviz 是 AT&T 实验是开发一款开源的绘图工具，它通过绘图语言来进行绘图，这点和 Markdown 比较相似，通过和 Markdown 结合，使用起来非常流畅，Hexo 也提供了相关的插件来支持 Graphviz，本文主要介绍插件的安装，使用教程可以参考网上其他文章。

具体安装步骤如下：

添加插件

首先通过 yarn 安装插件：yarn add hexo-graphviz；

配置主题

我这里使用的 next 主题，所以配置文件是themes/next/_config.yml，然后添加如下内容：

1
2
3
# hexo-graphviz
graphviz:
  enable: true

添加 swig 文件

在主题中添加 themes/next/layout/graphviz.swig 文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if theme.graphviz.enable %}
  <script src='https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.1/viz.js'></script>
  <script>
    String.prototype.replaceAll = function(search, replacement) {
      var target = this;
      return target.split(search).join(replacement);
    };

    let vizObjects = document.querySelectorAll('.graphviz')

    for (let item of vizObjects) {
      let svg = undefined
      try {
        svg = Viz(item.textContent.replaceAll('–', '--'), 'svg')
      } catch(e) {
        svg = `<pre class="error">${e}</pre>`
      }
      item.outerHTML = svg
    }
  </script>
{% endif %}

修改主题 layout 文件

找到主题的布局文件 themes/next/layout/_layout.swig，在 include 列表中，添加graphviz.swig 引用，内容如下：

1
{% include '_third-party/graphviz.swig' %}

在 Markdown 中使用 Graphviz

在文章中，可以通过 ```graphviz 代码段来进行 Graphviz 绘图。