Mermaid схемы
Диаграммы Mermaid
Блок-схема (Graph/Flowchart) - graph TD;
- Результат
- Markdown
Используется для отображения процессов, алгоритмов и потоков работы. Применение:
- Алгоритмы программ
- Бизнес-процессы
- Процессы принятия решений
- Рабочие потоки
graph TD;
A[Start] --> B{Condition};
B -->|Yes| C[Action 1];
B -->|No| D[Action 2];
C --> E[End];
D --> E;
Диаграмма последовательности (Sequence Diagram) - sequenceDiagram
- Результат
- Markdown
Показывает взаимодействие между различными участниками во времени. Применение:
- API взаимодействия
- Протоколы связи
- Обмен сообщениями
- User flow
sequenceDiagram
participant Client
participant Server
Client->>Server: Data Request
Server-->>Client: Data Response
Диаграмма классов (Class Diagram) - classDiagram
- Результат
- Markdown
Отображает структуру классов, их атрибуты, методы и отношения между ними. Применение:
- UML диаграммы
- Архитектура программ
- Объектные модели
- Структуры данных
classDiagram
class Animal {
+name: string
+age: number
+makeSound()
}
class Dog {
+breed: string
+bark()
}
class Cat {
+furColor: string
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
Круговая диаграмма (Pie Chart) - pie title
- Результат
- Markdown
Используется для визуализации пропорций и процентных соотношений. Применение:
- Статистика
- Распределение ресурсов
- Анализ данных
- Метрики проекта
pie title Task Distribution
"Done" : 42.96
"In Progress" : 26.42
"Planned" : 30.62
Диаграмма состояний (State Diagram) - stateDiagram-v2
- Результат
- Markdown
Используется для отображения состояний системы и переходов между ними.
Применение:
- Жизненный цикл заказа
- Статусы задач
- Конечные автоматы
- Рабочие процессы
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Start
Processing --> Done: Success
Processing --> Error: Fail
Error --> Idle: Retry
Done --> [*]
Диаграмма отношений (Entity Relationship) - erDiagram
- Результат
- Markdown
Отображает структуру базы данных и связи между таблицами.
Применение:
- Проектирование баз данных
- Документирование структуры данных
- Связи между сущностями
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
CUSTOMER {
int id
string name
string email
}
ORDER {
int id
date created_at
string status
}
Диаграмма Ганта (Gantt Chart) - gantt
- Результат
- Markdown
Визуализирует график проекта и зависимости между задачами.
Применение:
- Планирование проектов
- Отслеживание прогресса
- Распределение ресурсов
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 5d
section Development
Coding :a3, after a2, 10d
Testing :a4, after a3, 5d
section Release
Deployment :a5, after a4, 2d
Диаграмма путешествия пользователя (User Journey) - journey
- Результат
- Markdown
Показывает опыт взаимодействия пользователя с системой.
Применение:
- UX/UI дизайн
- Анализ пользовательского опыта
- Оптимизация процессов
- Исследование поведения пользователей
journey
title User Shopping Experience
section Browse
Find Product: 5: User
View Details: 4: User
section Purchase
Add to Cart: 5: User
Checkout: 3: User
Payment: 3: User
section Post-Purchase
Order Confirmation: 5: User
Delivery: 4: User