Набросайте конечный автомат через stateDiagram-v2: [*] --> Draft, Draft --> Review : submit, Review --> Published : approve, Published --> [*]. Поддерживаются составные состояния, точки выбора и ветвления, параллельность через -- и заметки. Удобно для статусов заказа, сценариев интерфейса и протоколов.
Как пользоваться
- Выберите тип диаграммы, чтобы загрузить пример, или пишите код Mermaid. Предпросмотр обновляется вскоре после окончания ввода.
- Ошибки показывают строку и сообщение парсера; нажмите на ошибку, чтобы выделить строку. Последняя корректная диаграмма остаётся видна, но приглушена.
- Масштабируйте кнопками или Ctrl + колесо мыши. Цвета следуют светлой или тёмной теме.
- Скопируйте или скачайте SVG либо скачайте PNG в двойном размере. Включите «Прозрачный фон» для экспорта без фона.
- Скопируйте ссылку: код сжимается в неё после #.
- Диаграммы рисует Mermaid в вашем браузере; текст никуда не отправляется. Редактор запоминает последнюю диаграмму.
- Можно открывать файлы .mmd и Markdown; используется первый блок ```mermaid.
- Mermaid работает в строгом режиме безопасности, поэтому клики и HTML в подписях отключены.
Зачем диаграммы в виде кода
Mermaid описывает диаграмму несколькими читаемыми строками вместо прямоугольников, расставленных вручную. flowchart LR, затем A[Старт] --> B{OK?} и B -->|да| C[Выпуск] — и развилка уже нарисована. Поскольку это текст, диаграмма хранится рядом с кодом в Git, проходит ревью в pull request и обновляется правкой одной строки, а раскладка рассчитывается автоматически.
GitHub, GitLab, Notion, Obsidian и многие системы документации сами отображают блоки ```mermaid, поэтому написанную здесь диаграмму можно без изменений вставить в README. Подбирайте синтаксис в этом редакторе с мгновенной обратной связью, а для мест, где принимают только картинки, выгружайте SVG или PNG.
Какой тип диаграммы выбрать
Блок-схема показывает процессы и решения, диаграмма последовательностей — обмен сообщениями между сервисами или людьми во времени, диаграмма классов — типы и связи, диаграмма состояний — переходы между состояниями, ER-диаграмма — таблицы базы данных с кратностью в нотации «вороньей лапки». Диаграмма Ганта планирует задачи с датами и зависимостями, круговая показывает доли целого, интеллект-карта ветвится от одной идеи, временная шкала раскладывает события по периодам.
Советы
Делайте ID узлов короткими, а читаемый текст пишите в скобках: A[Клиент оформляет заказ]. Подписи со спецсимволами берите в кавычки. Группируйте через subgraph в блок-схемах и блоками alt или loop в диаграммах последовательностей. Если стало тесно, смените направление с TD на LR или разбейте диаграмму на две.
Частые вопросы
Что такое Mermaid?
Mermaid — открытая JavaScript-библиотека, которая рисует диаграммы по текстовому синтаксису, похожему на Markdown. Её напрямую поддерживают GitHub, GitLab и многие вики и приложения для заметок.
Можно ли вставить диаграмму в README на GitHub?
Да. Скопируйте код в блок, начинающийся с ```mermaid, и GitHub его нарисует. Если платформа не поддерживает Mermaid, выгрузите SVG или PNG и вставьте картинку.
Почему диаграмма показывает синтаксическую ошибку?
В сообщении указаны строка и то, что ожидал парсер. Частые причины: пропущенная стрелка, незакрытая скобка или кавычка либо зарезервированное слово вроде end в роли ID — напишите End или возьмите в кавычки.
Как выгрузить картинку в высоком разрешении?
Скачайте PNG — он вдвое больше экранного размера и остаётся чётким на экранах высокой плотности и в презентациях. Для печати и дальнейшей правки берите SVG, который масштабируется без потерь. Включите «Прозрачный», чтобы убрать фон.
Можно ли поделиться диаграммой, не загружая её?
Да. Скопируйте ссылку: код Mermaid сжат в части URL после #, которую браузеры не отправляют на сервер. При открытии ссылки диаграмма восстанавливается.
Работают ли обработчики кликов и HTML в подписях?
Нет. Здесь Mermaid работает в строгом режиме безопасности, поэтому клики, ссылки и HTML внутри подписей отключены. Всё остальное рисуется как обычно.