プログラミング
Pele – テーマ設定可能なSVGとしてのMermaidダイアグラム
Pele – Mermaid diagrams as themeable SVG (pele.run)
要約
Peleは、MermaidダイアグラムをCSS変数でテーマ設定されたSVGにレンダリングする軽量なオープンソースライブラリです。Mermaidシンタックスを記述するだけで、PeleがそれをSVGに変換します。CSS変数を使用することで、再レンダリングなしに色やフォントを簡単に変更でき、バンドルサイズもMermaid.jsと比較して大幅に削減されます。
全文翻訳
Peleは、軽量なオープンソースライブラリで、MermaidダイアグラムをSVGにレンダリングし、CSS変数でテーマ設定が可能です。
［画像］
Mermaid記法を記述すれば、PeleがそれをSVGにレンダリングします。以下の例を編集してみてください。
Mermaid
1flowchart TD2 A[Mermaid text] --> B{Flowchart?}3 B -- Yes --> C[Pele]4 B -- No --> D[Mermaid]5 C --> E([SVG])6 D --> E
PelePlaygroundで開く
YesNoMermaid textFlowchart?PeleMermaidSVG
CSS変数を使用して色やフォントを設定できます。色の変更は再レンダリングなしで適用されます。
CSS
1.pele {2 --pele-bg: #fffcf0;3 --pele-fg: #100f0f;4 --pele-muted: #6f6e69;5 --pele-line: #100f0f;6 --pele-surface: #f2f0e5;7 --pele-surface-alt: #e6e4d9;8 --pele-border: #cecdc3;9}
Pele
ThemesVariablesLightDark
| Pele | Mermaid.js | |
|---|---|---|
| バンドルサイズ (gzip) | 230 kB | 1.6 MB |
| レンダリング時間 | 0.05–0.3 ms | 6–82 ms |
| 直接依存関係 | 0 | 23 |
| 小さな画面 | レイアウトを調整 | ダイアグラムをスケーリング |
| テーマ設定 | CSS変数 | テーマ設定ファイル |
APIを使用してPeleをアプリに追加できます。
1npm install pele
1pnpm add pele
1yarn add pele
1bun add pele
render()にMermaid記法を渡し、返されたSVGをページに挿入します。
1import { render } from 'pele';23const { svg } = render(`flowchart LR4 A[Mermaid text] --> B[SVG]`);56document.querySelector('#diagram').innerHTML = svg;