Mermaid Flowchart Example

Flowcharts are the most fundamental diagram type — perfect for visualising decision trees, process flows, and system logic. This guide walks you through the Mermaid flowchart syntax with real, production-level examples you can open directly in Marmady.

Build your flowchart in seconds

Open Marmady Editor →

Basic Flowchart Syntax

Every Mermaid flowchart begins with graph (or flowchart) followed by a direction keyword:

TD — Top Down
LR — Left to Right
BT — Bottom to Top
RL — Right to Left

Example: Decision Logic Flow

This example shows a simple conditional branching pattern, perfect for visualising business rules or if/else logic:

graph TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Ship it!]
    B -- No --> D[Debug]
    D --> B

Example: Multi-Step Process

Use flowcharts to describe pipeline processes, such as a CI/CD deployment workflow:

graph LR
    A([Commit]) --> B[Build]
    B --> C{Tests Pass?}
    C -- Yes --> D[Deploy to Staging]
    C -- No --> E[Alert Dev]
    D --> F[Deploy to Production]

Node Shapes Reference

Mermaid supports several node shapes to communicate different meanings:

[Text] — Rectangle (process)
{Text} — Diamond (decision)
(Text) — Rounded rectangle
((Text)) — Circle
([Text]) — Stadium shape

Ready to run this in the editor?

Copy any example above and paste it into Marmady. Your diagram renders live, with export to SVG, PNG, or PDF.

Open Marmady Editor →

More Mermaid Examples Sequence Diagrams Gantt Charts How To Use Mermaid