Mermaid diagram

Flowchart — free online editor

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

▶ Open in editor

What is a Mermaid flowchart?

Flowcharts are the most popular Mermaid diagram type. You describe nodes and the arrows between them in plain text, and Mermaid renders a clean SVG diagram. Flowcharts support four directions (top-down, left-right, etc.), several node shapes (rectangle, circle, diamond, cylinder, stadium), labelled arrows, and subgraphs for grouping.

When to use it

▸Document a business process or onboarding flow
▸Explain how an algorithm branches and loops
▸Sketch architecture or data pipelines
▸Map out a user journey or signup funnel

Syntax in one paragraph

Start with `flowchart TD` (top-down) or `flowchart LR` (left-right). Use `A --> B` for an arrow, `A -->|label| B` to label it, and shapes like `A(Round)`, `A[Box]`, `A{Diamond}`, or `A([Stadium])`.

Example: Login flow with 2FA

flowchart LR
    A([User]) --> B[Login Page]
    B --> C{Credentials valid?}
    C -->|Yes| D{2FA Enabled?}
    C -->|No| B
    D -->|Yes| E[Enter OTP]
    D -->|No| F[Dashboard]
    E --> F
    F --> G([Done])

▶ Try this example in the editor

More Mermaid diagrams

Sequence Diagram

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

Class Diagram

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

State Diagram

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

Gantt Chart

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes