Pele 調査レポート

開発元: Obsidian
カテゴリ: 📄 ドキュメント生成/管理
公式サイト Docs GitHub Markdown

MermaidダイアグラムをSVGに高速にレンダリングする軽量なオープンソースライブラリ

総合評価
85点
基準点70点からの評価
オープンソース
OSS
無料プラン
あり
最低価格
無料
対象ユーザー
開発者ドキュメント作成者
更新頻度
高
🆕 最新情報: TeXソースのラベルに対応するmathレンダーオプション追加

📋 評価の詳細

👍 加点項目

  • +10 Mermaid.jsと比較してファイルサイズが小さく非常に高速
  • +5 依存関係がなく、導入が容易
  • +3 CSS変数による柔軟なテーマカスタマイズ

👎 減点項目

  • -3 独自のレイアウトロジックを持つためMermaidと完全な互換性はない場合がある
総評: 高速かつ軽量にMermaidダイアグラムを描画したい場合に最適な選択肢

Pele 調査レポート

1. 基本情報

  • ツール名: Pele
  • ツールの読み方: ペレ
  • 開発元: Obsidian
  • 公式サイト: https://pele.run/
  • 関連リンク:
  • カテゴリ: ドキュメント生成/管理
  • 概要: PeleはMermaidダイアグラムをSVGにレンダリングするための軽量なオープンソースライブラリです。Mermaid.jsよりも大幅に高速で依存関係がありません。

2. 目的と主な利用シーン

  • 解決する課題: 既存のMermaid.jsは機能が豊富ですが、バンドルサイズが大きく、レンダリングに時間がかかるという課題がありました。Peleはこれを軽量化・高速化します。
  • 想定利用者: Web開発者、Markdownパーサーの開発者、ドキュメント生成ツールの開発者
  • 利用シーン:
    • Webアプリケーション内でのMermaidダイアグラムの動的生成
    • Markdownエディタ（Obsidianなど）でのリアルタイムプレビュー
    • 静的サイトジェネレーターでのビルド時のSVG生成

3. 主要機能

  • Mermaid構文のサポート: Mermaid 12.1.0に組み込まれているすべてのダイアグラムタイプ（flowchart、sequence、classなど）をサポート。
  • 超高速レンダリング: 0.05～0.3ミリ秒での高速なレンダリングを実現。
  • 軽量なバンドルサイズ: gzip圧縮時で約230kBと、Mermaid.js（1.6MB）に比べて6倍軽量。
  • ゼロ依存: 外部の依存ライブラリなしで動作。
  • CSS変数によるテーマ設定: CSS変数を変更するだけで、再レンダリングなしに色やフォントを動的に変更可能。
  • セキュリティ機能: ダイアグラムテキストのエスケープ、リンクやスタイルのフィルタリング、ソースと出力サイズの制限など。
  • 数式のサポート: $$...$$ ラベルのレンダリングオプションを提供（HTML/MathML等を返すリゾルバをホスト側で用意）。

4. 動作原理・システム構成

  • アーキテクチャ: クライアント・サーバー両対応のライブラリ（ブラウザおよびNode.js環境）
  • 主要コンポーネントとデータフロー:
    • 入力としてMermaid構文のテキストを受け取り、独自のパーサーでAST（抽象構文木）を構築します。
    • ASTからSVG要素を生成し、文字列として出力します。
    • ブラウザ環境では mount() を使用してDOM要素に直接レンダリングし、コンテナの幅にレイアウトを適応させます。
  • 特筆すべき要素技術:
    • 差分ファジング（Differential Fuzzing）によるMermaid仕様との互換性テスト。
    • レンダリングプロセスは同期的であり、ランタイムのオーバーヘッドを最小限に抑えています。

5. 開始手順・セットアップ

  • 前提条件:
    • Node.js環境またはモダンブラウザ

  • インストール/導入:

    npm install pele

    または、pnpm, yarn, bunでインストール可能。CDN経由での利用も可能です。

  • 初期設定:
    • 特別な初期設定は不要です。
  • クイックスタート: 
    import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

6. 特徴・強み (Pros)

  • 圧倒的なパフォーマンス（Mermaid.js比で最大500倍高速）
  • バンドルサイズの小ささ（Mermaid.jsの約1/6）
  • 依存関係がゼロであるため、セキュリティリスクや競合が少ない
  • CSS変数による柔軟かつ高速なテーマ切り替え
  • ブラウザとNode.jsの両方で動作する汎用性

7. 弱み・注意点 (Cons)

  • Mermaid.js独自の機能拡張やプラグインには非対応の可能性がある
  • レイアウトエンジンが独自のため、複雑な図の場合、Mermaid.jsと視覚的な結果が完全に一致しない場合がある
  • 数式描画機能自体は内包しておらず、ホスト側でのリゾルバ実装が必要

8. 料金プラン

プラン名 料金 主な特徴
無料プラン 無料 オープンソース (MITライセンス)
  • 課金体系: なし
  • 無料トライアル: なし

9. 導入実績・事例

  • 導入企業: Obsidian
  • 導入事例: Obsidianのノートアプリ内でのMermaidダイアグラムの高速レンダリングに採用されています。
  • 対象業界: ソフトウェア開発、ドキュメント管理ツール

10. サポート体制

  • ドキュメント: 公式サイト（https://pele.run/）にてAPIリファレンス、Examples、Theming等のドキュメントが提供されています。
  • コミュニティ: GitHub上のIssueやDiscussionsが主要なコミュニティの場となっています。
  • 公式サポート: オープンソースプロジェクトのため、商用サポートは提供されていません。

