Ściągawka Mermaid
Kompletna szybka ściągawka dla całej składni diagramów Mermaid.js. Dodaj tę stronę do zakładek, aby mieć szybki dostęp do każdego typu diagramu.
Składnia schematów blokowych
Wizualizuj procesy, przepływy pracy i algorytmy za pomocą węzłów i strzałek kierunkowych. Idealne do procesów biznesowych i drzew decyzyjnych.
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])Składnia diagramów sekwencji
Dokumentuj interakcje między różnymi aktorami lub systemami w czasie. Idealne do dokumentacji API i projektowania systemów.
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: ResponseSkładnia diagramów klas
Modeluj systemy obiektowe z klasami, atrybutami i relacjami. Niezbędne do planowania architektury oprogramowania.
classDiagram
class Animal {
+String name
+makeSound()
}classDiagram
Animal <|-- Dog
Animal <|-- Cat
Animal : +String nameclassDiagram
Customer "1" --> "*" OrderSkładnia diagramów stanów
Przedstawiaj przejścia stanów w systemach lub aplikacjach. Świetne do modelowania stanów cyklu życia i przepływów pracy.
stateDiagram-v2
[*] --> Active
Active --> [*]stateDiagram-v2
Idle --> Running: start
Running --> Idle: stopstateDiagram-v2
state Active {
[*] --> Working
Working --> Paused
}Składnia wykresów Gantta
Planuj i śledź harmonogramy projektów z zadaniami i zależnościami. Idealne do zarządzania projektami i planowania.
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, 10dSkładnia diagramów ER
Projektuj schematy baz danych z encjami i relacjami. Idealne do modelowania i dokumentowania baz danych.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containserDiagram
CUSTOMER {
int id PK
string name
string email
}Składnia map ścieżki
Mapuj doświadczenia i interakcje użytkowników w punktach styku. Doskonałe do projektowania UX i mapowania ścieżki klienta.
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, StripeSkładnia grafów Git
Wizualizuj strategie rozgałęziania Git i historie commitów. Pomocne przy wyjaśnianiu przepływów pracy kontroli wersji.
gitGraph
commit
branch develop
commit
checkout main
merge developgitGraph
commit
branch feature
commit
commit
checkout main
merge feature
commitSkładnia map myśli
Organizuj pomysły, przeprowadzaj burze mózgów i twórz hierarchiczne struktury wizualne. Idealne do planowania i mapowania wiedzy.
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}}Składnia wykresów kołowych
Wyświetlaj proporcjonalne rozkłady danych za pomocą wykresów kołowych. Idealne do prezentowania procentów i udziałów rynkowych.
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" : 4Składnia osi czasu
Wizualizuj chronologiczne wydarzenia i kamienie milowe na osi czasu. Świetne do historii projektów i map drogowych.
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 projectSkładnia Kanban
Organizuj zadania w kolumnach reprezentujących etapy przepływu pracy. Idealne do zwinnego zarządzania projektami i śledzenia zadań.
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 typoSkładnia wykresów kwadrantowych
Umieszczaj elementy na dwuosiowej siatce w celu porównania i priorytetyzacji. Idealne do priorytetyzacji funkcji i analizy strategicznej.
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: #ff3e00Składnia diagramów Sankeya
Wizualizuj ilości przepływów między węzłami za pomocą proporcjonalnych strzałek. Idealne do przepływów energii, alokacji budżetu i lejków konwersji.
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,20Składnia wykresów XY
Twórz wykresy słupkowe i liniowe z konfigurowalnymi osiami. Idealne do wizualizacji danych i analizy trendów.
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]Składnia diagramów blokowych
Buduj strukturalne układy z blokami rozmieszczonymi w kolumnach i wierszach. Świetne do architektury systemów i przeglądów komponentów.
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 --> DBSkładnia diagramów architektury
Projektuj architekturę chmury i systemów z ikonami usług i połączeniami. Idealne do dokumentacji infrastruktury.
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:dbSkładnia diagramów pakietów
Wizualizuj struktury pakietów protokołów sieciowych z układami pól na poziomie bitów. Niezbędne do dokumentacji protokołów sieciowych.
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"