Ввод кода
Результат
Рендеринг диаграммы.
Как построить диаграмму Mermaid
Онлайн-редактор Mermaid
Mermaid описывает диаграммы обычным текстом: вы пишете несколько строк кода, а схема строится сама. Диаграмму не нужно рисовать мышкой - ее легко хранить в git рядом с проектом, сравнивать по версиям и править в любом редакторе.
Введите код слева, нажмите "Визуализировать" и получите схему справа. Готовый результат можно скопировать как PNG или скачать в PNG и SVG - рендеринг идет в браузере.
Типы диаграмм и когда они нужны
Тип задается первым словом в коде. Основные варианты:
| Тип | Ключевое слово | Для чего подходит |
|---|---|---|
| Блок-схема | flowchart TD | Алгоритмы, бизнес-процессы, ветвления |
| Sequence | sequenceDiagram | Обмен сообщениями между сервисами |
| Class | classDiagram | Структура классов и связей в коде |
| ER | erDiagram | Таблицы базы данных и их связи |
| State | stateDiagram-v2 | Состояния объекта и переходы между ними |
| Gantt | gantt | Планы и сроки задач по времени |
| Pie | pie | Доли в общем объеме |
| Journey | journey | Путь пользователя по шагам |
Набор доступных типов зависит от версии Mermaid, подключенной на странице.
Как построить диаграмму Mermaid
-
Опишите диаграмму кодом
Введите синтаксис Mermaid в левое поле или нажмите "Загрузить пример", чтобы начать с готового шаблона.
-
Нажмите "Визуализировать"
Схема отрисуется в блоке "Результат" справа. Если в коде ошибка, под кнопкой появится подсказка - поправьте строку и запустите снова.
-
Скопируйте или скачайте
После рендера станут активны кнопки "Копировать PNG", "Скачать PNG" и "Скачать SVG" - выберите нужный формат для документации или презентации.
Частые вопросы
Текстовый язык описания диаграмм: схему вы задаете кодом, а картинку рисует движок. Такой код удобно хранить в git рядом с проектом и править в любом текстовом редакторе
Блок-схемы, диаграммы последовательности, классов, состояний, ER, диаграммы Ганта, круговые и пользовательские сценарии (journey)
Обычно дело в синтаксисе. Проверьте первую строку с типом диаграммы (flowchart TD, sequenceDiagram) и текст ошибки, который выводится под кнопкой "Визуализировать"