Mermaid — текстовый язык описания диаграмм: вы пишете код, а flip строит по нему блок-схему, диаграмму последовательности, классов, состояний, Ганта и другие. Диаграмма добавляется на флип как единый объект, а её код можно изменить в любой момент

Как добавить диаграмму

1. На панели инструментов выберите «Диаграмма Mermaid» — откроется одноимённое окно с редактором кода и превью

   Если инструмента нет на панели, откройте «Все инструменты» — он находится в разделе «Диаграммы и схемы»

2. Введите или вставьте код в редактор либо выберите один из шаблонов под ним. Например:

   flowchart TD
       A[Заявка] --> B{Одобрена?}
       B -->|Да| C[В работу]
       B -->|Нет| D[Отказ]

3. Проверьте результат в превью

4. Нажмите «Добавить на флип» — диаграмма появится в центре видимой области флипа

   Кнопка «Добавить на флип» активна, только когда код построен без ошибок и превью обновилось. Чтобы закрыть окно без добавления, нажмите на крестик

Шаблоны

Под редактором находится блок «Шаблоны» с готовыми примерами: «Блок-схема», «Последовательность», «Классы», «Состояния», «Гант», «Круговая», «ER», «CJM», «Git-граф» и «C4». Шаблоны, которые не поместились в ряд, открываются кнопкой с тремя точками в конце ряда

Шаблон полностью заменяет код в редакторе. Его можно отредактировать перед добавлением на флип — в диаграмму попадёт изменённый код

Шаблоны — это примеры, а не полный перечень: в редакторе можно писать и другие типы диаграмм, которые поддерживает Mermaid

Тема, направление и масштаб превью

В области превью доступны настройки:

• «Тема» — цветовое оформление диаграммы: «Классическая», «Стандартная», «Нейтральная», «Минималистичная», «Зелёная», «Тёмная», «Мягкая тёмная» и «Минималистичная тёмная». В списке остаются только темы, которые выглядят по-разному для текущей диаграммы
• «Направление» — «Сверху вниз», «Снизу вверх», «Слева направо» или «Справа налево». Настройка доступна для блок-схем, диаграмм классов, состояний и ER-диаграмм. При выборе направления меняется и код диаграммы
• «Масштаб» — масштаб превью. Его можно менять и колесом мыши, а перемещать диаграмму в превью — правой или средней кнопкой мыши. На размер диаграммы на флипе масштаб превью не влияет

Ошибки в коде

Если в коде есть ошибка — например, не закрыта скобка узла, — строка с ней отмечается маркером и подчёркивается волнистой линией. Наведите курсор на маркер, чтобы увидеть описание ошибки — оно выводится на английском языке, например «Parse error on line 3»

Пока ошибка не исправлена, в превью остаётся последняя корректная версия диаграммы, а кнопки «Добавить на флип» и «Сохранить» недоступны

Если диаграмму на флипе не удалось отрисовать, на её месте появится сообщение «Не удалось построить диаграмму» — кликните по нему, чтобы открыть редактор и исправить код

Как изменить диаграмму на флипе

Выделите диаграмму — над ней появится меню из значков без подписей, название значка видно в подсказке при наведении курсора:

• «Редактировать диаграмму» — открывает окно с кодом. Внесите правки и нажмите «Сохранить»
• «Направление» и «Тема» — меняют диаграмму без открытия редактора
• «Копировать Mermaid код» — копирует код диаграммы в буфер обмена. Такая же кнопка есть в окне редактора: она копирует текущий текст из редактора, даже если он ещё не сохранён
• «Скачать» — «Скачать SVG» или «Скачать PNG»

Размер диаграммы меняется с сохранением пропорций. Если после правки кода в диаграмме стало больше или меньше узлов, её область увеличится или уменьшится, а размер самих узлов и подписей останется прежним

Диаграмму можно перетащить с флипа в документ и вернуть обратно на флип — код и тема сохранятся

Ограничения

• Диаграмма — единый объект: отдельные узлы и связи нельзя выделить или передвинуть на флипе. Чтобы изменить схему, отредактируйте код
• Тему и шрифт диаграммы определяет flip: директива %%{init}%% и frontmatter в коде их не переопределяют. Стили отдельных узлов и связей — style, classDef, linkStyle — применяются
• Для диаграмм последовательности, Ганта, круговых диаграмм и Git-графа настройки «Направление» нет
• На телефоне окно редактора не открывается: для диаграммы доступны смена темы и направления, копирование кода и скачивание