Mermaid ダイアグラムレンダリング

Mermaid コードを図表として自動レンダリングします。

機能紹介

Gemini™ が Mermaid コードブロック（フローチャート、シーケンス図、ガントチャートなど）を出力すると、Voyager はそれを自動的に検出し、インタラクティブな図表として描画します。

主な特徴

• 自動検出: graph、flowchart、sequenceDiagram、gantt、pie、classDiagram など、主要な Mermaid 図表タイプをすべてサポートしています。
• ワンクリック切り替え: ボタン一つで、レンダリングされた図表と元のソースコードを自由に切り替えられます。
• 全画面表示: 図表をクリックすると全画面モードになり、マウスホイールでのズームやドラッグによる移動が可能です。
• ダークモード: ページのテーマに自動的に適応します。

使い方

1. Gemini に Mermaid の図表コードを生成させます。
2. コードブロックが自動的にレンダリング後の図表に置き換わります。
3. </> Code ボタンをクリックすると、元のコードを確認できます。
4. 📊 Diagram ボタンをクリックすると、図表ビューに戻ります。
5. 図表エリアをクリックすると、全画面表示になります。

全画面モードの操作

• ホイール: 図表のズーム
• ドラッグ: 図表の移動
• +/-: ツールバーでのズーム
• ⊙: ビューのリセット
• ✕ / ESC: 全画面を閉じる

互換性とトラブルシューティング

説明

• Firefox の制限: 環境の制限により、Firefox では 9.2.2 バージョンを使用しており、Timeline や Sankey などの新機能は現在サポートされていません。
• 構文エラー: レンダリングの失敗は、通常 Gemini が生成したコードの構文エラーによるものです。現在 Bad Case を収集しており、今後のアップデートで一般的な生成エラーを自動修正するパッチを導入予定です。

Contributors

No contributors

Changelog

No recent changes