Hugoにシーケンス図を埋め込むその2

2017-08-27

κeenです。昨日のエントリにmermaid.jsを試すといいよとのコメントを頂いたので試します。

昨日のエントリでいう2のやつ、ブラウザ上でレンダリングしてくれます。

導入は簡単で、

headに

<link rel="stylesheet" href="https://unpkg.com/mermaid@7.0.4/dist/mermaid.forest.min.css">

を、

bodyの下の方に

<script src="https://unpkg.com/mermaid@7.0.4/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

を記述するだけです。私のテーマ（liquoriceのフォーク）ではそれぞれcustom/head.html、tail.htmlだったんですが恐らくテーマ毎に違うと思うのでよしなにやって下さい。

そして

<div class="mermaid">
    CHART DEFINITION GOES HERE
</div>

と書くとmermaid.jsがこれを拾って処理してくれるようです。

例えばこれが

<div class="mermaid">
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</div>

こう

graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);

あるいはこれが

<div class="mermaid">
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
</div>

こう

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?

最後のやつ、左向きの矢印の頭がレンダリングされてない（SVGレベルでarrowheadがない）… 公式のデモページでもそうなのでバグか何かですかね。

ひとまず昨日の方法よりはマシになったのでこれでいこうと思います。