Решение нескольких проблем с помощью предыдущих инструментов построения диаграмм. Русалка — обязательный предмет для любого инженера.

На протяжении десятилетий инженеры создавали диаграммы для различных вариантов использования. Диаграмма может передать эту информацию быстро и лаконично, будь то документирование архитектуры или объяснение сложной последовательности событий.

Многие из этих десятилетий создание диаграмм производилось вручную. Вам необходимо загрузить программное обеспечение или использовать онлайн-инструмент на основе пользовательского интерфейса для создания диаграмм. Когда вы закончили, вы экспортировали свою диаграмму в виде изображения, чтобы поделиться с коллегами.

Это создало несколько проблем, которые не позволили диаграммам стать тем, чем занималось большинство инженеров. Однако в настоящее время есть способ получше, и он называется «Русалка».

Что такое Русалка?

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

Mermaid — это инструмент для построения диаграмм, который можно использовать для создания диаграмм. Однако вместо того, чтобы рисовать диаграмму вручную, вы используете разметку, подобную Markdown, для определения диаграммы, и Mermaid берет эту разметку и отображает диаграмму.

Например, вот разметка Mermaid для создания простой блок-схемы:

flowchart LR
   hungry{Are you hungry?}

   hungry-- "Yes" -->Eat
   hungry-- "No" -->Sit

При рендеринге это выглядит так:

Это просто, но эффективно. Самое главное, любой мог создать диаграмму с помощью Mermaid и браузера. Их документация тоже очень хороша, что позволяет быстро освоиться.

Помимо блок-схемы, Mermaid поддерживает различные диаграммы, такие как диаграммы последовательности, диаграммы классов и диаграммы отношений сущностей. Если Mermaid изначально не поддерживает нужный тип диаграммы, вы, вероятно, можете создать ее с помощью блок-схемы. Например, я использовал блок-схему Mermaid для создания диаграмм Модель C4 до того, как была добавлена ​​нативная поддержка (диаграммы C4 все еще экспериментальны в Mermaid!).

Теперь мы знаем, что такое Mermaid, но какие проблемы она решает по сравнению с инструментами на основе пользовательского интерфейса или даже с PlantUML?

Какие проблемы решает русалка?

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

Такая ситуация возникает из-за того, что визуализированную диаграмму необходимо экспортировать вручную из инструмента на основе пользовательского интерфейса, а полученное изображение нужно куда-то загрузить (например, в какую-то документацию). Это означает, что исходная и визуализированная диаграмма в этой точке разделены. Вы можете зафиксировать и изображение, и исходный код в системе управления версиями, но велика вероятность, что в какой-то момент они перестанут синхронизироваться.

Кроме того, пытались ли вы когда-нибудь отличить исходные файлы от инструмента на основе пользовательского интерфейса? Я гарантирую вам, что это неразборчиво и совсем не понятно для человека. Это делает невозможным обзор.

Русалка решает обе эти проблемы.

Во-первых, как вы видели в приведенном выше примере, источник Mermaid похож на Markdown, что делает его доступным для сравнения и просмотра.

Во-вторых, и это самое главное, у Русалки уже есть значительное усыновление. GitHub имеет нативную поддержку для Mermaid (как и GitLab). Существуют плагины IDE для VS Code, Sublime, Vim и многих других. Есть даже поддержка (некоторая встроенная) в инструментах повышения производительности, таких как JIRA, Trello, Notion и многих других.

Нативная поддержка GitHub и GitLab — настоящая фишка. Вы можете зафиксировать свои диаграммы Mermaid в файлах Markdown, и они будут отображать вашу диаграмму при просмотре (например, в README). Это делает невозможным устаревание исходного кода, поскольку он рендерится из исходного кода и легко проверяется в запросе на включение.

PlantUML, более старый инструмент для создания диаграмм из простой разметки, на самом деле работает аналогично Mermaid. Ключевое отличие состоит в том, что он был выпущен в 2009 году, а рендеринг выполняется с использованием Java. С Mermaid вы можете отображать диаграмму из исходного кода в браузере. На мой взгляд, именно поэтому Mermaid получила такое широкое распространение.

Дело не в том, что PlantUML плох. Отнюдь не. Просто использование Mermaid быстро растет, что делает его главным инструментом для построения диаграмм.

Краткое содержание

Mermaid меняет способы создания и отображения диаграмм. Скорость, с которой может быть создана диаграмма, быстро снижается с помощью Mermaid, поскольку вам не нужно беспокоиться о том, как она выглядит, в отличие от инструментов на основе пользовательского интерфейса. Посмотреть инструмент Mermaid можно здесь.

Рад попробовать Mermaid, но не знаете, с чего начать?

Моя книга "Создание программного обеспечения с помощью современных методов построения диаграмм" уже вышла! Нажмите здесь, чтобы узнать, как создавать диаграммы для передачи информации более прямо и ясно, чем слова, и все это с помощью Mermaid.