Mermaid ダイアグラムレンダリング
Mermaid コードを図表として自動レンダリングします。
機能紹介
Gemini が Mermaid コードブロック（フローチャート、シーケンス図、ガントチャートなど）を出力すると、Voyager はそれを自動的に検出し、インタラクティブな図表として描画します。
主な特徴
- 自動検出:
graph、flowchart、sequenceDiagram、gantt、pie、classDiagramなど、主要な Mermaid 図表タイプをすべてサポートしています。 - ワンクリック切り替え: ボタン一つで、レンダリングされた図表と元のソースコードを自由に切り替えられます。
- 全画面表示: 図表をクリックすると全画面モードになり、マウスホイールでのズームやドラッグによる移動が可能です。
- ダークモード: ページのテーマに自動的に適応します。
使い方
- Gemini に Mermaid の図表コードを生成させます。
- コードブロックが自動的にレンダリング後の図表に置き換わります。
- </> Code ボタンをクリックすると、元のコードを確認できます。
- 📊 Diagram ボタンをクリックすると、図表ビューに戻ります。
- 図表エリアをクリックすると、全画面表示になります。
全画面モードの操作
- ホイール: 図表のズーム
- ドラッグ: 図表の移動
- +/-: ツールバーでのズーム
- ⊙: ビューのリセット
- ✕ / ESC: 全画面を閉じる
