概要

Peleは Mermaid記法 をSVGに変換するツール。 CSS変数 でテーマや色彩を柔軟にカスタマイズ可能。 npmパッケージ として簡単に導入・利用できる。 描画速度 やバンドルサイズも他ライブラリと比較して優秀。 アプリ組み込み手順とサンプルコードも提供。

PeleによるMermaid記法のSVG変換

• Peleは Mermaid記法 をSVGへ変換するJavaScriptライブラリ。
• flowchart TD や flowchart LR などのMermaid構文をサポート。
• Mermaid記法例:

  • flowchart TD
      A[Mermaid text] --> B{Flowchart?}
      B -- Yes --> C[Pele]
      B -- No --> D[Mermaid]
      C --> E([SVG])
      D --> E
    

• Peleを使えば SVG出力 が即座に得られる。
• 小画面対応 や レイアウト調整 も自動で処理。

テーマ・カラーカスタマイズ

• Peleは CSS変数 を使い配色やフォントを柔軟に設定可能。
• 色やテーマの例:

  • .pele {
      --pele-bg: #fffcf0;
      --pele-fg: #100f0f;
      --pele-muted: #6f6e69;
      --pele-line: #100f0f;
      --pele-surface: #f2f0e5;
      --pele-surface-alt: #e6e4d9;
      --pele-border: #cecdc3;
    }
    

• 変更は 再描画不要 で即時反映。

バンドルサイズ・パフォーマンス比較

• Pele: gzip圧縮230kB、 描画速度0.05–0.3ms。
• Mermaid.js: 1.6MB、 6–82ms。
• 依存パッケージ数 もPeleは0個で軽量。

Pele導入・利用方法

• npmコマンド で簡単インストール:

  • npm install pele
    

• Mermaid記法を render()関数 に渡してSVGを取得:

  • import { render } from 'pele';
    const { svg } = render(`flowchart LR A[Mermaid text] --> B[SVG]`);
    document.querySelector('#diagram').innerHTML = svg;
    

• SVG要素 を任意のDOMに挿入可能。

まとめ

• Peleは 高速・軽量 なMermaid→SVG変換ライブラリ。
• カスタマイズ性 や 拡張性 も高い。
• アプリへの組み込み も容易。