6月上旬に使い始めた Markdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。
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 要素が生成し置き換えてくれる。表示は以下のような感じ。
画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。
とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。
昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。
mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。
<div class="dot"> digraph { graph [rankdir = LR]; a -> b; a -> c; } </div>
と書いたら以下のように変換される。
mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。
Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。
で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。
ちょっとした図を書くのに Excalidraw を使ってみることにした。
Obsidian 上で Excalidraw ファイルを編集・管理できて便利な Obsidian-Excalidraw プラグインを使う。
図を更新すると自動的に対応する SVG 形式ファイルや PNG 形式ファイルにエクスポートし更新してくれる機能が入っているのが入っているのがめちゃくちゃ嬉しい。
マインドマップツール iThoughtsHD (現 iThoughts) がマインドマップを更新・同期するたびに PDF や PNG + HTML にエクスポートしてくれてとても便利だったんですよ。更新するたびに自動的にスタンダードな形式でエクスポートしてくれる機能すごく良いんだけれど、実装されているアプリケーションほとんど無いんだよね。
図を書きながら考える時にたまに SimpleMind Pro を使うんだけれど、Obsidian ノートと一緒に管理するのが面倒で結局すぐやめてしまう。やはり Obsidian-Excalidraw プラグインを使っていくかなあ。
Obsidian Publish や MkDocs を使って公開/共有するノートに埋め込む場合の方法を確認しておいた。
Naney (なにい) です。株式会社MIXIで SNS 事業の部長をしています。
※本サイトの内容は個人的見解であり所属組織とは関係ありません。