11. エコシステムと連携

11.1 API・外部サービス連携

  • API: JavaScript/TypeScript APIとして提供されており、WebアプリケーションやNode.jsツールに容易に組み込めます。
  • 外部サービス連携: Obsidianなど、Markdownを利用する様々なツールに組み込み可能です。

11.2 技術スタックとの相性

技術スタック 相性 メリット・推奨理由 懸念点・注意点
モダンJSフレームワーク (React/Vue) ◎ 軽量で同期的に動作するため、コンポーネント化が容易 サーバーサイドレンダリング時のフォント計算の扱いなど
静的サイトジェネレータ ◎ Node.js上で高速にSVGをビルド可能 特になし

12. セキュリティとコンプライアンス

  • 認証: なし（ライブラリのため）
  • データ管理: データはすべてローカル（クライアントまたは組み込みサーバー）で処理され、外部へのデータ送信はありません。
  • 準拠規格: 特になし（オープンソースライブラリとしてMITライセンスに準拠）。XSS対策としてダイアグラムテキストのエスケープ等の処理が含まれています。

13. 操作性 (UI/UX) と学習コスト

  • UI/UX: 開発者向けのライブラリであるため、APIの設計がシンプルで直感的です。
  • 学習コスト: 既存のMermaidユーザーであれば、記法はそのまま使えるため、導入の学習コストは非常に低いです。APIもシンプルです。

14. ベストプラクティス

  • 効果的な活用法 (Modern Practices):
    • アプリケーションのバンドルサイズを抑えるため、必要なダイアグラムタイプのみをオンデマンドでロードする（import { renderAsync } from 'pele/lazy';）。
    • テーマ切り替えはCSS変数の操作で行い、無駄な再レンダリングを避ける。
  • 陥りやすい罠 (Antipatterns):
    • 古いMermaidの特殊な独自記法に依存した図をそのまま流用し、レイアウトが崩れることに気づかないこと。

15. ユーザーの声（レビュー分析）

  • 調査対象: GitHub
  • 総合評価: GitHub Stars 2.8k
  • ポジティブな評価:
    • その驚異的なレンダリング速度と軽量さが多くの開発者から高く評価されています。
    • 依存関係がないことの利便性が指摘されています。
  • ネガティブな評価 / 改善要望:
    • Mermaid.jsのすべての機能・拡張に完全対応しているわけではないことへの指摘。
  • 特徴的なユースケース:
    • 動的かつ大量のダイアグラムを表示するダッシュボードやドキュメントサイト。

16. 直近半年のアップデート情報

  • 2026-10-20: 1.8.0 - $$...$$ラベルのためのmathレンダーオプションが追加されました。ホスト側でSVGやMathML/HTMLを返すリゾルバを指定可能。
  • 2026-10-19: 1.7.0 - render()結果やエラー等にmermaidType（例: flowchart-v2）が含まれるようになりました。
  • 2026-10-17: 1.6.0 - mount()がダイアグラムコンテナ内にパース・レンダリングエラーを表示するようになりました。
  • 2026-10-15: 1.5.2 - バグ修正。
  • 2026-10-15: 1.5.1 - 改善。
  • 2026-10-06: 1.0.3 - require.resolve()で見つからない問題の修正。
  • 2026-10-06: 1.0.1 - Initial release。

(出典: GitHub Releases)

17. 類似ツールとの比較

17.1 機能比較表 (星取表)

機能カテゴリ 機能項目 本ツール (Pele) Mermaid.js PlantUML
基本機能 レンダリング速度 ◎
0.05-0.3ms、非常に高速		 ◯
6-82ms		 △
Java環境が必要
基本機能 バンドルサイズ ◎
230kB (gzip)		 △
1.6MB		 -
基本機能 依存関係 ◎
0		 △
23		 -
描画 ダイアグラム種類 ◯
Mermaid互換		 ◎
標準＋拡張プラグイン		 ◎
非常に豊富
非機能要件 テーマカスタマイズ ◎
CSS変数による動的変更		 ◯
テーマ設定ファイル等		 ◯

17.2 詳細比較

ツール名 特徴 強み 弱み 選択肢となるケース
本ツール (Pele) 軽量・高速なMermaidレンダラー パフォーマンス、バンドルサイズ、ゼロ依存 完全な後方互換性や一部拡張機能の欠如 高速な描画やファイルサイズ削減が求められるWebアプリ
Mermaid.js デファクトスタンダードの図解ツール 豊富な機能、広いコミュニティ サイズが大きい、レンダリングが重い 標準的な機能が全て必要な場合
PlantUML 古くからある強力な作図ツール 表現力の高さ、複雑な図の作成 Javaへの依存、セットアップの手間 既存資産がある場合、より高度なUMLが必要な場合

18. 総評

  • 総合的な評価: Peleは、Mermaid.jsが抱えていたパフォーマンスとバンドルサイズの課題を見事に解決した、非常に優秀なライブラリです。Webフロントエンド開発において、依存関係を減らしつつリッチな図解機能を提供できる点は大きな魅力です。
  • 推奨されるチームやプロジェクト: Webアプリケーション、ドキュメントツール、静的サイトジェネレーターを開発しているチーム。特にパフォーマンスを重視するプロジェクトに最適です。
  • 選択時のポイント: Mermaid.jsの完全な代替として機能しますが、レイアウトエンジンが異なるため、移行時は既存の図が意図通りに描画されるかどうかのテストを行うことが推奨されます。