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

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

## 機能紹介

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

### 主な特徴

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

## 使い方

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

## 全画面モードの操作

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

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

::: warning 説明

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

<div align="center">
  <img src="/assets/mermaid-preview.png" alt="Mermaid Diagram Rendering" style="max-width: 100%; border-radius: 8px;"/>
</div>