Mermaid図をSVG変換するOSSライブラリ「Pele」
原題: Pele – Mermaid diagrams as themeable SVG
なぜ重要か
Mermaid.jsの重さを嫌い導入を見送ってきた開発者にとって、軽量な代替選択肢が現れたことは実用上の意味が大きい。
オープンソースライブラリ「Pele」が公開された。MermaidのダイアグラムをSVGとして描画し、CSSの変数でテーマを制御できる。バンドルサイズはgzip圧縮で230kB（Mermaid.jsの1.6MBと比較）、描画速度は0.05〜0.3msで、Mermaid.jsの6〜82msに対して最大500倍高速と公式は述べている。依存パッケージはゼロ。MITライセースで提供される。
「Pele」はObsidianのためのMermaidダイアグラム描画用として開発されたライブラリで、現在はMITライセンスの下でオープンソースとして公開されている。名前は火山と火の女神ペレに由来する。
Mermaid 12.1.0に組み込まれたすべてのダイアグラムタイプをサポートしており、flowchart・sequence・ganttなど幅広い図種に対応する。
最大の特徴は、描画結果がCSSカスタムプロパティ（変数）でテーマ制御できる点だ。`--pele-bg`や`--pele-fg`などの変数を変更するだけで、SVGを再レンダリングすることなく色やフォントを即座に切り替えられる。ダークモードへの対応も容易で、Obsidianのようなテーマ可変なアプリケーションと相性がよい。
性能面では、Mermaid.jsとの比較数値を公式サイトが明示している。バンドルサイズはgzip後230kB対1.6MBで約7分の1、描画時間は最大500倍の差があるとしている。直接依存パッケージは0で、Mermaid.jsの23パッケージと対照的だ。小さな画面ではレイアウトを自動調整する機能も持つ。
導入方法はシンプルで、npm/pnpm/yarn/bunでインストール後、`render()`関数にMermaidの構文文字列を渡すとSVG文字列が返ってくる。あとはDOMに挿入するだけで動作する。APIリファレンス・テーマドキュメント・Mermaid.jsとの互換性比較ページも整備されており、Playgroundも公式サイト上で提供されている。