Что это такое
Mermaid — проект для подхода «диаграммы как код». Вместо отдельного редактора картинок разработчик пишет небольшой текстовый блок, а Mermaid строит из него блок-схему, диаграмму последовательности, Gantt, mind map, C4-схему, state diagram или другую визуализацию.
Смысл проекта не в том, чтобы заменить Figma или сложные архитектурные инструменты. Он закрывает другой сценарий: быстро объяснить процесс, поток данных, порядок вызовов или структуру системы прямо внутри Markdown-документа, запрос на слияние, wiki-страницы или внутреннего руководства.
Как появился и что внутри
Mermaid вырос из практической боли документации: схемы устаревают быстрее текста, особенно если хранятся как отдельные изображения. Текстовую диаграмму проще править вместе с кодом, проверять в истории Git и поддерживать в нескольких местах без ручного экспорта PNG после каждого изменения.
В репозитории живет TypeScript-библиотека, синтаксисы разных диаграмм, парсеры, рендеринг, документация, тесты и интеграции вокруг экосистемы Mermaid. Отдельная сильная сторона — поддержка в GitHub Markdown: многие простые схемы можно читать прямо в репозитории без дополнительной сборки.
Пример схемы в Markdown
Фрагмент показывает обычный сценарий: диаграмма хранится как текстовый блок, поэтому ее можно менять в том же запрос на слияние, что и документацию.
```mermaid
flowchart TD
idea[Идея] --> draft[Черновик]
draft --> check[Проверка]
check --> publish[Публикация]
```Где полезен
Mermaid хорошо подходит для документации API, описания бизнес-процессов, схем деплоя, онбординга, заметок по архитектуре и материалов, где нужно быстро показать связь между шагами. Особенно удобно, когда команда уже живет в Markdown и не хочет заводить отдельный процесс обновления картинок.
Сильные стороны и ограничения
Главный плюс — малый порог входа. Для простой схемы достаточно нескольких строк. Второй плюс — проверяемость: текстовую схему легко обсуждать, копировать, версионировать и переводить. Это делает Mermaid естественным выбором для документации, которая меняется вместе с кодом.
Ограничение — контроль над внешним видом. Mermaid лучше работает как понятная техническая схема, а не как дизайнерская инфографика. Когда нужны пиксельная точность, сложная композиция или брендовая визуальная система, удобнее использовать полноценный графический редактор и оставить Mermaid для рабочих схем.