В этой статье рассказывается, как использовать Mermaid для рисования диаграмм UML. Mermaid — это легкий язык графического описания, используемый для рисования различных диаграмм, таких как блок-схемы, диаграммы последовательности и диаграммы Ганта. Он использует простой текстовый синтаксис, что позволяет пользователям быстро рисовать различные сложные диаграммы без необходимости глубокого изучения инструментов графического рисования. Благодаря простому текстовому синтаксису пользователи могут рисовать различные типы диаграмм. Он подходит для различных сценариев, включая блок-схемы, диаграммы последовательности, диаграммы Ганта и т. д. С Mermaid вам будет проще выражать и делиться своими графическими дизайнами.

1. Установите Русалку

Mermaid можно использовать непосредственно в браузере или установить через Node.js. Чтобы использовать его в браузере, вам нужно всего лишь ввести файл сценария Mermaid:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Если вы решите использовать Node.js, выполните следующую команду в командной строке, чтобы установить Mermaid:

npm install mermaid

2. Нарисуйте блок-схему

Нарисовать блок-схему с помощью Mermaid очень просто, вам нужно всего лишь создать ее с помощью ключевого слова Graph.

Например:

graph TD; A-->B; A-->C; B-->D; C-->D;

Это простая блок-схема: узел A указывает на узел B и узел C соответственно, а узлы B и C указывают на узел D.

Изображение готового продукта:

image 53 - Учебник по рисованию UML-диаграммы русалки

В качестве более сложного примера нарисуем архитектурную схему распределенной системы:

graph TD
  subgraph пользователь
    пользовательдействовать --> A[внешнее приложение]
  end

  subgraph Сервер
    A --> B[Балансировка нагрузки]
    B -->|просить| С[Сервис 1]
    B -->|просить| Д[Сервис 2]
    B -->|просить| Э[Сервис 3]
  end

  subgraph хранение данных
    C -->|Читай и пиши| Ф[база данных1]
    D -->|Читай и пиши| Г[База данных 2]
    E -->|Читай и пиши| Ч[База данных 3]
  end

  subgraph очередь сообщений
    C -->|Асинхронная связь| I[очередь сообщений1]
    D -->|Асинхронная связь| I
    E -->|Асинхронная связь| I
  end

Изображение готового продукта:

image 54 1024x759 - Учебник по рисованию UML-диаграммы русалки

3. Нарисуйте временную диаграмму

Диаграммы последовательностей также являются распространенным сценарием приложения Mermaid и создаются с помощью ключевого слова SequenceDiagram.

Ниже приведен пример синтаксиса Mermaid для простой диаграммы последовательности:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Hi Alice! I'm good, thank you!

Изображение готового продукта:

image 55 1024x614 - Учебник по рисованию UML-диаграммы русалки

В качестве еще одного сложного примера нарисуем архитектурную схему встраиваемой системы:

sequenceDiagram
    participant A as пользователь
    participant B as Устройство Гармонии
    participant C as облачный сервер
    participant D as Облачная база данных
    participant E as Встроенное приложение верхнего уровня
    participant F as Совет по развитию
    participant G as SQLite

    activate A #grey
    note over A: пользователь Проверятьдействовать
    A->>B: Запрос событий
    deactivate A
    activate B #lightblue
    B->>C: Запросить данные
    deactivate B
    activate C #orange
    C->>D: Запрос
    deactivate C
    activate D #blue
    D-->>C: Возврат данных
    deactivate D
    activate C #orange
    C-->>B: Возврат данных
    deactivate C
    activate B #lightblue
    B-->>A: Показать контент
    deactivate B

    activate A #grey
    note over A: пользователь Изменятьдействовать
    A->>B: Обновить событие
    deactivate A
    activate B #lightblue
    B->>C: Запросить обновление
    deactivate B
    activate C #orange
    C->>F: Запросить обновление
    deactivate C
    activate F #lightgreen
    F->>G: Запросить обновление
    deactivate F
    activate G #green
    G-->>F: Возврат результатов
    deactivate G
    activate F #lightgreen
    F->>C: Отправить запрос на изменение
    deactivate F
    activate C #orange
    C->>D: Обновить данные
    deactivate C
    activate D #blue
    D-->>C: Возврат результатов
    deactivate D
    activate C #orange
    C-->>B: Возврат результатов
    deactivate C
    activate B #lightblue
    B-->>A: Возврат результатов
    deactivate B
    activate A #grey
    A->>A: Быстрые результаты
    note over A: Операция прошла успешно
    deactivate A

