Pele
MermaidソースをPeleでSVGにレンダリングします。Peleは同期的なライブラリで、Puppeteerやmermaid-cli、MCPサーバーは不要です。このスキルのインターフェースはscripts/render.mjsです。
スキルルートはこのファイルが存在するディレクトリです。以下のパスはすべてそのディレクトリからの相対パスです。これはスキルがClaude Code、Hermes、またはOpenCodeにインストールされた後も変わりません。
使用タイミング
- ユーザーがMermaidダイアグラムをSVG、HTML、または画像ファイルとして出力したい場合
.mmdファイル、またはmermaidフェンスをレンダリングして確認したい場合- ユーザーが32種類の対応図表のいずれかを描画したい場合で、チャット内のフェンスではなくファイルとして出力したい場合。これには馴染みの薄い種類（Wardleyマップ、石川図、ベン図、スイムレーン、レーダーチャート、ツリーマップ、サンキー図、鉄道構文、ファイルツリー、Cynefin図、イベントモデル図）も含まれます。下記「図表タイプ」を参照。
使用しないとき：
- MermaidフェンスをGitHub、Obsidian、その他のビューアが自動レンダリングするMarkdownとして残したい場合
- 要求された成果物がMermaidでない場合（手描きのExcalidraw JSON、独自のアーキテクチャページ、スクリーンショットの注釈など）
- ユーザーがmermaid.jsの出力とピクセル単位で同一な出力を必要とする場合。Peleは独自のレイアウトを使用します。
これをMCPサーバーでラップしないでください。スクリプトの1回の呼び出しで全機能を実行します。
前提条件
- Node.js 20以上と、
PATHが通ったnpm - 依存関係のインストールはスキルルート（このファイルの隣にある
package.json）で行われ、ユーザーのプロジェクト内では行われません
node_modules/peleがない場合、スクリプトが自動的にnpm installを実行します。手動で実行することもできます：
npm install --no-fund --no-audit
完了：node scripts/render.mjs --checkが終了コード0で終了し、stderrのJSONに"ok": trueとpeleのバージョンが含まれます。
図表タイプ
選択する前に全リストを把握してください。Peleは32種類をレンダリングし、そのうち3分の1は、ユーザーが言う名前とは異なる -beta ヘッダーが必要です。
node scripts/render.mjs --types
これによりJSONが出力されます：type、正確な先頭行のheader、その用途、動作するexampleのパス。references/diagram-types.mdにも同じテーブル、失敗するヘッダー、タイプの選び方が記載されています。
- 最初に思い浮かんだタイプではなく、読者に必要なものを示すタイプを選んでください。ステップごとの所有者→
swimlane。1つの問題の原因→ishikawa。日付付きタスク→gantt。フォルダ構成→treeView。比例的なフロー→sankey。 - リクエストがどのタイプにも該当しない場合（自由形式のレイアウト、画像、リストにないチャートタイプなど）、その旨を伝え、無理にフローチャートに当てはめないでください。
- ユーザーがリストにない特定の図表タイプを指定した場合は、最初にその旨を伝えてから、最も近いサポートタイプを提案してください。黙って近似しないでください。
手順
--typesからタイプとその正確なヘッダーを選択します。-betaタイプ、または構文が確かでないタイプについては、まずexampleファイルを読んで構造をコピーしてください。- Mermaidソースを
.mmdファイルに書き込みます。マルチラインダイアグラムをシェル引数として渡さないでください。 - レンダリングします：
node scripts/render.mjs INPUT.mmd OUTPUT.svg
- stderrのJSONレシートを読み取ります。完了条件：終了コード0、
"ok": true、レシートのtypeが選択したタイプと一致し、出力ファイルが<svgで始まる。 "ok": falseの場合：unsupported-diagram：先頭行が既知のヘッダーではありません。suggest[0].headerがあればそれを使用し、なければ--typesから選択します。syntaxまたはsemantic：line/columnで示された位置のソースをsnippetを手がかりに修正し、タイプのexampleと比較してから再度レンダリングします。- mermaid-cli、ヘッドレスブラウザ、手書きSVGに切り替えないでください。
- 絶対パスの出力パスを報告します。ユーザーからマークアップを求められていない限り、SVGをチャットに貼り付けないでください。終了コードが0以外の場合は成功と主張しないでください。
ユーザーがブラウザで開けるファイルを必要とする場合は、--htmlまたは.htmlで終わる出力パスを使用します。HTMLはSVGをインライン化し、PeleのCSSカラー変数を設定します。
node scripts/render.mjs --html INPUT.mmd OUTPUT.html
レシート
成功時のstderr：
{"ok":true,"type":"flowchart","width":180,"height":80,"bytes":1200,"output":"/abs/OUTPUT.svg","html":false,"pele":"1.6.0"}
失敗時のstderr、終了コード1（Peleがインストールできない場合は終了コード2）：
{"ok":false,"code":"syntax","message":"...","type":"flowchart","line":2,"column":5,"snippet":"..."}
codeはsyntax、semantic、unsupported-diagram、limit、usage、install-failed、render-failedのいずれかです。messageをテキストとして表示します。これにはダイアグラムソースが含まれる場合があります。
unsupported-diagramレシートにはhintとsuggestも含まれます：
{"ok":false,"code":"unsupported-diagram","hint":"先頭行を以下のヘッダーに置き換えてください。多くのタイプには -beta サフィックスが必要です。","suggest":[{"type":"radar","header":"radar-beta","example":"/abs/examples/types/radar.mmd"}]}
フラグ
| フラグ | 用途 |
|---|---|
--check | Peleをロードし、バージョンを表示、レンダリングはしない |
--types | サポートするタイプ、ヘッダー、exampleのパスをJSONでstdoutに出力 |
--html | 生のSVGではなく、スタンドアロンHTMLとして出力 |
--fixed | 固定ピクセルサイズ。.svgファイルのデフォルト |
--responsive | SVGがコンテナに合わせて縮小可能。stdoutとHTMLのデフォルト |
--max-width <px> | Peleにレイアウトの適応を依頼。640px未満で広いLRフローチャートを縦方向に反転可能 |
--font-size <px> | ベースフォントサイズ |
--font <family> | ラベルフォント |
--id-prefix <str> | 同一ページに複数のSVGがある場合のユニークなプレフィックス |
stdoutはSVG（またはHTML）のままです。レシートは常にstderrの最後のJSON行です。
囲んでいるmermaidフェンスは除去されます。Mermaid自身のフロントマターは除去されません。
落とし穴
- ファイルSVGのデフォルトは
responsive: falseです。SVGが埋め込まれ、縮小される必要がある場合のみ--responsiveを渡してください。 - Nodeにはキャンバス計測機能がありません。ラベル幅はブラウザレンダリングと異なる場合があります。これは想定内です。
- ユーザーが狭いレイアウトを求めていない限り、
--max-widthを渡さないでください。方向が変わることがあります。 - ヘッダーは正確です。
radar、venn、wardley、swimlane、treeView、usecase、cynefin、railroad、agentflowはすべて-betaが必要です。architectureも-betaが必要です。fishboneというヘッダーはありません。代わりにishikawa-betaを使用してください。 - アイコン名（
fa:fa-user、cloud、database、disk、internet、server以外のアーキテクチャアイコン）は、エラーなしで空のスロットとしてレンダリングされます。このスクリプトはアイコンコールバックを提供しません。アイコンを削除するか、テキストに置き換えてください。 - ソースの上限は50,000文字です。出力の上限は4,000,000です。フローチャートのエッジ数は5,000が上限です。
- ユーザーのリポジトリでの
npm installはこのスクリプトを満たしません。パッケージはスキルルートにあります。 node_modulesが存在するがPeleのロードに失敗する場合、そのnode_modulesを削除し、スキルルートでnpm installを実行してください。- すでに開いているエージェントセッションは、セッション途中でインストールされたスキルを認識しません。これはローダーキャッシュの問題であり、インストール不良ではありません。
検証
スキルルートから：
npm run smoke
完了：終了コード0、stdoutのJSONに"ok": true、peleバージョン、"types": 32、すべてのカタログタイプを含むrenderedリスト、およびcode: "syntax"と0以外のlineを持つsyntaxErrorが含まれます。また、scripts/catalog.mjsがPele自身のタイプリストからずれていたり、ヘッダーがそのタイプとして検出されなくなった場合にもスモークテストは失敗します。examples/broken.mmdは常に失敗し続ける必要があります。スモークテストに合格しても、新しいダイアグラムが正しいとは限りません。新しいダイアグラムにはそれぞれ個別のレシートが必要です。