Процесс Тип
Графическое выражение
Мышление Тип
Структурированное выражение
Заметки Тип
Эффективное выражение
Древовидная карта
Диаграмма кронштейна
Режим по умолчанию
Mermaid — это инструмент для создания диаграмм на основе текстового синтаксиса. С помощью простого кода Mermaid можно создавать блок-схемы, диаграммы последовательности, диаграммы классов, диаграммы состояний, ER-диаграммы, диаграммы Ганта, интеллект-карты, диаграммы архитектуры и другие типы диаграмм.
В отличие от традиционных инструментов рисования с перетаскиванием, Mermaid описывает узлы, связи, временную последовательность и структуру данных диаграммы в основном с помощью кода. После изменения кода диаграмма автоматически перестраивается, поэтому Mermaid особенно подходит для технической документации, проектирования продуктов, управления проектами, разработки программного обеспечения и структурирования знаний.
В этой статье описывается базовый синтаксис Mermaid и собраны поддерживаемые
редактором типы диаграмм, синтаксис объявлений, примеры кода и сценарии использования. Если вы хотите писать и просматривать код Mermaid прямо онлайн, можно бесплатно попробовать онлайн-редактор Mermaid от ProcessOn.
Mermaid — это инструмент для создания диаграмм с использованием текстового синтаксиса. Приведённый ниже код создаёт простую блок-схему Mermaid:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Результат рендеринга выглядит так:
Здесь: flowchart TD объявляет создание блок-схемы с расположением сверху вниз.
Логику работы Mermaid, если коротко, можно обобщить так:
Написание кода Mermaid → разбор кода → рендеринг диаграммы → изменение кода → диаграмма обновляется в реальном времени
Поэтому один из ключей к изучению Mermaid — понимание синтаксиса объявлений, соответствующего разным типам диаграмм.
Разные типы диаграмм используют разный синтаксис объявлений Mermaid, а наиболее распространённые диаграммы Mermaid включают:
| Тип диаграммы | Синтаксис объявлений Mermaid | Типичное применение |
| Блок-схема | flowchart | Бизнес-процессы, алгоритмы, рабочие процессы |
| Диаграмма последовательности | sequenceDiagram | Взаимодействие систем, вызовы API |
| Диаграмма классов | classDiagram | Структура ПО, объектно-ориентированное моделирование |
| Диаграмма состояний | stateDiagram-v2 | Переходы состояний, конечные автоматы |
| ER-диаграмма | erDiagram | Связи сущностей базы данных |
| Диаграмма Ганта | gantt | План проекта, ход выполнения задач |
| Диаграмма пользовательского пути | journey | Пользовательский опыт, путь клиента |
| Интеллект-карта | mindmap | Структурирование знаний, мозговой штурм |
| Временная шкала | timeline | Хронология, исторические события |
| Круговая диаграмма | pie | Пропорции, анализ состава |
| Квадрантная диаграмма | quadrantChart | Классификация, приоритеты, позиционирование |
| Git-диаграмма | gitGraph | Ветки, коммиты и слияния Git |
| Диаграмма Санкей | sankey-beta | Потоки данных, ресурсов и трафика |
| XY-диаграмма | xychart-beta | Тренды данных, сравнение значений |
| Лепестковая диаграмма | radar | Сравнение многомерных показателей |
| C4-диаграмма | C4Context и другие | Моделирование архитектуры ПО |
| Диаграмма архитектуры | architecture-beta | Архитектура систем, сервисов и ресурсов |
| Канбан-диаграмма | kanban | Управление задачами и статусами работ |
| Блочная диаграмма | block-beta | Модули, структура и связи систем |
| Диаграмма пакетов | packet-beta | Структура сетевых пакетов |
| Диаграмма требований | requirementDiagram | Анализ требований и связи между требованиями |
В разных версиях Mermaid-редактора поддержка синтаксиса и функций диаграмм может отличаться, поэтому на практике следует ориентироваться на синтаксис, поддерживаемый редактором.
Базовый синтаксис
Mermaid использует объявление flowchart для создания блок-схемы. Простейший вариант записи:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Результат рендеринга
Здесь:
В блок-схемах Mermaid также можно использовать LR (слева направо), RL (справа налево), BT (снизу вверх) и другие настройки направления. Например:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Обозначает блок-схему с расположением слева направо.
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| (text) | Скруглённый прямоугольник | Начало, конец или обычная операция процесса |
| [text] | Прямоугольник | Конкретный шаг, задача или процесс обработки |
| {text} | Ромб | Проверка условия, ветвление |
| ((text)) | Круг | Точка соединения или событие |
| [[text]] | Двойной прямоугольник | Вызов подпроцесса или подмодуля |
| [(text)] | Цилиндр | Узел базы данных |
| >text] | Асимметричная фигура | Ввод/вывод |
| [/text/] | Параллелограмм | Входные или выходные данные |
| --> | Стрелка | Направление хода процесса |
| --- | Линия связи без стрелки | Отношение ассоциации |
| -.-> | Пунктирная стрелка | Необязательный процесс, отношение ссылки |
| ==> | Толстая стрелка | Ключевой процесс или сильная связь |
Подробный синтаксис создания блок-схем Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/flowchart
Блок-схемы подходят для бизнес-процессов, рабочих процессов, алгоритмов, системных процессов и процессов принятия решений, попробуйте бесплатно онлайн-редактор Mermaid для блок-схем.
Базовый синтаксис
Mermaid использует объявление sequenceDiagram для создания диаграммы последовательности. Простейший пример:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| sequenceDiagram | Диаграмма последовательности | Создание диаграммы последовательности |
| A->B: message | Сплошная линия | Синхронный вызов сообщения или обычное взаимодействие |
| A-->B: message | Пунктирная линия | Возвращаемое сообщение или слабая связь |
| A->>B: message | Сплошная стрелка | асинхронный вызов сообщения |
| A-->>B: message | Пунктирная стрелка | асинхронный ответ или возвращаемое сообщение |
| participant A | Участник | Определяет объект, роль или систему во взаимодействии |
| actor A | Роль | Активный участник: пользователь, внешняя система и т. п. |
| activate A | Блок активации | Объект начинает обработку запроса |
| deactivate A | Завершение активации | Объект завершает текущую обработку |
| loop text | Блок цикла | Повторяющееся взаимодействие |
| alt text | Ветвление по условию | Пути взаимодействия при разных условиях |
| opt text | Необязательный процесс | Возможное взаимодействие |
| par text | Блок параллельных действий | Несколько операций выполняются одновременно |
Подробный синтаксис создания диаграмм последовательности Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/sequence-diagram
Диаграммы последовательности подходят для описания взаимодействий между пользователем и системой, между системами и между сервисами в хронологическом порядке, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм последовательности.
Базовый синтаксис
Mermaid использует объявление classDiagram для создания диаграммы классов.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| classDiagram | Диаграмма классов | Создание диаграммы классов |
| class ClassName | Класс | Определяет объект класса |
| ClassName : attribute | Атрибут | Переменная-член класса |
| ClassName : method() | Метод | Определяет метод класса |
| <|-- | Пустой треугольник+ Сплошная линия | Отношение наследования |
| <|.. | Пустой треугольник+ Пунктирная линия | Отношение реализации |
| *-- | Закрашенный ромб+ Сплошная линия | Отношение композиции |
| o-- | Пустой ромб+ Сплошная линия | Отношение агрегации |
| --> | Сплошная стрелка | Отношение ассоциации |
| ..> | Пунктирная стрелка | Отношение зависимости |
| -- | Сплошная линия | Обычное отношение связи |
| +attribute | Знак плюс | Открытый атрибут или метод |
| -attribute | Знак минус | Закрытый атрибут или метод |
Символы +, - и # перед членами класса обозначают разную видимость.
Подробный синтаксис создания диаграмм классов Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/class-diagram
Диаграммы классов подходят для проектирования ПО, объектно-ориентированного моделирования и анализа структуры программ, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм классов.
Базовый синтаксис
Mermaid использует объявление stateDiagram-v2 для создания диаграммы состояний.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| stateDiagram-v2 | Диаграмма состояний | Создание диаграммы состояний |
| state StateName | Скруглённый прямоугольник | Определяет базовый узел состояния |
| state StateName : text | Скруглённый прямоугольник с текстом | Добавляет к состоянию описание |
| [*] | Закрашенный кружок или двойное кольцо | Начало или конец состояния |
| [*] --> StateName | Начальная стрелка | Переход в первое состояние |
| StateName --> [*] | Конечная стрелка | Завершение процесса состояний |
| A --> B | Сплошная стрелка | Переход состояния |
| A --> B: event | Сплошная стрелка с подписью | Переход состояния с запускающим событием |
| state StateName { ... } | Вложенный скруглённый прямоугольник | Определяет составное состояние |
| state Node <<choice>> | Ромб | Узел ветвления и выбора |
| state Fork <<fork>> | Толстая горизонтальная разделительная линия | Начало параллельных процессов |
| state Join <<join>> | Толстая горизонтальная разделительная линия | Завершение и объединение параллельных процессов |
Подробный синтаксис создания диаграмм состояний Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/state-diagram
Диаграммы состояний подходят для отображения статусов заказов, состояний рабочих процессов, состояний пользователей и систем, а также конечных автоматов, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм состояний.
Базовый синтаксис
Mermaid использует объявление erDiagram для создания диаграммы «сущность — связь», то есть ER-диаграммы.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| erDiagram | ER-диаграмма | создаёт диаграмму ER |
| ENTITY { } | Прямоугольник | Определяет сущность |
| type field | Метка атрибута | Определяет атрибут сущности |
| type field PK | Первичный ключ | Определяет первичный ключ сущности |
| type field FK | Внешний ключ | Определяет внешний ключ сущности |
| type field UK | Уникальный ключ | Определяет поле с ограничением уникальности |
| || | Один | Обязательно ровно один |
| o| | Ноль или один | Ноль или один |
| |{ | Один или несколько | Минимум один |
| o{ | Ноль, один или несколько | Ноль или несколько |
Подробный синтаксис создания ER-диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/er-diagram
ER-диаграмма позволяет представить сущности, атрибуты и связи между сущностями и часто используется при проектировании баз данных, попробуйте бесплатно онлайн-редактор Mermaid для ER-диаграмм.
Базовый синтаксис
Mermaid использует объявление mindmap для создания интеллект-карты.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| mindmap | Интеллект-карта | Создание интеллект-карты |
| root[text] | Прямоугольник | Прямоугольная корневая тема |
| root(text) | Скруглённый прямоугольник | Скруглённая прямоугольная корневая тема |
| root((text)) | Круг | Круглая корневая тема |
| root{{text}} | Шестиугольник | Шестиугольная корневая тема |
| root)text( | Пузырьковая диаграмма | Пузырьковая корневая тема |
| [text] | Прямоугольник | Прямоугольный узел |
| (text) | Скруглённый прямоугольник | Скруглённый прямоугольный узел |
| ((text)) | Круг | Круглый узел |
| {{text}} | Шестиугольник | Шестиугольный узел |
| )text( | Пузырьковая диаграмма | Пузырьковый узел |
Подробный синтаксис создания интеллект-карт Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/mindmap
В интеллект-картах иерархия в основном задаётся отступами, поэтому они отлично подходят для структурирования знаний, мозгового штурма, конспектов и информационной архитектуры, попробуйте бесплатно онлайн-редактор Mermaid для интеллект-карт.
Базовый синтаксис
Mermaid использует объявление gantt для создания диаграммы Ганта.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Результат рендеринга
Где:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| gantt | Диаграмма Ганта | Создание диаграммы Ганта |
| title text | Заголовок | Задаёт заголовок диаграммы Ганта |
| dateFormat text | Идентификатор настройки даты | Задаёт формат разбора дат на временной шкале |
| section text | Строка заголовка группы с цветовой заливкой | Разделяет группы задач |
| TaskName : id, startDate, endDate | Горизонтальная полоса задачи | Задаёт свойства задачи |
| startDate | Горизонтальная полоса задачи | Задаёт время начала |
| endDate | Горизонтальная полоса задачи | Задаёт время окончания |
| duration | Горизонтальная полоса задачи | Задаёт длительность задачи |
| id | Пользовательский | Задаёт идентификатор задачи |
| after id | Горизонтальная полоса задачи | Задаёт задачу, начинающуюся после предшествующей задачи |
| 16d, 2w | Горизонтальная полоса задачи | Обозначает дни или недели |
| milestone, date | Закрашенный ромб | Устанавливает веху |
Подробный синтаксис создания диаграмм Ганта Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/gantt
Диаграммы Ганта Mermaid подходят для планирования проектов, распределения задач, контроля хода разработки и управления проектами, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм Ганта.
Базовый синтаксис
Mermaid использует объявление journey для создания диаграммы пользовательского пути.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Результат рендеринга
Где:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| journey | Диаграмма пользовательского пути | Создание диаграммы пользовательского пути |
| title text | Заголовок | Заголовок диаграммы пользовательского пути |
| section text | Блок-секция | Разделяет группы этапов процесса |
| TaskName:num:Actor | Узел процесса + ось шкалы удовлетворённости | Определяет задачи взаимодействия внутри этапа, оценки удовлетворённости и участвующие роли |
| num (1~5) | Оценка удовлетворённости | 1 балл — минимум, 5 баллов — максимум |
| Me, Cat | Роль | Определяет несколько ролей, участвующих в задаче |
Подробный синтаксис создания диаграмм пользовательского пути Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/user-journey-diagram
Диаграммы пользовательского пути подходят для анализа шагов и впечатлений клиента на пути от знакомства с продуктом до достижения цели, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм пользовательского пути.
Базовый синтаксис
Mermaid использует объявление timeline для создания временной шкалы.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| timeline | Временная шкала | Создание временной шкалы |
| title text | Заголовок | Задаёт заголовок временной шкалы |
| section text | Блок-секция | Разделяет группы временных этапов |
| date : Event1 | Событие | Определяет событие, соответствующее моменту времени |
| : Event2 | Несколько событий | Другие события, соответствующие тому же моменту времени |
| Пробел | Перенос строки | Перенос длинного описания события |
Подробный синтаксис создания временных шкал Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/timeline
Временные шкалы подходят для отображения исторических событий, развития проекта, итераций продукта и хронологической информации, попробуйте бесплатно онлайн-редактор Mermaid для временных шкал.
Базовый синтаксис
Mermaid использует объявление quadrantChart для создания квадрантной диаграммы.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Результат рендеринга
Здесь:
Подробный синтаксис создания квадрантных диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/quadrant-chart
Квадрантные диаграммы подходят для позиционирования продуктов, анализа приоритетов, конкурентного анализа и двумерной классификации, попробуйте бесплатно онлайн-редактор Mermaid для квадрантных диаграмм.
Базовый синтаксис
Канбан-диаграмма Mermaid используется для организации рабочих элементов по статусам задач, например «к выполнению», «в работе» и «выполнено». Типичная структура выглядит так:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Результат рендеринга
Здесь：
Подробный синтаксис создания канбан-диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/kanban
Канбан-диаграммы подходят для управления проектами, отслеживания задач, процессов разработки и управления рабочими процессами, попробуйте бесплатно онлайн-редактор Mermaid для канбан-диаграмм.
Базовый синтаксис
Диаграмма требований позволяет показать связи между требованиями, функциями и элементами системы, Mermaid использует объявление requirementDiagram для создания диаграммы требований.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| requirementDiagram | Диаграмма требований | Создание диаграммы требований |
| Requirement name { } | Требование | Определяет базовое требование |
| functionalRequirement name { } | Функция | Определяет функциональное требование |
| interfaceRequirement name { } | Интерфейс | Определяет требование к интерфейсу |
| performanceRequirement name { } | Производительность | Определяет требование к производительности |
| physicalRequirement name { } | Физический | Определяет физическое требование |
| element name {type: name docRef: name} | Элемент | Определяет сущностные элементы, такие как система, компонент или тест |
| X - satisfies -> Y | Пунктирная стрелка | Сущность удовлетворяет соответствующему требованию |
| X - contains -> Y | Сплошная линия с круглым концом-крестом в начале | Одно требование содержит другое |
| X - derives -> Y | Пунктирная стрелка | Требование является производным от другого требования |
| X - copies -> Y | Пунктирная стрелка | Требование копирует другое требование |
| X - traces -> Y | Пунктирная стрелка | Двусторонняя трассируемая связь требований |
Подробный синтаксис создания диаграммы требований Mermaid описан на следующей странице: https://www.processon.io/ru/mermaid/requirement-diagram
Диаграммы требований подходят для анализа требований к продукту, системной инженерии и трассировки требований, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм требований.
Базовый синтаксис
Mermaid использует объявление pie для создания круговой диаграммы.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Результат рендеринга
Здесь:
Подробный синтаксис создания круговых диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/pie-chart
Круговые диаграммы подходят для отображения пропорций и состава, попробуйте бесплатно онлайн-редактор Mermaid для круговых диаграмм.
Базовый синтаксис
Диаграмма Санкей в основном используется для отображения потоков трафика, ресурсов, средств или данных между разными узлами, Mermaid использует объявление sankey-beta для создания диаграммы Санкей.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Результат рендеринга
Здесь:
Подробный синтаксис создания диаграмм Санкей Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/sankey-diagram
Диаграмма Санкей — это визуализация, показывающая перетекание значений из одного набора в другой, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм Санкей.
Базовый синтаксис
Mermaid использует объявление xychart-beta для создания XY-диаграммы.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| xychart-beta | XY-диаграмма с координатами | Создание XY-диаграммы с координатами |
| xychart-beta horizontal | Горизонтальная XY-диаграмма | Создание горизонтальной XY-диаграммы |
| title "name" | Заголовок | Задаёт заголовок XY-диаграммы |
| x-axis "axisTitle" [a,b,c] | Ось X | Определяет категории и заголовок горизонтальной оси |
| y-axis "axisTitle" min --> max | Ось Y | Определяет диапазон и заголовок вертикальной оси |
| y-axis "axisTitle" | Ось Y только с заголовком | Задаёт только имя вертикальной оси, диапазон значений подбирается автоматически |
| bar [num1, num2, num3] | Столбчатая диаграмма | Определяет ряд данных для столбчатой диаграммы |
| line [num1, num2, num3] | Линейный график | Определяет ряд данных для линейного графика |
Подробный синтаксис создания XY-диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/xy-chart
XY-диаграммы подходят для отображения изменений данных, сравнения значений и простой визуализации данных, попробуйте бесплатно онлайн-редактор Mermaid для XY-диаграмм.
Базовый синтаксис
Лепестковые диаграммы подходят для сравнения нескольких объектов по нескольким измерениям, например для оценки компетенций, показателей продукта и сравнения вариантов. Mermaid использует radar-beta для создания лепестковой диаграммы.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| radar-beta | Лепестковая диаграмма | Создание лепестковой диаграммы |
| title "name" | Заголовок | Определяет заголовок лепестковой диаграммы сразу после radar-beta |
| title "name" | Заголовок | Определяет заголовок лепестковой диаграммы перед radar-beta, при этом сверху и снизу нужно добавить по 3 дефиса |
| axis id ["axisTitle"] | Ось измерения | Определяет измерения лепестковой диаграммы и их названия |
| curve id ["name"]{[values]} | Кривая данных | Определяет имена рядов данных и значения по каждому измерению |
| max value | Максимальное значение | Задаёт максимальное значение диапазона лепестковой диаграммы |
| min value | Минимальное значение | Задаёт минимальное значение диапазона лепестковой диаграммы |
Подробный синтаксис создания лепестковых диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/radar-chart
Лепестковые диаграммы особенно полезны разработчикам, аналитикам данных и инженерам, которым нужно наглядно и компактно представить данные в круговой форме, попробуйте бесплатно онлайн-редактор Mermaid для лепестковых диаграмм.
Базовый синтаксис
Mermaid использует объявление gitGraph для создания Git-диаграммы.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Результат рендеринга
Здесь:
Подробный синтаксис создания Git-диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/git-graph
Git-диаграммы подходят для отображения процессов контроля версий: коммитов Git, создания и переключения веток, слияний, попробуйте бесплатно онлайн-редактор Mermaid для Git-диаграмм.
Базовый синтаксис
C4-диаграмма Mermaid используется для моделирования архитектуры ПО и позволяет описывать программные системы, контейнеры, компоненты и связи между ними на разных уровнях.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Результат рендеринга
Здесь:
Часто используемый синтаксис
| Синтаксис | Диаграмма | Значение |
| C4Context | Диаграмма системного контекста | Создание C4-диаграммы системного контекста |
| C4Container | Диаграмма контейнеров | Создание C4-диаграммы контейнеров |
| C4Component | Диаграмма компонентов | Создание C4-диаграммы компонентов |
| C4Dynamic | Диаграмма динамического взаимодействия | Создание C4-диаграммы динамического взаимодействия |
| C4Deployment | Диаграмма развёртывания | Создание C4-диаграммы развёртывания |
| title | Заголовок | Задаёт заголовок C4-диаграммы |
| Person(alias, "label", "description") | Человек | Обозначает пользователя или роль, использующую систему |
| Person_Ext(alias, "label", "description") | Внешний человек | Обозначает людей или организационные роли вне системы, участвующие во взаимодействии |
| System(alias, "label", "description") | Узел системы | Обозначает программную систему, которую нужно проанализировать |
| System_Ext(alias, "label", "description") | Узел внешней системы | Обозначает сторонний сервис или внешнюю программную систему, от которой зависит система |
| System_Boundary(alias, "label") | Граница системы | Обозначает границу области системы |
| Container(alias, "label", "technology") | Контейнер | Обозначает независимо работающий программный модуль внутри системы |
| Container_Boundary(alias, "label") | Граница контейнера | Обозначает границы одного контейнера или сервиса |
Подробный синтаксис создания C4-диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/c4-diagram
C4-диаграммы подходят для проектирования архитектуры ПО, системного анализа и технической документации, попробуйте бесплатно онлайн-редактор Mermaid для C4-диаграмм.
Базовый синтаксис
Mermaid использует объявление architecture-beta для создания диаграммы архитектуры.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Результат рендеринга
Здесь:
Подробный синтаксис создания диаграмм архитектуры Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/architecture-diagram
Диаграммы архитектуры подходят для отображения серверов, баз данных, облачных сервисов, прикладных сервисов и связей между разными компонентами системы, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм архитектуры.
Базовый синтаксис
Блочная диаграмма описывает структуру системы в основном через модули и связи между ними, Mermaid использует объявление block-beta для создания блочной диаграммы.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Результат рендеринга
Здесь:
Подробный синтаксис создания блочных диаграмм Mermaid смотрите на странице: https://www.processon.io/ru/mermaid/block-diagram
Блочные диаграммы подходят для системных модулей, функциональной структуры, технической архитектуры и связей компонентов, попробуйте бесплатно онлайн-редактор Mermaid для блочных диаграмм.
Базовый синтаксис
Диаграмма пакетов в основном используется для отображения полей и их длины в сетевых пакетах или структурах данных протоколов, Mermaid использует объявление packet-beta для создания диаграммы пакетов.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Результат рендеринга
Здесь:
Диаграммы пакетов подходят для сетевых протоколов, структуры пакетов и документов с техническими спецификациями, попробуйте бесплатно онлайн-редактор Mermaid для диаграмм пакетов.
Незнание синтаксиса Mermaid не означает, что нельзя с помощью Mermaid создавать диаграммы, для этого есть несколько способов:
Бесплатно использовать шаблоны Mermaid
Сначала выберите шаблон, близкий к вашей задаче, а затем измените в нём узлы, текст и связи. Этот способ подходит пользователям, которые работают с Mermaid впервые.
Генерация кода Mermaid с помощью ИИ
Можно просто описать нужную диаграмму естественным языком, например:
Создать процесс обработки заказов в интернет-магазине, включая оформление заказа, оплату, проверку складских запасов, отправку и завершение заказа.
ИИ может сгенерировать код Mermaid по описанию, а затем доработать его с учётом фактических требований.
Проверка и исправление кода с помощью ИИ
Если в коде Mermaid возникла синтаксическая ошибка, можно попросить ИИ помочь найти проблему и исправить код.
Генерация кода по изображению
Для уже существующих блок-схем, диаграмм архитектуры или других структурированных диаграмм можно попробовать сгенерировать код Mermaid по изображению, а затем продолжить редактирование.
Онлайн-редактор Mermaid обычно должен решать три ключевые задачи: написание кода, предварительный просмотр диаграммы и экспорт результата. Кроме того, шаблоны и ИИ тоже снижают порог входа в Mermaid.
На примере ProcessOn Mermaid онлайн-редактора можно прямо в браузере:
Поэтому пользователям, которым часто нужно создавать диаграммы Mermaid, онлайн-редактор ProcessOn Mermaid позволяет объединить написание кода Mermaid, создание диаграмм, последующее редактирование и изменение, экспорт и
публикацию в единой рабочей среде.
От блок-схем, диаграмм последовательности и диаграмм классов Mermaid до диаграмм Ганта, интеллект-карт, квадрантных диаграмм, диаграмм Санкей, Git-диаграмм, C4-диаграмм и диаграмм архитектуры — всё это можно создавать с помощью синтаксиса Mermaid и редактировать.
Скорее воспользуйтесь онлайн-редактором Mermaid, пишите код Mermaid онлайн и создавайте диаграммы!
Сложно ли выучить синтаксис Mermaid?
Базовый синтаксис Mermaid довольно прост: для большинства диаграмм достаточно освоить объявление диаграммы, узлы, линии связи и текст. Например, sequenceDiagram используется для объявления диаграммы последовательности, а flowchart — для блок-схемы. Правила синтаксиса разных типов диаграмм различаются, а для сложных диаграмм нужно дополнительно изучить соответствующие параметры и настройки.
Почему диаграмма не создаётся, если код Mermaid написан с ошибкой?
Mermaid довольно чувствителен к структуре синтаксиса. Типичные причины: ошибка в объявлении диаграммы, неполный синтаксис узла или линии связи, неправильная обработка отступов или специальных символов, а также использование синтаксиса, не поддерживаемого текущей версией Mermaid.
Чем Mermaid отличается от традиционных программ для рисования?
Mermaid описывает диаграмму в основном текстовым кодом, тогда как традиционные программы для рисования обычно создают диаграммы перетаскиванием фигур и линий связи и настройкой стилей.
Можно ли сохранять и повторно использовать диаграммы Mermaid?
Да. Основное содержимое диаграммы Mermaid — это текстовый код, поэтому код можно сохранить в Markdown, файл с кодом или другой документ с поддержкой Mermaid и при необходимости снова отрендерить.
Это ещё одно важное отличие Mermaid от диаграмм в виде обычных изображений: изображение хранит только конечный результат, а код Mermaid сохраняет и информацию о структуре диаграммы.
Как Mermaid связан с Markdown?
Mermaid часто используют вместе с Markdown, но это не один и тот же синтаксис.
Markdown в основном используется для написания структурированного текста, а Mermaid — для создания диаграмм с помощью кода. В Markdown-редакторах с поддержкой Mermaid можно встроить код Mermaid в документ Markdown, чтобы диаграмма и текстовые пояснения находились в одном документе.
Следуя уроку, чтобы попробовать
Бесплатно использовать ProcessOn
