Mermaid diagram templates

Starting points for the diagrams people draw most. Change the code and the diagram redraws, then copy it into GitHub or any Markdown that supports Mermaid.

Runs in your browser. Nothing you paste or open is sent to a server.

Flowchart

Steps and decisions in a process. Arrows can carry labels such as “Yes” and “No”, and node shapes mark the start, input and branches.

Code

flowchart TD
    start([Start]) --> input[/Receive input/]
    input --> check{Is the input valid?}
    check -->|Yes| process[Process it]
    check -->|No| error[Show an error]
    error --> input
    process --> done([End])

Sequence diagram

Messages between people and systems over time, such as a login or an API call. Dashed arrows are replies.

Code

sequenceDiagram
    actor user as User
    participant app as App
    participant api as Server
    user->>app: Click the button
    app->>api: Request data
    api-->>app: Return data
    app-->>user: Show the result

Gantt chart

A schedule of tasks with their dates and dependencies. “after” starts a task when another ends, so the plan shifts with it.

Code

gantt
    title Project plan
    dateFormat YYYY-MM-DD
    section Design
    Define requirements :design1, 2026-10-30, 5d
    Design :design2, after design1, 5d
    section Development
    Build :dev1, after design2, 10d
    Test :dev2, after dev1, 5d
    section Release
    Release :milestone, after dev2, 0d

Entity relationship diagram

Tables, their columns and how they relate, for designing a database. The line ends show one-to-many and other cardinalities.

Code

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "is ordered in"
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date ordered_at
    }
    ORDER_ITEM {
        int order_id FK
        int product_id FK
        int quantity
    }
    PRODUCT {
        int id PK
        string name
        int price
    }

State diagram

The states something moves through and what moves it, such as an order from received to shipped.

Code

stateDiagram-v2
    state "Draft" as draft
    state "In review" as review
    state "Published" as published
    state "Archived" as archived
    [*] --> draft
    draft --> review : Submit
    review --> draft : Request changes
    review --> published : Approve
    published --> archived : Unpublish
    archived --> [*]

Questions

Where can I use these diagrams?

Anywhere that renders Mermaid in Markdown: GitHub, GitLab, Obsidian and the Richdown Web editor among them. Put the code in a ```mermaid code block.

Why is the Gantt chart dated today?

The template starts on the day you open this page, so the chart lands somewhere useful. Change the date in the first task and the rest follow, because each starts after the one before.

Do my edits get saved?

No. Edits on this page stay until you leave it. Open the diagram in Richdown Web to keep it: the editor saves drafts in your browser.

Can I edit a diagram without writing code?

In the Richdown Web editor, the diagram editor lets you rename nodes and change shapes on the drawing itself, and the code follows.

More tools

```
<h2>Minutes</h2>
<p><b>Decision:</b> ship</p>
```
```
## Minutes

**Decision:** ship
```
HTML to Markdown Turn what you copy from a web page, Word or Google Docs into Markdown.

CSV to Markdown table Turn CSV or cells from Excel and Google Sheets into an aligned table.

#Mermaid diagram templates

Flowchart

Code

Sequence diagram

Code

Gantt chart

Code

Entity relationship diagram

Code

State diagram

Code

Questions

More tools

Mermaid diagram templates