Mermaid 🧜♀️
Sequence diagrams, the only good thing UML brought to software development - HN / 2 / online
Mermaid in Markdown is rendered directly in Forgejo as well as in github/gitea/gitlab - github
# Entity–Relationship ⮺
The symbols describe cardinality:
- || = exactly one
- o| = zero or one
- |{ = one or many
- o{ = zero or many
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
bigint id PK
string name
}
ORDER {
bigint id PK
bigint customer_id FK
}
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
bigint id PK
string name
}
ORDER {
bigint id PK
bigint customer_id FK
}
# Sequence ⮺
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
# Gantt ⮺
gantt
title Product Launch Plan
dateFormat YYYY-MM-DD
section Planning
Market research :done, research, 2024-03-01, 10d
Define requirements :done, reqs, after research, 7d
section Build
Design prototype :active, proto, after reqs, 14d
User testing :testing, after proto, 7d
section Launch
Marketing campaign :marketing, after proto, 14d
Release day :milestone, after testing, 0d
gantt
title Product Launch Plan
dateFormat YYYY-MM-DD
section Planning
Market research :done, research, 2024-03-01, 10d
Define requirements :done, reqs, after research, 7d
section Build
Design prototype :active, proto, after reqs, 14d
User testing :testing, after proto, 7d
section Launch
Marketing campaign :marketing, after proto, 14d
Release day :milestone, after testing, 0d
# Ishikawa ⮺
ishikawa-beta
Late Food Delivery
Process
Orders batched too long
Kitchen queue not prioritized
People
Not enough drivers on shift
New cook still in training
Equipment
Oven capacity too small
Delivery bags lose heat
Environment
Heavy rain
Road construction on main route
Measurement
No alert when prep time exceeds target
ishikawa-beta
Late Food Delivery
Process
Orders batched too long
Kitchen queue not prioritized
People
Not enough drivers on shift
New cook still in training
Equipment
Oven capacity too small
Delivery bags lose heat
Environment
Heavy rain
Road construction on main route
Measurement
No alert when prep time exceeds target
# Packet ⮺
packet
title UDP Packet
+16: "Source Port"
+16: "Destination Port"
+16: "Length"
+16: "Checksum"
64-95: "Data (variable length)"packet title UDP Packet +16: "Source Port" +16: "Destination Port" +16: "Length" +16: "Checksum" 64-95: "Data (variable length)"
# Grammar ⮺
railroad-peg-beta
title Identifiers (keywords excluded)
Identifier <- !Keyword Letter Letter* ;
Keyword <- "if" / "else" / "while" ;
Letter <- "a" / "b" / "c" / "_" ;
railroad-peg-beta
title Identifiers (keywords excluded)
Identifier <- !Keyword Letter Letter* ;
Keyword <- "if" / "else" / "while" ;
Letter <- "a" / "b" / "c" / "_" ;
# Treemap ⮺
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Monthly Budget"
"Housing"
"Rent": 1400
"Utilities": 220
"Internet": 60
"Food"
"Groceries": 480
"Dining out": 180
"Transport"
"Car payment": 320
"Fuel": 140
"Savings"
"Emergency fund": 300
"Retirement": 400
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Monthly Budget"
"Housing"
"Rent": 1400
"Utilities": 220
"Internet": 60
"Food"
"Groceries": 480
"Dining out": 180
"Transport"
"Car payment": 320
"Fuel": 140
"Savings"
"Emergency fund": 300
"Retirement": 400
# Sankey ⮺
sankey-beta
Salary,Budget,3000
Freelance work,Budget,1200
Budget,Rent,1300
Budget,Groceries,600
Budget,Transport,250
Budget,Fun,350
Budget,Savings,1700sankey-beta Salary,Budget,3000 Freelance work,Budget,1200 Budget,Rent,1300 Budget,Groceries,600 Budget,Transport,250 Budget,Fun,350 Budget,Savings,1700
# Kanban ⮺
---
config:
kanban:
ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
---
kanban
todo[Todo]
docs[Create documentation]
blog[Write blog post about the new diagram]@{ priority: 'Low' }
inProgress[In progress]
renderer[Improve renderer for edge cases]@{ assigned: 'knsv', priority: 'High' }
readyForTest[Ready for test]
parserTests[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
done[Done]
grammar[Design grammar]@{ assigned: 'knsv' }
longTitle[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High' }
dbFunction[Update DB function]@{ ticket: 2037, assigned: 'knsv', priority: 'High' }
---
config:
kanban:
ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
---
kanban
todo[Todo]
docs[Create documentation]
blog[Write blog post about the new diagram]@{ priority: 'Low' }
inProgress[In progress]
renderer[Improve renderer for edge cases]@{ assigned: 'knsv', priority: 'High' }
readyForTest[Ready for test]
parserTests[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
done[Done]
grammar[Design grammar]@{ assigned: 'knsv' }
longTitle[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High' }
dbFunction[Update DB function]@{ ticket: 2037, assigned: 'knsv', priority: 'High' }
# Git ⮺
gitGraph
commit id: "a3f82c1"
branch develop
checkout develop
commit id: "b7e41d9"
commit id: "c9d52e4"
checkout main
merge develop id: "d4e8f3a"
commit id: "e1b6c90"
branch feature
checkout feature
commit id: "f2a8d17"
commit id: "a8c3f54"
checkout main
merge feature id: "b9d7e21"
gitGraph
commit id: "a3f82c1"
branch develop
checkout develop
commit id: "b7e41d9"
commit id: "c9d52e4"
checkout main
merge develop id: "d4e8f3a"
commit id: "e1b6c90"
branch feature
checkout feature
commit id: "f2a8d17"
commit id: "a8c3f54"
checkout main
merge feature id: "b9d7e21"
# see also
- Mermaid Cheat Sheet - already built into Github Markdown [0], where you can include a diagram by just going
mermaid <code> - Jekkyll + Github + Mermaid
Written on February 4, 2023, Last update on October 12, 2024
doc
UML
diagram
markdown
online