# Mermaid 다이어그램 렌더링

Mermaid 코드를 시각적 다이어그램으로 자동으로 렌더링합니다.

## 개요

Gemini™가 Mermaid 코드 블록(플로우차트, 시퀀스 다이어그램, 간트 차트 등)을 출력하면, Voyager는 이를 자동으로 감지하여 대화형 다이어그램으로 렌더링합니다.

### 주요 기능

- **자동 감지**: `graph`, `flowchart`, `sequenceDiagram`, `gantt`, `pie`, `classDiagram` 및 모든 주요 Mermaid 다이어그램 유형을 지원합니다.
- **보기 전환**: 클릭 한 번으로 렌더링된 다이어그램과 소스 코드 간을 전환할 수 있습니다.
- **전체 화면 모드**: 다이어그램을 클릭하여 확대/축소 및 이동이 가능한 전체 화면 모드로 진입합니다.
- **다크 모드**: 페이지 테마에 따라 자동으로 적응합니다.

## 사용 방법

1. Gemini에게 Mermaid 다이어그램 코드를 생성하도록 요청합니다.
2. 코드 블록이 렌더링된 다이어그램으로 자동으로 교체됩니다.
3. **</> 코드** 버튼을 클릭하여 소스 코드를 확인합니다.
4. **📊 다이어그램** 버튼을 클릭하여 다이어그램 보기로 다시 전환합니다.
5. 다이어그램 영역을 클릭하여 전체 화면으로 봅니다.

## 전체 화면 컨트롤

- **마우스 휠**: 확대/축소
- **드래그**: 다이어그램 이동
- **+/-**: 도구 모음 확대/축소 버튼
- **⊙**: 보기 초기화
- **✕ / ESC**: 전체 화면 닫기

## 호환성 및 문제 해결

::: warning 안내

- **Firefox 제한**: 환경 제한으로 인해 Firefox는 9.2.2 버전을 사용하며, **Timeline**, **Sankey** 등 최신 기능은 지원하지 않습니다.
- **구문 오류**: 렌더링 실패는 주로 Gemini가 생성한 코드의 구문 오류 때문입니다. 현재 Bad Case를 수집 중이며, 향후 패치를 통해 일반적인 생성 오류를 자동 수정할 예정입니다.
  :::

<div align="center">
  <img src="/assets/mermaid-preview.png" alt="Mermaid 다이어그램 렌더링" style="max-width: 100%; border-radius: 8px;"/>
</div>