Mermaid Flowchart Node Shapes Guide: Rectangles, Diamonds, Rounded, Circles & More

# Mermaid Flowchart Node Shapes Guide: Every Shape with Copy-Paste Syntax

Mermaid flowcharts support over a dozen node shapes, each created with different bracket syntax. If you've only used square brackets and curly braces, you're missing half the vocabulary.

This guide lists every Mermaid flowchart node shape, its syntax, and when to use it.

Quick Reference Table

Every Shape in One Mermaid Diagram

Paste this into any Mermaid editor to see all node shapes side by side:

flowchart LR
    A[Rectangle]
    B(Rounded rectangle)
    C([Stadium / pill])
    D[[Subroutine]]
    E[(Cylindrical / database)]
    F((Circle))
    G(((Double circle)))
    H>Asymmetric]
    I{Diamond / decision}
    J{{Hexagon}}
    K[/Parallelogram/]
    L[\Parallelogram alt\]
    M[/Trapezoid\]
    N[\Trapezoid alt/]

Rectangle — The Default Shape

flowchart LR
    A[Process step]

Use for any generic process step. It is the default and most common shape in Mermaid flowcharts. No special meaning — just a box.

Rounded Rectangle — Start and End Points

flowchart TD
    A(Rounded)
    B(Rounded corners)

Use for start and end nodes in your flow. The rounded corners signal "entry point" and "exit point" visually. Many flowchart conventions reserve this shape for terminals.

Stadium / Pill Shape — Terminal Nodes

flowchart TD
    A([Pill shape])
    B([Start here])

The stadium shape is even more rounded than the rounded rectangle. Use it for strongly emphasized terminal nodes or inputs that start a flow.

Subroutine — Function Calls and Subprocesses

flowchart TD
    A[[Process payment]]
    B[[Send email]]

The double-bordered rectangle is the standard UML subroutine symbol. Use it when a step calls a predefined subprocess, function, or external module.

Cylindrical — Databases and Data Stores

flowchart TD
    A[(User database)]
    B[(Redis cache)]

The cylinder shape is universally recognized as a database. Use it for any data store: SQL databases, caches, object storage, or file systems.

Circle — Connectors and Simple States

flowchart LR
    A((Start))
    B((A))
    C((B))

Circles work well as small connectors or state labels. They don't hold much text, so keep labels short.

Double Circle — End States and Special Markers

flowchart TD
    A(((Done)))
    B(((Final)))

The double circle is rarer. Use it when you need a visually distinct end state or a special marker that stands out from regular circles.

Asymmetric — Alternative Shape for Variety

flowchart LR
    A>Asymmetric node]
    B>Another one]

The asymmetric shape has one flat side and one pointed side. Some flowchart conventions use it for manual input or an alternative to rectangles.

Diamond / Rhombus — Decisions and Conditions

flowchart TD
    A{Is valid?}
    A -->|Yes| B[Process]
    A -->|No| C[Reject]

The diamond is the standard decision or condition node. Every yes/no question, boolean check, or conditional branch should use a diamond. Pair it with labeled edges to show the paths.

Hexagon — Preparation and Setup Steps

flowchart TD
    A{{Initialize}}
    B{{Load config}}

The hexagon is less common but useful for setup or initialization steps that are distinct from regular processes. Some teams use it for preparation phases in deployment flows.

Parallelogram — Input and Output

flowchart TD
    A[/User input/]
    B[/API response/]

The parallelogram (slanted sides) is the standard symbol for input/output operations. Use it for user inputs, API responses, file reads, or any data entering or leaving your process.

Parallelogram Alt — Reverse Slant

flowchart TD
    A[\File output\]
    B[\Log entry\]

The reverse-slant parallelogram gives the same meaning as input/output but with the slant going the other direction. Some conventions use one for input and the other for output.

Trapezoid — Manual Operations

flowchart TD
    A[/Manual step\]
    B[/Human review\]

The trapezoid (one flat side, one slanted side) is the standard symbol for a manual operation. Use it when a human has to do something — approve, review, sign, or enter data.

Trapezoid Alt — Priority or Manual Input

flowchart TD
    A[\Priority step/]
    B[\Manual input/]

The reverse trapezoid can represent manual input or a step that needs priority attention. It is visually distinctive enough to draw the reader's eye.

Styling Node Shapes

All shapes accept Mermaid's classDef styling. Combine shapes with colors to create semantic meaning:

flowchart TD
    Start([Start]) --> Decision{Approved?}
    Decision -->|Yes| Process[Process order]
    Decision -->|No| Reject[/Reject and notify/]
    Process --> DB[(Save to DB)]
    DB --> End(((Complete)))

    classDef success fill:#dcfce7,stroke:#16a34a
    classDef fail fill:#fee2e2,stroke:#dc2626
    classDef data fill:#dbeafe,stroke:#2563eb
    class End success
    class Reject fail
    class DB data

Choosing the Right Shape

• Process step → rectangle A[ ]
• Start or end → rounded A( ) or stadium A([ ])
• Decision → diamond A{ }
• Database → cylindrical A[( )]
• Input/output → parallelogram A[/ /]
• Manual operation → trapezoid A[/ \]
• Subprocess → subroutine A[[ ]]
• Setup → hexagon A{{ }}

Pick shapes that match your audience's expectations. If you are writing for engineers, stick to rectangle, diamond, cylinder, and rounded rectangle. If you are writing for business stakeholders, add parallelograms and trapezoids for clarity.

Pro Tip: Mermaid Live Preview

Open MermaidEditor.lol, paste any snippet from this guide, and see shapes render instantly. Experiment with combinations before adding them to your diagrams.