Шпаргалка по Mermaid
Полный краткий справочник по синтаксису всех типов диаграмм Mermaid.js. Добавьте эту страницу в закладки для быстрого доступа к любому типу диаграмм.
Синтаксис блок-схем
Визуализируйте процессы, рабочие потоки и алгоритмы с помощью узлов и направленных стрелок. Идеально для бизнес-процессов и деревьев решений.
graph TD
A[Start] --> B[End]graph TD
A{Decision} -->|Yes| B[OK]
A -->|No| C[Cancel]graph LR
subgraph Group
A --> B
endgraph TD
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C --> D((Circle))
C --> E([Stadium])Синтаксис диаграмм последовательности
Документируйте взаимодействия между различными участниками или системами во времени. Идеально для документации API и проектирования систем.
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: HisequenceDiagram
loop Every minute
Alice->>Bob: Ping
endsequenceDiagram
alt Success
A->>B: 200 OK
else Error
A->>B: 500 Error
endsequenceDiagram
Alice->>+Bob: Request
Bob-->>-Alice: ResponseСинтаксис диаграмм классов
Моделируйте объектно-ориентированные системы с классами, атрибутами и связями. Необходимы для планирования архитектуры ПО.
classDiagram
class Animal {
+String name
+makeSound()
}classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal : +String nameclassDiagram
Customer "1" --> "*" OrderСинтаксис диаграмм состояний
Отображайте переходы состояний в системах или приложениях. Отлично подходят для моделирования жизненных циклов и рабочих процессов.
stateDiagram-v2
[*] --> Active
Active --> [*]stateDiagram-v2
Idle --> Running: start
Running --> Idle: stopstateDiagram-v2
state Active {
[*] --> Working
Working --> Paused
}Синтаксис диаграмм Ганта
Планируйте и отслеживайте сроки проектов с задачами и зависимостями. Идеально для управления проектами и составления расписаний.
gantt
title Project
dateFormat YYYY-MM-DD
section Phase 1
Task A :a1, 2024-01-01, 30d
Task B :after a1, 20dgantt
Task Done :done, d1, 2024-01-01, 10d
Task Active :active, 2024-01-11, 10d
Task Crit :crit, 2024-01-21, 10dСинтаксис ER-диаграмм
Проектируйте схемы баз данных с сущностями и связями. Идеально для моделирования и документирования баз данных.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containserDiagram
CUSTOMER {
int id PK
string name
string email
}Синтаксис карт пути
Отображайте пользовательский опыт и взаимодействия в различных точках контакта. Отлично подходит для UX-дизайна и картирования клиентского пути.
journey
title User Flow
section Login
Visit site: 5: User
Enter credentials: 3: User
Dashboard: 4: Userjourney
title New User Onboarding
section Sign up
Open homepage: 5: Visitor
Create account: 3: Visitor
Verify email: 2: Visitor
section First diagram
Choose template: 4: User
Edit code: 5: User
Export PNG: 5: Userjourney
title Checkout Flow
section Browse
Search product: 4: Customer
View details: 5: Customer
section Purchase
Add to cart: 5: Customer
Pay: 3: Customer, Stripe
Confirm order: 5: Customer, StripeСинтаксис Git-графов
Визуализируйте стратегии ветвления и историю коммитов в Git. Полезно для объяснения рабочих процессов системы контроля версий.
gitGraph
commit
branch develop
commit
checkout main
merge developgitGraph
commit
branch feature
commit
commit
checkout main
merge feature
commitСинтаксис ментальных карт
Организуйте идеи, проводите мозговые штурмы и создавайте иерархические визуальные структуры. Идеально для планирования и картирования знаний.
mindmap
root((Central))
Topic A
Detail 1
Detail 2
Topic B
Detail 3mindmap
root((Launch Plan))
Engineering
Backend API
Frontend UI
Testing
Marketing
Landing page
Social media
Operations
Support docs
Pricingmindmap
root((Mermaid))
::icon(fa fa-book)
Origins
Long history
Popularisation
[Square]
(Rounded)
((Circle))
{{Hexagon}}Синтаксис круговых диаграмм
Отображайте пропорциональные распределения данных с помощью круговых диаграмм. Идеально для отображения процентов и долей рынка.
pie title Budget
"Engineering" : 45
"Marketing" : 25
"Operations" : 30pie showData title Browser Share 2026
"Chrome" : 64.2
"Safari" : 18.5
"Edge" : 5.3
"Firefox" : 3.1
"Other" : 8.9pie title How I Spend My Day
"Sleep" : 8
"Work" : 9
"Meals" : 2
"Exercise" : 1
"Free time" : 4Синтаксис таймлайнов
Визуализируйте хронологические события и вехи вдоль временной оси. Отлично подходят для истории проектов и дорожных карт.
timeline
title History
2020 : Event A
2021 : Event B
: Event C
2022 : Event Dtimeline
title Product Roadmap
section 2024
Q1 : Beta launch
Q2 : Public release
section 2025
Q1 : Mobile apps
Q2 : Enterprise plan
Q3 : API v2
section 2026
Q1 : AI assistant
Q2 : Marketplacetimeline
title Mermaid Study Plan
Week 1 : Read syntax docs
: Try flowcharts
Week 2 : Sequence diagrams
: Class diagrams
Week 3 : Gantt and timeline
Week 4 : Build a real projectСинтаксис канбан
Организуйте задачи в колонки, представляющие этапы рабочего процесса. Идеально для гибкого управления проектами и отслеживания задач.
kanban
Todo
Task 1
Task 2
In Progress
Task 3
Done
Task 4kanban
Backlog
[Auth flow]@{ assigned: 'alice', priority: 'High' }
[Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
In Progress
[Payments]@{ assigned: 'carol', priority: 'High' }
Review
[Settings page]@{ assigned: 'dan', priority: 'Medium' }
Done
[Landing redesign]@{ assigned: 'erin', priority: 'High' }kanban
Reported
Login 500 error
Slow PDF export
Triaged
Mobile menu glitch
Fixing
Dark mode contrast
Verified
Empty state typoСинтаксис квадрантных диаграмм
Размещайте элементы на двухосевой сетке для сравнения и приоритизации. Идеально для приоритизации функций и стратегического анализа.
quadrantChart
title Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Plan
quadrant-2 Do First
quadrant-3 Delegate
quadrant-4 Eliminate
Item A: [0.3, 0.8]
Item B: [0.7, 0.2]quadrantChart
title Reach and Engagement
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 Stars
quadrant-2 Hidden Gems
quadrant-3 Filler
quadrant-4 Volume Plays
Campaign A: [0.7, 0.8]
Campaign B: [0.3, 0.7]
Campaign C: [0.2, 0.2]
Campaign D: [0.8, 0.3]quadrantChart
title Tech Choices
x-axis Hard --> Easy
y-axis Slow --> Fast
quadrant-1 Adopt
quadrant-2 Trial
quadrant-3 Hold
quadrant-4 Assess
Vue: [0.8, 0.7] radius: 12, color: #41b883
React: [0.7, 0.7] radius: 12, color: #61dafb
Svelte: [0.6, 0.85] radius: 10, color: #ff3e00Синтаксис диаграмм Санкей
Визуализируйте потоки между узлами с пропорциональными стрелками. Идеально для потоков энергии, распределения бюджета и воронок конверсии.
sankey-beta
Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8sankey-beta
Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550sankey-beta
Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20Синтаксис XY-диаграмм
Создавайте столбчатые и линейные графики с настраиваемыми осями. Идеально для визуализации данных и анализа трендов.
xychart-beta
title "Sales"
x-axis [Jan, Feb, Mar, Apr]
y-axis "Revenue" 0 --> 100
bar [30, 50, 70, 90]
line [30, 50, 70, 90]xychart-beta
title "Quarterly Revenue (USD k)"
x-axis ["Q1", "Q2", "Q3", "Q4"]
y-axis "Revenue" 0 --> 250
bar [120, 145, 180, 220]xychart-beta
title "Active Users"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Users (k)" 0 --> 50
line [10, 14, 18, 25, 33, 42]
line [8, 11, 15, 20, 24, 28]xychart-beta horizontal
title "Programming Language Popularity"
x-axis "Share (%)" 0 --> 30
y-axis [JavaScript, Python, Java, C#, Go]
bar [25, 22, 14, 8, 5]Синтаксис блочных диаграмм
Создавайте структурированные макеты с блоками, расположенными в колонках и строках. Отлично для системной архитектуры и обзоров компонентов.
block-beta
columns 3
a["A"]:3
b["B"] c["C"] d["D"]block-beta
columns 4
a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
a --> b
b --> c
c --> dblock-beta
columns 3
Web["Web App"]:3
space:3
API["REST API"] Auth["Auth Service"] DB[("Postgres")]
Web --> API
API --> Auth
API --> DBСинтаксис архитектурных диаграмм
Проектируйте облачную и системную архитектуру с иконками сервисов и соединениями. Идеально для документации инфраструктуры.
architecture-beta
group api(cloud)[API]
service web(internet)[Web] in api
service db(database)[DB]
web:R --> L:dbarchitecture-beta
group public(cloud)[Public Network]
group private(cloud)[Private VPC]
service cdn(internet)[CDN] in public
service lb(server)[Load Balancer] in public
service web(server)[Web Tier] in private
service api(server)[API Tier] in private
service db(database)[Postgres] in private
service cache(disk)[Redis] in private
cdn:R --> L:lb
lb:R --> L:web
web:R --> L:api
api:R --> L:db
api:B --> T:cachearchitecture-beta
service gw(internet)[API Gateway]
service queue(server)[Event Bus]
service orders(server)[Orders]
service billing(server)[Billing]
service notify(server)[Notifications]
service db(database)[Shared DB]
gw:R --> L:orders
orders:R --> L:queue
queue:T --> B:billing
queue:B --> T:notify
orders:B --> T:dbСинтаксис диаграмм пакетов
Визуализируйте структуры сетевых протоколов с побитовой раскладкой полей. Необходимы для документации сетевых протоколов.
packet-beta
0-15: "Source Port"
16-31: "Dest Port"
32-63: "Sequence Number"packet-beta
title TCP Header
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106-111: "Flags"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"packet-beta
title IPv4 Header
0-3: "Version"
4-7: "IHL"
8-15: "Type of Service"
16-31: "Total Length"
32-47: "Identification"
48-50: "Flags"
51-63: "Fragment Offset"
64-71: "TTL"
72-79: "Protocol"
80-95: "Header Checksum"
96-127: "Source IP Address"
128-159: "Destination IP Address"