What a Mermaid er diagram is for
An entity relationship (ER) diagram shows database tables, their columns and how they relate, using crow’s foot notation for cardinality. Mermaid draws it from plain text, so it can live next to your migrations and render on GitHub. To draw one from existing CREATE TABLE statements, use the SQL to Mermaid converter.
ER Diagram syntax
| Syntax | Meaning |
|---|---|
A ||--o{ B : label |
One A has zero or more B |
|o / o| |
Zero or one |
|| |
Exactly one |
}o / o{ |
Zero or more |
}| / |{ |
One or more |
A ||--|| B : label |
Identifying relationship (solid line) |
A ||..o{ B : label |
Non-identifying relationship (dashed line) |
TABLE { type name } |
Entity with attributes |
int id PK |
Key markers: PK, FK, UK; combine as PK, FK |
string email "login email" |
Attribute with a comment |
TABLE["Display name"] |
Alias shown instead of the entity name |
Basic example
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "ordered in"
CUSTOMER {
int id PK
string email UK
string name
}
ORDER {
int id PK
int customer_id FK
date created_at
}
LINE_ITEM {
int order_id FK
int product_id FK
int quantity
}
PRODUCT {
int id PK
string sku UK
decimal price
}
Open this example in the Mermaid editor
More er diagram examples
Blog schema
A many-to-many between posts and tags goes through a join table, drawn as two one-to-many relationships.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : writes
POST ||--o{ POST_TAG : ""
TAG ||--o{ POST_TAG : ""
USER {
bigint id PK
varchar email UK
timestamp created_at
}
POST {
bigint id PK
bigint author_id FK
varchar title
text body
}
COMMENT {
bigint id PK
bigint post_id FK
bigint user_id FK
text body
}
TAG {
int id PK
varchar name UK
}
POST_TAG {
bigint post_id PK, FK
int tag_id PK, FK
}
Open “Blog schema” in the editor
Common mistakes
- Read the cardinality markers from each side: in A ||--o{ B, the marker next to B (o{) says how many B each A has.
- Attribute types can’t contain spaces: varchar(255) and decimal(10,2) work, decimal(10, 2) doesn’t.
- A relationship label is required; use "" for none.
Use it in Markdown
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "ordered in"
CUSTOMER {
int id PK
string email UK
string name
}
ORDER {
int id PK
int customer_id FK
date created_at
}
LINE_ITEM {
int order_id FK
int product_id FK
int quantity
}
PRODUCT {
int id PK
string sku UK
decimal price
}
```
GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.
Other Mermaid diagrams
- Mermaid flowchart syntax
- Mermaid sequence diagram syntax
- Mermaid class diagram syntax
- Mermaid state diagram syntax
- Mermaid gantt chart syntax
- Mermaid pie chart syntax
- Mermaid mindmap syntax
- Mermaid timeline syntax
- Mermaid git graph syntax
- Mermaid user journey syntax
- Mermaid quadrant chart syntax
- Mermaid xy chart syntax
Sources
Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.
Frequently asked questions
How do I start a Mermaid er diagram?
Begin the diagram with the keyword erDiagram on its own line, then add one statement per line. In Markdown, wrap the whole diagram in a fenced code block with the language mermaid so GitHub, GitLab and most docs sites draw it.
How do I export a Mermaid er diagram as an image?
Paste the diagram into the editor on this page and use SVG or PNG above the preview. SVG stays sharp at any size and can be edited further; PNG is exported at twice the screen resolution for slides and documents. Nothing is uploaded.