Mermaid Flowcharts

Flowcharts are the basic process-modeling diagram in Mermaid.

They are useful for:

workflows
decision trees
pipelines
system processes
simple architecture

Basic Syntax

flowchart LR
    Start --> Process
    Process --> End

Try this code ❯

Directional Options

Mermaid supports direction which diagrams flows.

TD or TB: Top-down / Top-to-Bottom
BT: Bottom-to-Top
LR: Left-to-Right
RL: Right-to-Left

Example

flowchart LR
    Start --> Process
    Process --> End

Try this code ❯

Node Shapes

Mermaid supports several common node shapes.

flowchart TD
    A[Rectangle]
    B(Rounded Rectangle)
    C([Stadium / Pill])
    D[(Database Cylinder)]
    E{Decision Diamond}
    F{{Hexagon}}

Try this code ❯

The brackets determine the visual shape.

Syntax	Resulting Shape
id[Text]	Rectangle (Default)
id(Text)	Round Edges
id([Text])	Stadium/Terminal Shape
id[[Text]]	Subroutine
id[(Text)]	Cylinder / Database
id((Text))	Circle
id>Text]	Asymmetric (Flag)
id{Text}	Rhombus / Decision Box
id{{Text}}	Hexagon
id[/Text/]	Parallelogram

Connecting Nodes

The basic directed connection is:

A --> B

Example:

flowchart LR
    A[Start] --> B[Process]

Try this code ❯

A --> B : Link with arrow
A --- B : Plain line link
A -- Text --> B : Link with arrow and central text
A -.-> B : Dotted arrow link
A ==> B : Thick arrow link

Labeled Connections

Use |text| to label an edge.

flowchart LR
    A[Start] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Reject]

Try this code ❯

Different Edge Styles

Examples include:

flowchart LR
    A --> B
    B -.-> C
    C ==> D
    D --- E

Try this code ❯

The styles can represent different types of relationships or emphasis.

Subgraphs

Subgraphs group related nodes.

flowchart TB
    subgraph Frontend
        A[Web App] --> B[Mobile App]
    end

    subgraph Backend
        C[API Gateway] --> D[(Database)]
    end

    Frontend --> Backend

Try this code ❯

Subgraphs are useful when a system contains logical boundaries.

Styling a Flowchart

A node can be styled directly.

flowchart TD
    A[Critical Error] --> B[System Halt]

    style A fill:#ff0000,stroke:#333,stroke-width:4px,color:#fff

Try this code ❯

Classes can also be defined:

flowchart TD
    A[Node A] --> B[Node B]

    classDef important fill:#f96,stroke:#333,stroke-width:2px
    class A important

Try this code ❯

Flowchart Interaction

Nodes can have links.

flowchart LR
    A[Website] --> B[Documentation]
    click A "https://www.example.com" "Open website"

Try this code ❯

Interactive scripts and links depend on Mermaid's security configuration.

Small Practice Diagram

flowchart TD
    Start[Start] --> Input[Enter credentials]
    Input --> Check{Credentials OK?}
    Check -->|Yes| Success[Login successful]
    Check -->|No| Error[Show error]
    Success --> Finish[Finish]
    Error --> Finish

Try this code ❯