Peleとは？MermaidをSVGにするOSSの仕組み・Mermaid.jsとの違い・使い方

Peleは、文章で書いた図の指示を、きれいな図の画像に変えるソフトです。だれでも無料で使える形（オープンソース）で公開されました。メモアプリ「Obsidian」の作者kepanoさんが作り、速さと小ささで注目されています。ふだんは画面の裏側で働く部品なので、多くの人は名前を目にするだけの存在です。

Peleをひとことで言うと？

Peleは、文章で書いた図の指示（Mermaid記法）を、画面に表示できる図（SVG）に変えるための小さな部品です。

※Mermaid（マーメイド）記法とは: 「AからBへ進む」のように、文字を書くだけでフローチャートなどの図を描ける書き方のルールです。
※SVGとは: 拡大しても粗くならない図のデータ形式です。
※ライブラリとは: 別のアプリやサイトに組み込んで使う「部品」のことです。
※オープンソースとは: 設計図が公開されていて、だれでも使ったり改良したりできるソフトのことです。

たとえるなら、楽譜と演奏者の関係です。Mermaid記法は「楽譜」で、その楽譜を読んで図に仕上える部分が「演奏者」にあたります。これまでの定番の演奏者は「Mermaid.js」という部品でした。Peleは、同じ楽譜を読める新しい演奏者です。

ただし、演奏の中身まで同じではありません。GitHubの説明によると、Peleは同じ書き方（Mermaid 12.1.0の構文）を読みます。そのうえで、レイアウト（図の配置の決め方）と見た目は独自のものを使います。

これまでと何が変わるのか

エンジニアでない人にも関係がありそうな順に、3つ挙げます。

ふだん使うアプリで、図の表示が軽く速くなる可能性があります。 描く部分が小さく速い部品に替われば、図の多いメモや資料の表示が軽くなることが期待できます。
明るい画面と暗い画面で、図の色を切り替えやすくなります。 公式サイトによると、色を変えても図を描き直す必要がありません。
スマホの小さな画面でも、図が読みやすくなる可能性があります。 公式サイトの比較表では、Peleは画面に合わせて配置を調整し、Mermaid.jsは図を縮小して収めると説明されています。

どれも「可能性」です。実際にどのアプリで、どの程度変わるかは、組み込む側しだいです。

Peleとは？だれが作った何なのか

Peleの作者は、kepano（ケパノ）さんです。GIGAZINEの記事によると、Obsidianの開発元であるDynalistのCEOで、ObsidianにMermaidを組み込むことにも力を入れてきた人物です。

名前の由来も紹介されています。kepanoさんの投稿によると、火山と火の女神にちなんだ名前で、発音は[ˈpɛlɛ]です。GitHubの説明文には「火山から逃げるより速く描く」という趣旨の言葉もあります。

ChatGPTのようなAIと比べると、役割がまったく違います。ChatGPTは質問に答えたり文章を作ったりしますが、Peleは決まった書き方の文章を図に変えるだけです。考えたり会話したりはしません。資料にも、AIとしての機能は出てきません。

公式サイトは、Peleを「軽量なオープンソースのライブラリ」と紹介しています。ライセンスはMITです。商用利用を含め、条件つきで自由に使える、広く使われている種類のライセンスです（GitHub）。

なぜいま話題になっているの？

きっかけは、2026年10月17日のkepanoさん自身の投稿です。GIGAZINEが紹介した内容では、次のように述べています。

Mermaid.jsより100〜500倍速い
描画部品のサイズが6分の1
ほかの部品に頼らない
見た目を変えやすい
画面の幅に合わせて表示が変わる

さらに、Peleは次のバージョンのObsidianで新しい描画部品になる、とも書かれています。Obsidianはメモアプリで、図を書く機能もあります。つまり、ふだんそのアプリを使う人の画面の裏側が入れ替わる、という話です。

Hacker NewsやGitHubでも取り上げられ、開発者のあいだで広がりました。

「速いだけなら使わない」という声と、作者の答え

GIGAZINEによると、「元のMermaidより速いものを作っただけなら使いたくない」という趣旨の投稿もありました。kepanoさんは、作った動機は速さよりも安全面への問題意識だと答えています。

