Руководство по созданию диаграмм с помощью Mermaid и PlantUML
Введение
Разберем как создавать диаграммы с помощью кода на примере Mermaid и PlantUML.
Установка и настройка
Установка Java
Для работы PlantUML необходимо установить Java:
- Скачайте Java: Перейдите на официальный сайт Java Downloads и скачайте последнюю версию.
- Установите Java: Следуйте инструкциям установщика для вашей операционной системы.
- Проверьте установку: В командной строке введите
java -version, чтобы убедиться, что Java установлена корректно.
Установка Visual Studio Code
Скачайте и установите Visual Studio Code с официального сайта:
Установка расширений
Поддерживаемые диаграммы
Оба инструмента, Mermaid и PlantUML, поддерживают следующие типы диаграмм:
- Графы
- Блок-схемы
- Диаграммы Ганта
- Диаграммы последовательностей
- ER-диаграммы (для Mermaid)
- Диаграммы классов (для PlantUML)
- Диаграммы состояний (для PlantUML)
- Диаграммы активности (для PlantUML)
- ...
С полным перечнем можно ознакомиться в официальной документации: Mermaid и PlantUML.
Создание диаграмм с помощью Mermaid
Mermaid — это простой и мощный инструмент для создания диаграмм с использованием текста.
Пример диаграммы
graph LR
A[Начало] --> B{Вопрос?}
B -- Да --> C[Действие 1]
B -- Нет --> D[Действие 2]
C --> E[Конец]
D --> E[Конец]
Стилизация диаграмм
Диаграммы Mermaid можно стилизовать с помощью CSS и встроенных тем.
Пример стилизации:
graph LR
A[Начало] --> B{Вопрос?}
B -- Да --> C[Действие 1]
B -- Нет --> D[Действие 2]
C --> E[Конец]
D --> E[Конец]
classDef default fill:#f9f,stroke:#333,stroke-width:2px;
class A,C,E default;
Рендеринг онлайн
Диаграммы Mermaid можно рендерить онлайн через mermaid.live.
Создание диаграмм с помощью PlantUML
PlantUML — это мощный инструмент для создания UML-диаграмм с помощью текста. PlantUML требует установки Java для рендеринга диаграмм.
Пример диаграммы последовательностей
@startuml
Alice -> Bob : Привет!
Bob --> Alice : Привет, как дела?
@enduml
Пример диаграммы классов
@startuml
class Animal {
+String name
+int age
+run()
}
class Dog {
+String breed
+bark()
}
Animal <|-- Dog
@enduml
Пример диаграммы состояний
@startuml
[*] --> Idle
Idle --> Processing : Start
Processing --> Finished : Process complete
Finished --> [*]
@enduml
Пример диаграммы активности
@startuml
:start: -> :Request received;
if (Valid request?) then (yes)
-> :Process request;
-> :Send response;
else (no)
-> :Error;
endif
-> :End;
@enduml
Стилизация диаграмм
PlantUML позволяет настраивать стили диаграмм с помощью тегов и специальных команд. Например, можно изменять цвет, шрифт и положение элементов.
Пример стилизации:
@startuml
skinparam backgroundColor #EEEBDC
skinparam handwritten true
Alice -> Bob : Привет!
Bob --> Alice : Привет, как дела?
@enduml
Рендеринг онлайн
PlantUML диаграммы можно рендерить онлайн через PlantUML онлайн рендерер.