6月上旬に使い始めた Markdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。 https://mermaidjs.github.io/ mermaid.min.js を Web サーバに配置し、ページの下部に以下が含まれるようにフッタファイルを編集。 <script src="/path/to/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad:true});</script> これでページ中に <div class="mermaid"> graph LR a --- b a --- c </div> のようにダイアグラムの定義をmermaid クラスの要素の中に書いておくと、ダイアグラムの SVG 要素が生成し置き換えてくれる。表示は以下のような感じ。 graph LR a --- b a --- c 画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。 とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。