Изображение готового продукта: ​

image 56 - Учебник по рисованию UML-диаграммы русалки

4. Нарисуйте диаграмму Ганта

Диаграммы Ганта также можно рисовать с помощью Mermaid, созданного с использованием ключевого слова gant.

Например, нарисуем простую диаграмму Ганта:

gantt
    title Пример диаграммы Ганта

    section Section
    A task           :a1, 2022-03-02, 1d
    Another task     :after a1, 1d
    section Another
    Task in sec      :2022-03-04, 1d

Изображение готового продукта: ​

image 57 1024x113 - Учебник по рисованию UML-диаграммы русалки

5. Нарисуйте круговую диаграмму

Круговые диаграммы также можно рисовать с помощью Mermaid, созданного с использованием ключевого слова pie.

Например:

pie
  title Pie Chart
  "Category A" : 40
  "Category B" : 25
  "Category C" : 20
  "Category D" : 15

Изображение готового продукта:

image 58 - Учебник по рисованию UML-диаграммы русалки

6. Нарисуйте диаграмму состояний

Диаграммы состояний используются для отображения состояния объекта и процесса перехода между состояниями. В Mermaid синтаксис диаграмм состояний также очень прост. Диаграммы состояний можно использовать для отображения жизненного цикла объектов, переходов между состояниями и т. д. Они создаются с помощью ключевого слова stateDiagram.

Например:

stateDiagram
[*] --> пауза
    пауза --> играть
    пауза --> останавливаться
    играть --> пауза
    играть --> останавливаться
    останавливаться --> [*] 

Изображение готового продукта: ​

image 59 - Учебник по рисованию UML-диаграммы русалки

7. Рисуем диаграммы классов

Диаграммы классов также можно рисовать с помощью Mermaid, созданного с помощью ключевого слова classDiagram.

Например:

classDiagram
  class User {
    +username: string
    +password: string
    +login(): void
    +logout(): void
  }

  class Employee {
    +employeeId: string
    +position: string
    +work(): void
  }

  class Customer {
    +customerId: string
    +membershipLevel: string
    +purchase(): void
  }

  User <|-- Employee
  User <|-- Customer

Изображение готового продукта: ​

image 60 1024x758 - Учебник по рисованию UML-диаграммы русалки

8. Экспорт графиков

Нарисовав диаграмму с помощью Mermaid в браузере, вы можете сохранить ее как изображение или экспортировать код в виде файла SVG, щелкнув правой кнопкой мыши. Если вы используете Node.js, выполните следующую команду в командной строке, чтобы преобразовать код Mermaid в изображение:

npx mmdc -i input.mmd -o output.png

9. Краткое содержание рисунков русалки

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

Преимущество Mermaid заключается не только в простоте использования, но и в широком спектре сценариев применения. В управлении проектами вы можете использовать Mermaid для построения четких диаграмм Ганта и визуального отображения времени и хода выполнения задач. При проектировании системы Mermaid предоставляет простую и мощную функцию рисования диаграммы последовательности, которая помогает прояснить взаимосвязь и последовательность между событиями. Кроме того, Mermaid также поддерживает различные типы графиков, такие как блок-схемы и диаграммы классов, что позволяет пользователям с легкостью применять их в различных областях.

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

В целом, простота, гибкость и масштабируемость Mermaid делают его популярным инструментом графического рисования, предоставляя пользователям удобный способ четкого и интуитивного представления информации в различных сценариях. ​