Рендеринг диаграмм Mermaid

Автоматически рендерит код Mermaid в визуальные диаграммы.

Обзор

Когда Gemini выдает блоки кода Mermaid (блок-схемы, диаграммы последовательности, диаграммы Ганта и т.д.), Voyager автоматически обнаруживает и рендерит их как интерактивные диаграммы.

Ключевые особенности

• Авто-обнаружение: Поддерживает graph, flowchart, sequenceDiagram, gantt, pie, classDiagram и все основные типы диаграмм Mermaid
• Переключение вида: Переключайтесь между отрендеренной диаграммой и исходным кодом одним кликом
• Полноэкранный режим: Нажмите на диаграмму, чтобы войти в полноэкранный режим с поддержкой масштабирования и панорамирования
• Темный режим: Автоматически адаптируется к теме страницы

Как использовать

1. Попросите Gemini сгенерировать любой код диаграммы Mermaid
2. Блок кода автоматически заменяется отрендеренной диаграммой
3. Нажмите кнопку </> Code для просмотра исходного кода
4. Нажмите кнопку 📊 Diagram для переключения обратно в режим диаграммы
5. Нажмите на область диаграммы, чтобы войти в полноэкранный режим

Управление в полноэкранном режиме

• Колесо прокрутки: Масштабирование
• Перетаскивание: Панорамирование диаграммы
• +/-: Кнопки масштабирования на панели инструментов
• ⊙: Сбросить вид
• ✕ / ESC: Закрыть полноэкранный режим