DevToolsmith

Mermaid ER Diagram Syntax

An entity relationship (ER) diagram shows database tables, their columns and how they relate, using crow’s foot notation for cardinality. Edit the example below and the diagram redraws as you type; every example on this page can be opened in the editor.

Runs 100% in your browser — nothing is uploaded

Mermaid code
Tip: drop a file here471 chars · 471 bytes · 24 lines
DiagramRendering…

Loading Mermaid…

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

SyntaxMeaning
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

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.