GitHub Pages で Mermaid を使う

Update: 2022-06-04

しばらく前のことになりますが GitHub が Markdown への Mermaid のダイアグラムの埋め込みに対応しました。

Include diagrams in your Markdown files with Mermaid

しかしながら Jekyll の本体はそんなものには対応していなくてプラグインなどが必要になります。で、 Pages でプラグインが使えるのかというと、使えなくなはいけど、面倒なことになりそうな。。。プラグイン無しでなんとかする方法を探してみたらありました。

Embed Mermaid in Jekyll without plugin

コードをコピペしてみたら、動かない。。。 JavaScriptのコンソールのエラーは「$ なんか知らん」ってそりゃここでは jQuery 使ってないもの。 jQuery を使わない方法に変えます。

body の onload で次の処理を呼びます。

function initializeMermaid() {
   mermaid.initialize({
      startOnLoad:true,
      theme: "default",
   });
   window.mermaid.init(
      undefined,
      document.querySelectorAll('.language-mermaid'),
   );
}

記事と同じサンプルを試してみます。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

ローカルで動きました。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

highlight.js が「 mermaid なんて言語は知らん」と言ってますが、警告出してなにも処理しないということのようなのでこのままとします。

Tag: github mermaid