その投稿で、kepanoさんは次のように述べています。

Mermaid 12.1には3つ目のレイアウトエンジンが入った。
安全面の実績に疑問がある（脆弱性の公開情報を参照するよう促している）。
Obsidian 1.13では、危険かもしれない図に備えて切り替えスイッチと警告を加えた。

これらはkepanoさん個人の主張で、当サイトが裏づけたものではありません。Mermaid側の反応や説明は、今回の資料の範囲では確認できません。

Peleにはどんな特徴があるの？

1. 図がすぐに出る

できることは、図の表示にかかる時間を短くすることです。公式サイトの比較表では、1回の描画にPeleが0.05〜0.3ミリ秒、Mermaid.jsが6〜82ミリ秒とされています。0.3ミリ秒は、まばたき1回の千分の1ほどの時間です。

GIGAZINEの記事では、公式のPlaygroundで比較したところ、Mermaidが59ミリ秒、Peleが0.3ミリ秒だったと報告されています。

仕組みの面では、READMEがPeleを「同期的」と説明しています。これは、待たずにその場で結果が返ってくる作りという意味です。

2. 部品が小さく、他に頼らない

部品そのものが小さいので、アプリやサイトに入れても重くなりにくいと期待できます。公式サイトの表では、圧縮後のサイズがPeleは230 kB、Mermaid.jsは1.6 MBです。直接頼る他の部品は、Peleがゼロ、Mermaid.jsが23です。

項目	Pele	Mermaid.js
部品のサイズ（圧縮後）	230 kB	1.6 MB
描画時間	0.05〜0.3ミリ秒	6〜82ミリ秒
直接頼る部品の数	0	23
小さい画面	配置を調整	図を縮小
色の設定	CSS変数	テーマ設定

この表はPele側が公開したもので、第三者の検証結果ではありません。なお、kepanoさんの投稿は「6分の1」、表の数字は230 kB対1.6 MBで、表現が少し異なります。

必要な図の種類だけを読み込んで、さらに小さくする方法もあります（README）。

3. 色や文字を、あとから簡単に変えられる

できることは、背景色や線の色、文字の種類を設定ひとつで変えることです。READMEと公式サイトによると、「CSS変数」という仕組みを使い、色の変更は図を描き直さずに反映されます。公式サイトにはLight（明るい）とDark（暗い）の例もあります。

※CSS変数とは: サイトの見た目を決める設定に、名前をつけて入れておく箱のようなものです。箱の中身を替えると、見た目が一度に変わります。

4. 多くの種類の図に対応している

Peleは、Mermaid 12.1.0に組み込まれたすべての図の種類に対応するとされています（README）。GIGAZINEの一覧には、次のようなものがあります。

フローチャート
シーケンス図
クラス図
ER図
ガントチャート
円グラフ
マインドマップ
カンバンボード

この一覧には、名前に「beta」が付く、試験的な図も多く含まれています。

5. 安全のための備えがある

できることは、信頼できない人が書いた図を表示するときのリスクを減らすことです。READMEによると、Peleは次のような処理をします。

図の中の文字をエスケープ（そのまま実行されないよう無害化）する
リンクやスタイルを絞り込む
入力と出力の大きさに上限を設ける

詳しい扱い方は、公式のSecurityのページにまとめられています。

自分に関係ある？向いている人・向いていない人

結論から言うと、エンジニアでない人が直接インストールして使うものではありません。Peleは、アプリやサイトを作る人が内部に組み込む部品です。

関係が出てくるのは、次のような場面です。

Obsidianなど、図を表示するアプリを使っている
社内の文書ツールが、将来この部品を採用する
開発チームが「図の表示が重い」と困っている

Obsidianについては、作者が「次のバージョンで新しい描画部品になる」と述べています。ただし、いつ公開されるかは資料に書かれていません。

向いている人

図をよく表示するアプリやサイトを作っている開発者
暗い画面への切り替えなど、見た目の調整を細かくしたい人
スマホ画面での見やすさを重視する人

向いていない人

コードを書かずに図を作りたい人。まずはPlaygroundで試すか、使っているアプリの対応を待つのが現実的です。
Mermaid.jsと見た目をまったく同じにしたい人。Peleは独自のレイアウトを使うためです。

