Mermaid diagram
ER Diagram — free online editor
Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.
What is a Mermaid er diagram?
Entity-relationship diagrams are the standard way to document relational database schemas before (or while) writing migrations. Mermaid renders each entity as a table with typed columns and PK/FK markers, and uses crow's-foot notation for cardinality between entities.
When to use it
- ▸Design a new database schema
- ▸Document an existing schema for onboarding
- ▸Plan migrations and refactors
- ▸Discuss schema changes in a PR review
Syntax in one paragraph
Entity block: `USER { int id PK ; string name }`. Cardinality: `||--o{` (1 to 0..N), `||--|{` (1 to 1..N), `}o--o{` (N to N), `||--||` (exactly one).
Example: Customer → Order → Product schema
erDiagram
CUSTOMER {
int id PK
string name
string email
date created_at
}
ORDER {
int id PK
int customer_id FK
decimal total
string status
}
PRODUCT {
int id PK
string name
decimal price
}
ORDER_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "included in"More Mermaid diagrams
Flowchart
A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.
Sequence Diagram
Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.
Class Diagram
Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.
State Diagram
Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.
Gantt Chart
Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.
Pie Chart
Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.
Git Graph
Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.
Mindmap
Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.
Timeline
Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.
Kanban Board
Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.
Full Mermaid editor →
All 11+ diagram templates, live preview, themes