obsidianmd/pele

これは何？

主な機能

• 01Mermaid 12.1.0に組み込まれたすべての図表タイプをSVGに変換します。
• 02実行時依存がなく、同期的にレンダリングします。
• 03CSS変数で色とフォントを設定でき、テーマ変更にも追従します。
• 04コンテナ幅に合わせてレイアウトを調整するブラウザー向けマウントヘルパーを提供します。
• 05個別の図表タイプを必要に応じて読み込み、バンドルサイズを削減できます。
• 06信頼できない入力に備えてテキストをエスケープし、リンクとスタイルをフィルタリングします。

ユースケース

• 重い依存関係を追加せずに、WebページやドキュメントサイトでMermaidの図表をレンダリングする。
• CSSを使って、サイトのライトテーマやダークテーマに追従する図表を埋め込む。
• サーバーやビルドツールでMermaidテキストからSVG図表を生成する。
• ページで使う図表タイプだけを読み込み、JavaScriptのペイロードを削減する。

クイックスタート

1. 1

   パッケージをインストールする

   npm install pele
2. 2

   renderをインポートし、MermaidテキストをSVGに変換する

使う前に知っておきたいこと

• !READMEにライセンスの記載はありません。メタデータにはNOASSERTIONと表示されていますが、READMEではMITに言及しています。
• !Peleは独自のレイアウトとビジュアルスタイルでMermaid 12.1.0の構文を対象としているため、出力はMermaidと異なる場合があります。

トピック

よくある質問

pele とは？

実行時依存なしでMermaidの図表テキストをSVGに変換する、小型の同期レンダラー。 PeleはMermaidの図表ソースをSVGに変換します。Mermaid 12.1.0の構文を対象とし、同バージョンに組み込まれたすべての図表タイプに対応しています。レイアウトとビジュアルスタイルには、Mermaid独自のものではなくPele独自のものを使用します。

pele は無料で使えますか？ライセンスは？

pele は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

pele は今もメンテナンスされていますか？

活発にメンテナンス中。pele の最終コミットは 2026年10月18日 です。

pele は何に使えますか？

重い依存関係を追加せずに、WebページやドキュメントサイトでMermaidの図表をレンダリングする。 CSSを使って、サイトのライトテーマやダークテーマに追従する図表を埋め込む。 サーバーやビルドツールでMermaidテキストからSVG図表を生成する。 ページで使う図表タイプだけを読み込み、JavaScriptのペイロードを削減する。

pele のインストール方法は？

パッケージをインストールする: npm install pele renderをインポートし、MermaidテキストをSVGに変換する

pele はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/obsidianmd/pele