どうやって触ればいい？（使い方）

ここからは実際に触ってみたい人向けです。読み飛ばしても全体像は分かります。

コードを書かずに試すなら、公式のPlaygroundがいちばん手軽です。左側に図の指示を書くと、右側に図が出ます。「Compare」を押すとMermaidとの描画時間も並べて見られると、GIGAZINEが紹介しています。

自分のプロジェクトに入れる場合、READMEでは、まず次のコマンドで導入します。

npm install pele

図をSVGにして表示する基本の形は、次のとおりです。

import { render } from 'pele';

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

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

ブラウザ上では、mount() を使う方法もあります。READMEによると、表示先の要素に描き、CSSから文字の種類を読み取り、幅に合わせて配置を調整します。CDNから読み込む場合は、GIGAZINEの記事に https://cdn.jsdelivr.net/npm/pele@1/dist/pele.global.js の例があります。

色や文字は、CSS変数で設定します。READMEの例の一部です。

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-accent: #205ea6;
  --pele-font: sans-serif;
}

変数の全一覧はTheming、細かい設定やエラー処理はAPIのページにあります。開発して試す場合は、READMEによるとNode 22以上が必要です。

気をつけることと、まだ分からないことは？

分かっていること

ライセンスはMITです。
ライブラリは無料で入手できます（GIGAZINEは「無料で利用・改変可能」と説明しています）。
対応する構文はMermaid 12.1.0です。READMEは、パーサー（文章を読み取る部分）をMermaidのテスト仕様と、ランダムな入力を使った比較テストで確かめていると説明しています。

注意したい点

速さやサイズの数字は、公式サイトと作者の投稿によるものです。条件が違えば結果も変わりえます。第三者による検証は、今回の資料では確認できません。
図の見た目はMermaid.jsとは違います。既存の図の見え方が変わる可能性があります。
12.1.0より新しいMermaidの構文にどう対応するかは、資料からは分かりません。
安全面の機能は説明されていますが、外部の専門家による検証や監査の情報は、資料の範囲では確認できません。
有料プランやサポートの有無は、現時点では公表されていません。
Obsidianの次のバージョンの公開時期は、資料に書かれていません。

同じ名前の別のものに注意

「Pele」で検索すると、サッカー選手のペレ氏に関する記事も多く出てきます。今回の話題とは別のものです。

まとめ

Peleは、文字で書いた図の指示を、きれいな図（SVG）に変える軽量なオープンソースの部品です。
Obsidianの作者kepanoさんが公開しました。同アプリの次のバージョンで使う予定だと、本人が述べています。
公式の数字では、Mermaid.jsより描画が速く、部品も小さいとされています。ただし第三者の検証は未確認です。
色や文字の設定を後から変えやすく、小さい画面にも合わせて表示を調整します。
一般の人が直接使うものではなく、普段使うアプリの裏側に入っていく部品です。まずはPlaygroundで動きを見るのがおすすめです。

よくある質問

プログラミングができなくてもPeleは使えますか？

Peleは開発者がアプリやサイトに組み込む部品なので、プログラミングなしで直接使うものではありません。ただし公式サイトには、書いた内容がその場で図になる「Playground」があり、誰でも動きを試せます。

Peleは無料で使えますか？

資料によるとMITライセンスのオープンソースで、無料で利用・改変できます。ライブラリの入手に料金がかかるという記述は資料にありません。有料プランの有無も、資料の範囲では確認できません。

PeleはChatGPTのようなAIですか？

違います。Peleは、決まった書き方の文章を図に変換する部品です。質問に答えたり文章を作ったりするAIではありません。資料にもAIとしての機能は書かれていません。

Mermaid（Mermaid.js）の代わりになるものですか？

Mermaid 12.1.0に組み込まれた図の種類にはすべて対応するとされています。ただしレイアウトと見た目はPele独自です。そのため、同じ入力でも図の見た目はMermaid.jsと少し違う可能性があります。

Obsidianを使っていると、Peleの影響を受けますか？

作者のkepano氏は、Peleが次のバージョンのObsidianの新しい描画部品になると投稿しています。ただし、公開時期などの詳細は資料に書かれておらず、現時点では確認できません。