---
url: https://flip-chart.ru/knowledge-base/mermaid-diagrams.md
description: >-
  Вставьте код Mermaid в окно «Диаграмма Mermaid», проверьте превью и нажмите
  «Добавить на флип» — блок-схема, диаграмма последовательности, классов или
  Ганта появится на флипе как единый объект
---

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

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

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

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

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

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

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

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

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

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

![Окно «Диаграмма Mermaid» с кодом и превью](/images/kb/mermaid-diagrams/1.png)

## Шаблоны

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

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

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

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

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

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

![Список «Тема» в области превью](/images/kb/mermaid-diagrams/2.png)

## Ошибки в коде

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

![Строка с ошибкой в редакторе кода](/images/kb/mermaid-diagrams/3.png)

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

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

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

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

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

![Меню диаграммы Mermaid на флипе](/images/kb/mermaid-diagrams/4.png)

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

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

## Ограничения

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