Mermaid template

Flowchart

Nodes and arrows for processes, decisions, and logic flows — the most common Mermaid diagram.

Source

Open in editor
flowchart LR
    start([Request received]) --> auth{Authenticated?}
    auth -- No --> deny[Return 401]
    auth -- Yes --> cache{In cache?}
    cache -- Yes --> hit[Serve from cache]
    cache -- No --> db[(Query database)]
    db --> store[Write to cache]
    store --> respond[Return response]
    hit --> respond

Flowcharts are Mermaid's bread and butter. Declare a direction (TD for top-down, LR for left-to-right), then connect nodes with arrows. Node shapes carry meaning: rectangles for steps, diamonds for decisions, stadiums for start and end points.

Labels on arrows (written between pipes or after --) make decision branches readable. Subgraphs let you group related steps into named clusters.