2026/10/18 0:55
ペレ - テーマ化可能な SVG としてマーメイド図
RSS: https://news.ycombinator.com/rss
要約▶
日本語訳：
ルール
- 元の意味を正確に保持する（追加も省略もない）。
- ドキュメントの構造（見出し、箇条書きなど）を維持する。
- 技術用語を正確に扱う（API、LLM、zero-trust は自然な日本語の対訳がある場合を除きそのまま残す）。
- トーンと確信度を保つ。
- まとめ、説明、改変を行わず、翻訳のみを行う。
出力形式
日本語訳：
（ここに日本語訳を書く）
訳すべきテキスト：
（必要であれば；なければ元の文章を繰り返す）: 正確性や明瞭さのためには改善は不要だが、 desired な場合は名前の由来に簡潔に触れることで若干の文脈を追加できる。
本文
Pele: 超高速な Mermaid レンダラー
動作の仕組み
Pele は Mermaid 構文を記述したコードを受け取り、それを SVG 形式へレンダリングします。処理の流れは以下の通りです。
- フローチャート判定ロジック
- ユーザーが入力したテキストに対して「フローチャートか？」という質問を行います。
- **「はい」**の場合：Pele が SVG に変換し、最終的に SVG 出力へ進む。
- **「いいえ」**の場合：Mermaid 構文をそのまま処理し、SVG 出力へ進みます。
- CSS によるカスタマイズ
- 色やフォントは 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 か？
Pele は既存の Mermaid.js に比べて圧倒的なパフォーマンスと軽量さを備えています。
- サイズ・速度の比較
- 依存関係がゼロです。
- Mermaid.js より約 6 倍小さく、最速では 500 倍以上高速です。
- Mermaid 12.1.0 に搭載されているすべての図形種を完全にサポートしています。
| 機能 | Pele | Mermaid.js |
|---|---|---|
| バンドルサイズ（gzip） | 230 kB | 1.6 MB |
| レンダリング時間 | 0.05–0.3 ms | 6–82 ms |
| 直接依存関係数 | 0 | 23 |
| 小型画面での動作 | レイアウトを適応させる | 図形自体をスケールする |
アプリに Pele を追加する方法
JavaScript API を使用して、アプリケーションに簡単に Pele を統合できます。
メソッドに Mermaid 構文を渡します。render()- 返された SVG を HTML 要素としてページ内に挿入します。
import { render } from 'pele'; const { svg } = render(`flowchart LR A[Mermaid text] --> B[SVG]`); document.querySelector('#diagram').innerHTML = svg;
実用例と特徴
Pele を活用できる主なシナリオは以下の通りです。
- サポートされている 全ての図形種を閲覧・表示できます。
- アプリ内で動的に図形をレンダリング可能です。
- CSS 変数を駆使して、独自の色調やフォントを設定できます。
- Mermaid との 構文・レイアウト・機能の違いを比較検討できます。
Pele の使用状況
- 開発背景: オープンソースプロジェクトとして公開されており、Obsidian などでダイアグラムを高速にレンダリングし、ユーザーが設定したテーマに合わせて表示させることを目的としています。
- 命名の由来: 名称は、火山と火の女神**「ペレ」**にちなんで付けられています。