Hexo 添加对 Graphviz 的支持

什么是Graphviz？

Graphviz是开源的图形可视化软件。图形可视化是一种将结构信息表示为抽象图形和网络图的方式。它在网络，生物信息学，软件工程，数据库和网页设计，机器学习以及其他技术领域的可视界面中具有重要的应用。 (来自官方描述)

以上是Graphviz实现作图的示例展示，通过类似于Markdown标记语言的形式，Graphviz使用Dot文本图形描述语言来实现作图。

Hexo添加对Graphviz的支持

1. 安装相关插件 hexo-graphviz

   在终端cd至hexo博客根目录，通过yarn或者npm包管理器安装

   yarn add hexo-graphviz				# 通过yarn安装
   npm install hexo-graphviz --save	# 通过npm安装
   

2. 在布局模板中添加相应的JavaScript代码

   cd至 {博客根目录}/themes/{主题名}/layout/_partial 目录之下，用vim或编辑器打开 after-footer 文件，针对不同类型的模板引擎添加相应代码：

   • ejs

   <% 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>
   <% } %>
   

   • swig

   {% 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 %}
   

   • pug

   if theme.graphviz.enable == true
     script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.1/viz.js')
     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
       }
   

3. 在hexo根目录下的 _config.yml 启用 graphviz

   # hexo-graphviz
   graphviz:
     enable: true
   

示例预览

插件安装完成之后通过Markdown添加代码块方式声明 graphviz 样式即可
注：优快云博客文章不支持 Graphviz 解析，请移步到我的Hexo博客查看效果：
Hexo 添加对 Graphviz 的支持

• 示例1：无向图

graph demo1 {
    a -- b -- c;
    b -- d;
}

graph demo1 {
   a -- b -- c;
   b -- d;
}

• 示例2：二叉树

digraph demo2 {
    // bgcolor="beige" // 可设置背景颜色
    node [shape="record", height=.1]
    node0[label="<f0> | <f1> G | <f2>"]
    node1[label="<f0> | <f1> E | <f2>"]
    node2[label="<f0> | <f1> B | <f2>"]
    node0:f0 -> node1:f1
    node0:f2 -> node2:f1
}

digraph demo2 {
    // bgcolor="beige" // 可设置背景颜色
    node [shape="record", height=.1]
    node0[label="<f0> | <f1> A | <f2>"]
    node1[label="<f0> | <f1> B | <f2>"]
    node2[label="<f0> | <f1> C | <f2>"]
    node0:f0 -> node1:f1
    node0:f2 -> node2:f1
}

• 示例3：大括号子图形式

graph demo3 {
    "数据结构三要素" -- {"数据的逻辑结构", "数据的存储结构", "数据的运算"}
}

graph demo3 {
    "数据结构三要素" -- {"数据的逻辑结构", "数据的存储结构", "数据的运算"}
}

• 示例4：总示例

digraph demo4 {
	
	label=<<B>Graphviz基本组成结构</B>>;

    labelloc=top;			// 标题位置
    bgcolor=transparent;	// 背景透明
    
    node[shape=box];		// 结点形状为方形
    //edge[style=bold];
    
    // 独立出现的为结点或属性声明, 中括号前为结点名称
    graphviz[label="Graphviz"];
    
    subgraph{
        layout[label="Layouts"];
        script[label="Script Files"];
        api[label="APIs"];
        rank=same;
    }
    
    graphviz -> layout;
    graphviz -> script;
    graphviz -> api;
    
    // 设置子图
    api -> 
    subgraph{
	    layout_etc[label="......"];
    }
    
    script ->
    subgraph{
        element[label="Elements"];
        attribute[label="Attributes"];
        rank=same;
    }
    
    layout ->
    subgraph{
        layout_dot[label="dot"];
        layout_neato[label="neato"];
    }
    
    element ->
    subgraph{
        ele_graph[label="Graph"];
        ele_node[label="Node"];
        ele_edge[label="Edge"];
    }
}

digraph demo4 {
	
	label=<<B>Graphviz基本组成结构</B>>;

    labelloc=top;			// 标题位置
    bgcolor=transparent;	// 背景透明
    
    node[shape=box];		// 结点形状为方形
    //edge[style=bold];
    
    // 独立出现的为结点或属性声明, 中括号前为结点名称
    graphviz[label="Graphviz"];
    
    subgraph{
        layout[label="Layouts"];
        script[label="Script Files"];
        api[label="APIs"];
        rank=same;
    }
    
    graphviz -> layout;
    graphviz -> script;
    graphviz -> api;
    
    // 设置子图
    api -> 
    subgraph{
	    layout_etc[label="......"];
    }
    
    script ->
    subgraph{
        element[label="Elements"];
        attribute[label="Attributes"];
        rank=same;
    }
    
    layout ->
    subgraph{
        layout_dot[label="dot"];
        layout_neato[label="neato"];
    }
    
    element ->
    subgraph{
        ele_graph[label="Graph"];
        ele_node[label="Node"];
        ele_edge[label="Edge"];
    }
}