Obsidianの次期版で描画エンジンに採用予定
ObsidianのCEO、Steph Ango氏は、Mermaid記法で書いた図をSVGに変換するライブラリ「Pele」を公開しました。Obsidianの次期版で図の描画エンジンに採用する予定で、ライブラリはすでに利用できます。
Mermaidは、テキストからフローチャートやシーケンス図などを生成する記法とJavaScriptライブラリです。PeleはMermaid 12.1.0に組み込まれた図の種類に対応し、入力されたMermaid記法からSVGを生成します。
PeleはTypeScript製で、MITライセンスのオープンソースとして公開されています。npmパッケージとしてアプリに組み込めるほか、ブラウザー上で要素に図を描画する方法も用意されています。
描画速度とサイズ、テーマ設定
Ango氏は、Peleの描画速度はmermaid.jsの100〜500倍で、バンドルサイズは約6分の1だと紹介しました。Pele側の比較値では、gzip圧縮後のバンドルサイズはPeleが230キロバイト、mermaid.jsが1.6メガバイトです。描画時間はそれぞれ0.05〜0.3ミリ秒、6〜82ミリ秒とされています。
Peleは実行時の依存ライブラリを持たず、図の色やフォントはCSS変数で変更できます。色の変更は図を再描画せずに反映されます。表示領域に合わせた縮小や、幅の上限に応じたレイアウト調整にも対応します。
読み込み量を抑える方法もあります。図の種類を個別に登録したり、必要になった段階で読み込んだりできるため、アプリが最初に読み込むコードの量を抑えられます。
Mermaid.jsとは異なるレイアウト
Mermaid.jsでは、バージョン12.0.0以降、ELK（Eclipse Layout Kernel）が標準のレイアウトエンジンです。ELKはフローチャート、状態図、クラス図、ER図など複数の図で使われ、マインドマップでは別のアルゴリズムが標準で使われます。
Mermaid.jsは図の種類に応じて、ELKのほかDagre、Cose Bilkent、Tidy Treeなどのレイアウトを利用できます。設定でレイアウトを指定することもでき、たとえばDagreを選ぶ構成があります。
PeleはMermaid.jsとは異なる独自のレイアウトエンジンを使うため、ノードの位置や間隔、線の経路が一致しない場合があります。Mermaidのテーマ設定も引き継がず、Pele側のCSS変数で色などを設定します。Mermaid記法を利用できても、図の見た目や配置まで同じになるとは限りません。
数式対応と移植版の動き
バージョン1.7.0では、日本語や中国語のラベルを文字間で折り返せるようになりました。続く1.8.0では、ラベル内の「$$...$$」形式の数式を扱うためのオプションが追加されています。
数式を組版する機能はPeleに含まれません。利用側が数式をSVGやMathML、HTMLに変換する処理を渡す仕組みです。処理を渡さない場合、ラベルにはTeXの文字列が表示されます。
PeleをGoへ移植したライブラリ「sketch」も公開されており、ターミナル上でMermaidの図を表示するツール「tuios」で利用できます。Rustへの移植を基にした描画ツール「Ondine」も紹介されています。
