# Рендеринг диаграмм 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 cases" для внедрения автоматических исправлений в будущих обновлениях.
  :::

<div align="center">
  <img src="/assets/mermaid-preview.png" alt="Рендеринг диаграмм Mermaid" style="max-width: 100%; border-radius: 8px;"/>
</div>