Flowchart

Flowcharts map a process as boxes and arrows and are the most commonly used Mermaid diagram — CI pipelines, decision trees, onboarding steps. zombie-mermaid supports the full shape set (rounded, diamond, stadium, subroutine, cylinder, hexagon, and more), subgraphs, and both straight and curved edges.

A deploy pipeline, start to finish.

graph TD
  subgraph ci [CI Pipeline]
    A[Push Code] --> B{Tests Pass?}
    B -->|Yes| C[Build Image]
    B -->|No| D[Fix & Retry]
    D -.-> A
  end
  C --> E([Deploy Staging])
  E --> F{QA Approved?}
  F -->|Yes| G((Production))
  F -->|No| D

Where flowcharts come from, and how the syntax works.

Flowcharts represent a process as nodes and edges — a general-purpose diagramming notation that predates computing and is still the default way most teams sketch a sequence of steps and decisions. Mermaid’s syntax sets a graph direction (top-down, left-right, bottom-up, or right-left), connects nodes with arrow-style edges, and offers more than 30 node shapes, from a plain rectangle to a stadium, cylinder, or subroutine box. Subgraphs group related nodes into their own labeled box, and edges can carry labels, alternate styles, or be hidden entirely for layout control.

Every Flowchart example, on its own page.

Explore the other diagram types.