Mermaid Viewer

Guide

How to Create Flowcharts with Mermaid

Flowcharts are one of the most powerful diagram types in Mermaid. Learn the syntax from basic nodes to advanced subgraphs — all rendered instantly in your browser.

1. Choose Your Flow Direction

Start every Mermaid flowchart with a direction declaration:

graph TDTop to Bottom (default)
graph TBTop to Bottom (same as TD)
graph BTBottom to Top
graph LRLeft to Right
graph RLRight to Left

2. Create Nodes

Nodes are the building blocks of your flowchart. The shape determines the meaning:

Example Code

graph TD
    A[Rectangle]
    B{Decision Diamond}
    C(Rounded Pill)
    D((Circle))
    E[[Subroutine]]
A[Label]Rectangle [ ]Process / Action
B{Label}Diamond { }Decision / Condition
C(Label)Pill ( )Routine / Subroutine
D((Label))Circle (( ))Start / End point
E[[Label]]Subroutine [[ ]]Subroutine / Function
F{{Label}}Hexagon ⬡Preparation / Alternate process
G[/Label/]Trapezoid ╱╲Manual operation

3. Connect with Arrows

Arrows define the flow between nodes. Mermaid supports several arrow styles:

Example Code

graph LR
    A --> B       "Normal arrow"
    C -.-> D      "Dotted line"
    E ==> F       "Thick arrow"
    G --- H       "Plain line"
    J --o K       "Circle end"
    L --* M       "Diamond end"
    N -->|label| O  "Arrow with label"

4. Decision Flowchart Example

A classic decision tree showing how flowcharts handle branching logic:

Example Code

Try it live →
graph TD
    Start([Start]) --> IsValid{Is input valid?}
    IsValid -->|Yes| Process[Process Data]
    IsValid -->|No| Error[/Enter valid input/]
    Process --> Save[(Save to database)]
    Save --> Notify[Send notification]
    Notify --> End([End])
    Error --> Start

5. Subgraphs

Group related nodes into visual containers called subgraphs:

Example Code

graph LR
    subgraph Frontend
        A[User Interface]
    end
    subgraph Backend
        B[API Server]
        C[Database]
    end
    A --> B
    B --> C

Pro Tips

  • →Keep labels short — long text makes nodes unwieldy
  • →Use decision diamonds for Yes/No branches
  • →Left-to-right (LR) works best for wide flowcharts
  • →Use subgraphs to group related steps visually
  • →Add labels to arrows with -->|label| for clearer flow
  • →Use C((Circle)) for Start/End points to distinguish from processes

Start creating flowcharts now

No signup required. Just open mermaid.bkkdev.io and start typing.

Open Mermaid Viewer →