Mermaid Flowchart Basics — Syntax, Nodes, and Arrows

What is a Mermaid Flowchart?

A flowchart is the most commonly used Mermaid diagram type. It represents processes, decision trees, and workflows using nodes (shapes) connected by edges (arrows). Mermaid makes creating flowcharts as simple as writing a few lines of text.

Direction Keywords

Every flowchart starts with a direction keyword that controls the layout:

Keyword	Direction
TB or TD	Top to Bottom
BT	Bottom to Top
LR	Left to Right
RL	Right to Left

Node Shapes

Mermaid supports several node shapes, each with its own bracket syntax:

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C -->|Yes| D[[Subroutine]]
    C -->|No| E[(Database)]
    D --> F((Circle))

• [text] — Rectangle (process step)
• (text) — Rounded rectangle (terminal/start/end)
• {text} — Diamond (decision)
• [[text]] — Subroutine
• [(text)] — Cylinder (database)
• ((text)) — Circle

Arrow Types

Edges connect nodes and can be styled in different ways:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F

• --> solid arrow
• --- solid line (no arrow)
• -.-> dotted arrow
• ==> thick arrow
• -->|text| labeled arrow

A Complete Example

flowchart TD
    Start([Start]) --> Input[/Get user input/]
    Input --> Validate{Is input valid?}
    Validate -->|Yes| Process[Process data]
    Validate -->|No| Error[Show error message]
    Error --> Input
    Process --> Output[/Display result/]
    Output --> End([End])

This example demonstrates a typical form validation flow using multiple node shapes and labeled decision branches. The parallelogram shape (/text/) is used for input/output operations.