Hexo 加上 Graphviz 功能

  1. Hexo 加上 Graphviz 功能
    1. 看 hackmd 的 code
    2. Viz.js ≠ Viz
    3. hexo-filter-viz 更新它
    4. 安裝

Hexo 加上 Graphviz 功能

今天突然心血來潮,除夕沒事就來改改 hexo 寫寫程式吧

一開始也是想「移植 hackmd 的功能到 hexo」下一個就是,我超愛也很常用的 Graphviz
改這個之前,都是貼上 svg code 上來。而不是在 hexo 上直接寫 source code。

調查 Graphviz 已經不是第一次了,確定不能用 Graphviz 這個名字就搞定。所以這次直接去找 hackmd 的 source code。
看看它是怎麼做的

看 hackmd 的 code

憑著記憶找了一下是在哪個位子。
運氣真好,一下就被我找到了[1]

354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
// graphviz
var graphvizs = view.find('div.graphviz.raw').removeClass('raw')
graphvizs.each(function (key, value) {
try {
var $value = $(value)
var $ele = $(value).parent().parent()

var graphviz = Viz($value.text())
if (!graphviz) throw Error('viz.js output empty graph')
$value.html(graphviz)

$ele.addClass('graphviz')
$value.children().unwrap().unwrap()
} catch (err) {
$value.unwrap()
$value.parent().append('<div class="alert alert-warning">' + err + '</div>')
console.warn(err)
}
})

這就是 hacmkd 處理 graphviz 的地方。其中 var graphviz = Viz($value.text()) 似乎就是處理的語法。

21
var Viz = require('viz.js')

在 21 行之處,有宣告…,這不就是套件名稱了嗎?!帥呀!來研究一下

Viz.js ≠ Viz

說明文件[2],足以說明如何使用

<script src="viz.js"></script>
<script src="full.render.js"></script>
<script>
var viz = new Viz();

viz.renderSVGElement('digraph { a -> b }')
.then(function(element) {
document.body.appendChild(element);
})
.catch(error => {
// Create a new Viz instance (@see Caveats page for more info)
viz = new Viz();

// Possibly display the error
console.error(error);
});
</script>

發現了嗎? var viz = new Viz(); + viz.renderSVGElement('digraph { a -> b }') 的用法,是不是和 hackmd 不一樣呢?簡單的說,Viz.js 已經更新到 2.x 版了。而 hacmkd 使用的版本是 1.x 版的。

不過,光知道套件還不能直接上 hexo,還要找找 hexo 的外掛程式,依之前的命名規則,應該是叫做 hexo-filter-viz [3]。而果然沒錯,有這個套件,立馬裝來試看看。

結果,一直渲染不出來,只有一塊白色的區塊,但是有 svg code。
我自己實測的結果,如果使用 2.1.2 版,就不會出現這個問題。

hexo-filter-viz 更新它

fork 了一份 hexo-filter-viz [4]

最後,仿照 hexo-filter-flowcharthexo-filter-sequence 兩個的架構,來重新實作 hexo-filter-viz。
再提 pull request 給原作者。雖然幾乎重新寫了它的 code ,但是還是用提「pull request」的方式來更新比較好。

安裝

有興趣的朋友們,可以裝我 github 上的版本。
如果 pull request 成功合併之後,再安裝它的版本。
目前 npm 沒有 package 可以安裝。

npm install https://github.com/dwatow/hexo-filter-viz.git

直接跑 hackmd 的語法測試,成功的話出現這樣的畫面


  1. codimd - github ↩︎

  2. Using a <script> Tag ↩︎

  3. hexo-filter-viz - github ↩︎

  4. fork hexo-filter-viz - github ↩︎