埋め込みについて諸々：Mermaid

Mermaid integrationから８年経った。隆盛を極めるインターネット業界でも良いものは残る。Mermaidもバージョンを重ねて、その地位を不動のものとして残っていた。

モジュール javascript

いつの頃からか、Mermaidで作ったフローチャートの線が消えていた。設定や組み込み方の問題を疑って色々調べたが見当たらないので、バージョンアップを試した。結果、バージョンアップで線は出るようになった。

この対応の途中で気づいたのだが、バージョンがかなり進んでいる。8.0.0へのバージョンアップで用は足りたのだが、なるべく最新版を使いたい。一方、問題がでたものはにmermaid.full.jsを直にこのブログに組み込んでいて、一見してバージョンが判らない。中を見ても判然としなかった。github.com /mermaid-js/mermaidを辿ると、バージョン0.4.0辺りのようだった。mermaidを組み込んだブログの日付で判断した。今や、開発バージョンが10であり、８年ほど経っている。古すぎ。

８年ほど前とはHTMLの仕様も変わっていて、scriptタグに module なぞというオプションも与えられるようになっていて、面白い。対応するものが.esm.mjsなる拡張子だ。ECMA Script Module . Module Java Scriptかな。javascriptの仕様自体に全部コミコミのモジュールという機能を拡張したようだ。色々調べてみた。.esmは拡張子じゃない。ファイル名の一部で、ECMA Script Module(EC Module)であることを明確にしているに過ぎず、mermaid-jsチームが慣例的に採用している命名方法にすぎない。.mjsは想像通りModule Java Scriptの略だ。このページに詳しく書かれている。想像が行き過ぎていたのは「モジュールがこの８年の間に拡張された仕様」と思ってしまった辺りだ。2015年より以前から.jsであってもモジュール扱いしていた。この８年の間に、mを接頭してモジュールであることをより明確にしょう、となったに過ぎない。

これで、バージョン8の中盤辺りから採用され始めた.mjsが何なのか大体の解釈がついたので、安心して利用可能だ。何らかの新フォーマットと誤認し不安を覚えたことが払拭できた。ために、中を覗いてみたらアグリファイされた常日頃利用している、scriptタグのsrcプロパティに与える.js等と同じであった。

組み込み

投稿などで利用するための設定に幾通りかある。

_config.yml＋Liquidタグ（jekyll-mermaid）

jekyll-mermaidプラグインをインストールして、_config.ymlで利用を宣言＆設定する方法。

文中では{% mermaid %}…...{% endmermaid %}で利用する。Liquidタグ囲う。jekyllを利用するに当たり自然な感じだ。

_config.ymlのmermaidセクション・srcにmermaid.jsへのURLを与える。導入当初の経緯は忘れたが、/plugins/mermaid.full.jsを与えていた。インストールも/pluginsにmermaid.full.jsをコピーした。この設定で、jekyll-mermaidプラグインが{% mermaid %}タグを適宜htmlタグ、mermaid.full.jsのscriptタグへ置き換える。

</body>の直後にscriptタグ＋htmlタグその１

</body>の記述があるlayoutか、include配下の.htmlファイルにscriptタグを追加してmermaidを読み込む。利用は直にdivタグやpreタグを記載してタグのclassをmermaidとする。そのタグ内にmermaidシンタックスで図を記載する。

jekyll-mermaidプラグインがLiquidタグを置き換えてくれることを手動で行うわけだ。

scriptタグの設置は_layouts/default.htmlで

  </body>
  <script src="https://cat73220.github.io/mermaid.js"></script>
  <script>
    mermaid.initialize();
  </script>
</html>

投稿中

{% mermaid %}
flowchart LR
    A[Start] -- note for a line --> B((a path))
    A --> C(The other path)
    B --> D{END}
    C --> D
{% endmermaid %}

</body>の直後にscriptタグ＋htmlタグその２

上述の２方法は、blogの投稿(post)中では問題ない。しかし、portalのportfolio・projectX.mdでは旨く行かない。初めてmermaidをproject2.mdに記載したときには表示されず当惑した。調査すると、mermaid自体はhtml内に存在していて当該箇所(divタグに置き換わる)のサイズが１６ピクセル四方になり小さすぎて視認できなかった。試しに、portfolio本体側に記載すると問題なく現れる。サイズの計算を追跡し始めて、しばらくしたところで閃いた。portfolio＋projectX.mdはbootstrap・modalで実装されている。portalページが画面に写った際、表示されていない。portfolioセクションのプロジェクトをクリックすると現れる、bootstrap・modalだ。一方、mermaidはportalページが一番はじめに画面に写ったときにhtmlタグ・クラスがmermaidのhtmlタグをグラフ描画する。projectX.mdはこタイミングでサイズ０なので計算結果もサイズ０となり紆余曲折あって１６ピクセル四方の極小さい範囲の描画になってしまう。

bootstrap・modalのイベントに’show.bs.modal’がある。表示されるときに実行されるイベントだ。このコールバックでmermaind.init()を実行してみることにした。強調したように表示されるときでは、まだ尚早だ。shonw.bs.modalもある。表示が完了で実行される。旨く行った。だが、まだ足りない。project2.mdだけならばこれで良いのだが、別のproject3.mdとかproject6.mdでも利用したい。個別のhtmlタグにだけmermaid.initの実行を制限したい。ソースを追跡すると「引数にjQueryスタイルのセレクタを記述できる」とある。指定タグだけに制限する方法は判った。ページが表示されたときにmermaidの置き換えが起きないようにするにはmermaid.initializeの引数に{startOnLoad: false}を与えればよい。「起動時に変換」を無効に。

文中は

<div id="project2-mermaid">
flowchart LR
    A[Start] -- note for a line --> B((a path))
    A --> C(The other path)
    B --> D{END}
    C --> D
</div>

mermaid変換を実行するためにdivタグのidをproject2-mermaidとした。portal/portofolio/projectX.md等はファイル中冒頭にlink属性があり、これがmodalのidとなる。

<div class="modal ..." id="<linkの文字列>"
　　：

scriptタグの設置は同様に_layouts/default.htmlで

  </body>
  <script src="https://cat73220.github.io/mermaid.js"></script>
  <script>
    mermaid.initialize({startOnLoad: false});
    $('.modal#automation-computerization').on('shown.bs.modal', function() {
	  mermaid.init('#project2-mermaid');
    });
    mermaid.init('#team-mermaid');
  </script>
</html>

思うように動作するようになった。これをjekyllプラグインで埋め込みを自動化したい。