Mermaid 다이어그램 렌더링
Mermaid 코드를 시각적 다이어그램으로 자동으로 렌더링합니다.
개요
Gemini가 Mermaid 코드 블록(플로우차트, 시퀀스 다이어그램, 간트 차트 등)을 출력하면, Voyager는 이를 자동으로 감지하여 대화형 다이어그램으로 렌더링합니다.
주요 기능
- 자동 감지:
graph,flowchart,sequenceDiagram,gantt,pie,classDiagram및 모든 주요 Mermaid 다이어그램 유형을 지원합니다. - 보기 전환: 클릭 한 번으로 렌더링된 다이어그램과 소스 코드 간을 전환할 수 있습니다.
- 전체 화면 모드: 다이어그램을 클릭하여 확대/축소 및 이동이 가능한 전체 화면 모드로 진입합니다.
- 다크 모드: 페이지 테마에 따라 자동으로 적응합니다.
사용 방법
- Gemini에게 Mermaid 다이어그램 코드를 생성하도록 요청합니다.
- 코드 블록이 렌더링된 다이어그램으로 자동으로 교체됩니다.
- </> 코드 버튼을 클릭하여 소스 코드를 확인합니다.
- 📊 다이어그램 버튼을 클릭하여 다이어그램 보기로 다시 전환합니다.
- 다이어그램 영역을 클릭하여 전체 화면으로 봅니다.
전체 화면 컨트롤
- 마우스 휠: 확대/축소
- 드래그: 다이어그램 이동
- +/-: 도구 모음 확대/축소 버튼
- ⊙: 보기 초기화
- ✕ / ESC: 전체 화면 닫기
호환성 및 문제 해결
안내
- Firefox 제한: 환경 제한으로 인해 Firefox는 9.2.2 버전을 사용하며, Timeline, Sankey 등 최신 기능은 지원하지 않습니다.
- 구문 오류: 렌더링 실패는 주로 Gemini가 생성한 코드의 구문 오류 때문입니다. 현재 Bad Case를 수집 중이며, 향후 패치를 통해 일반적인 생성 오류를 자동 수정할 예정입니다.
