📬 Пост 53. Mermaid Live Editor: перестаньте уже мучить эти диаграммы руками
Кто хоть раз актуализировал Sequence Diagram после изменения логики, тот знает эту боль.
Добавился один вызов - поправь стрелки. Появился новый сервис - передвинь участников. Изменилась последовательность - теперь полсхемы едет куда-то не туда. А если диаграмма большая, можно вообще полдня потратить на то, чтобы привести её в божеский вид.
Но есть способ не заниматься всей этой фигнёй.
Mermaid Live Editor - инструмент, который позволяет строить диаграммы обычным текстом. По сути, пишешь небольшой кусок кода, а на выходе получаешь готовую схему.
Смотрите, например, как можно описать создание заявки:
sequenceDiagram actor User as Пользователь participant FE as Frontend participant API as Application Service participant DB as Database
User->>FE: Заполняет форму FE->>API: POST /applications API->>API: Валидация данных API->>DB: Сохранение заявки DB—>>API: applicationId API—>>FE: 201 Created FE—>>User: Заявка создана
Вставляем это в редактор - и получаем готовую диаграмму последовательности.
Нужно добавить проверку лимита? Дописываем пару строк. Изменился порядок вызовов? Меняем их местами в описании. Всё. Не надо таскать блоки мышкой и пытаться выровнять стрелки.
Что вообще можно в нём нарисовать?
Да практически весь базовый набор аналитика:
- Sequence Diagram - кто кого вызывает и в какой последовательности.
- Flowchart - бизнес-процессы, алгоритмы и условия.
- Class Diagram - классы, атрибуты и связи.
- ER Diagram - сущности и отношения между ними.
- State Diagram - состояния объекта и переходы.
- C4 Diagram - архитектуру системы на разных уровнях.
И вот что мне особенно нравится - возможность хранить диаграммы в Git.
Представьте: поменялась логика взаимодействия сервисов, аналитик обновил описание диаграммы и отправил коммит. Коллеги могут посмотреть diff и увидеть, что конкретно изменилось.
Никаких diagram_final_15_new_really_final.drawio. Исходник лежит рядом с остальной документацией, история изменений сохраняется.
Но давайте без фанатизма.
Mermaid не заменит draw.io во всех задачах. Если вам нужно нарисовать огромную архитектурную схему, раскидать элементы как душе угодно, добавить визуальные акценты и красиво всё оформить - графический редактор будет удобнее.
А вот для Sequence Diagram, State Diagram, простых архитектурных схем и технических процессов Mermaid - реально удобная штука.
Короче, если вы до сих пор вручную передвигаете каждую стрелку после любого изменения логики, попробуйте этот инструмент. Возможно, часть вашей боли просто исчезнет.
