Mermaid Template Gallery

Overview

A gallery of copy-ready Mermaid diagram templates - flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and pie charts. Each template is a working starting point you can paste into a GitHub/GitLab/Notion document or any markdown renderer with Mermaid support.

It's for developers who want to drop a diagram into a doc without remembering Mermaid syntax from scratch. Reach for it when sketching an architecture overview, illustrating a state machine in a design doc, or visualising a database schema for a teammate's onboarding.

How it works

Mermaid is a text-based diagramming language by Mermaid Chart that compiles to SVG. GitHub renders fenced ```mermaid blocks natively; GitLab, Notion, and many docs platforms do too. The gallery wraps each diagram in a fenced block so paste-and-render works without extra steps.

Each template covers the canonical diagram types from the Mermaid documentation and stays small (under 20 lines) so it's easy to edit. More elaborate diagrams are usually best built incrementally from these starting points.

Examples

• Flowchart:

  flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do thing]
    B -->|No| D[Skip]
  

• Sequence diagram:

  sequenceDiagram
    Client->>Server: GET /resource
    Server->>Database: SELECT
    Database-->>Server: rows
    Server-->>Client: 200 OK
  

• ER diagram:

  erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
  

• Gantt:

  gantt
    title Sprint plan
    section Backend
    API design     :a1, 2026-05-01, 5d
    Implementation :after a1, 10d
  

FAQ

Where does Mermaid render automatically?

GitHub, GitLab, Bitbucket, Notion, GitBook, MkDocs (with the plugin), Docusaurus, and Obsidian. Most modern docs platforms support it natively or via plugin.

Can I change colours?

Mermaid supports themes via a %%{init: ...}%% directive at the top of a diagram. Custom CSS works when embedding via the JS library.

How do I make a diagram clickable?

Use the click <node> "URL" syntax in flowcharts to attach a hyperlink. GitHub Markdown sanitises some click handlers; check your renderer's documentation.

What if my diagram is too wide?

Switch flowchart LR (left-to-right) to flowchart TB (top-to-bottom) for taller layouts. Subgraphs (subgraph name) also help group related nodes.

Try Mermaid Template Gallery