Flowcharts

Flowcharts (graphs) are the most common Mermaid diagram type.

Left to Right

graph LR
    A[Hard edge] -->|Link text| B(Rounded edge)
    B --> C{Decision}
    C -->|Yes| D[Result one]
    C -->|No| E[Result two]
    D --> F((Circle))
    E --> G>Flag shape]
    F --> H[/Parallel/]
    G --> H

Top to Down with Subgraphs

graph TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[Process A]
    B -- No --> D[Process B]
    C --> E[Result]
    D --> E
    E --> F[End]

    subgraph One
        A
        B
    end
    subgraph Two
        C
        D
    end
    subgraph Three
        E
        F
    end

Styled Flowchart

graph TD
    A[Client]:::client --> B[Load Balancer]:::lb
    B --> C[App Server 1]:::server
    B --> D[App Server 2]:::server
    C --> E[(Database)]:::db
    D --> E
    E --> F[(Cache)]:::cache

    classDef client fill:#e1f5fe,stroke:#0288d1
    classDef lb fill:#fff3e0,stroke:#ef6c00
    classDef server fill:#e8f5e9,stroke:#388e3c
    classDef db fill:#fce4ec,stroke:#c62828
    classDef cache fill:#f3e5f5,stroke:#7b1fa2

Back to overview.