HomeDiagramsFlowchart

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.

Source → render

A deploy pipeline, start to finish.

pipeline.mmd
graph TD
  A[Start] --> B[Process] --> C[End]
Flowchart diagram, zombie-mermaid Start Process End
More examples

More real-world examples.

Flowchart diagram, zombie-mermaid Rectangle Rounded Diamond Stadium Circle Subroutine Double Circle Hexagon Database Flag Trapezoid Inverse Trap
All 12 Flowchart Shapes
Flowchart diagram, zombie-mermaid solid dotted thick Source Target 1 Target 2 Target 3
All Edge Styles
Flowchart diagram, zombie-mermaid related Node 1 Node 2 Node 3 Node 4
No-Arrow Edges
Flowchart diagram, zombie-mermaid sync heartbeat data Client Server Monitor Storage
Bidirectional Arrows
Flowchart diagram, zombie-mermaid Input Config Processor Output Log
Parallel Links (&)
Flowchart diagram, zombie-mermaid Yes No Start Decision Accept Reject Done
linkStyle: Color-Coded Edges
Show 8 more examples
Flowchart diagram, zombie-mermaid Input Transform Output
Direction: Left-Right (LR)
Flowchart diagram, zombie-mermaid Backend Frontend API Server Database React App State Manager
Subgraphs
Flowchart diagram, zombie-mermaid Cloud US West Region US East Region Load Balancer Web Server App Server Web Server App Server
Nested Subgraphs
Flowchart diagram, zombie-mermaid Default Custom Colors Another Custom
Inline Style Overrides
Flowchart diagram, zombie-mermaid CI Pipeline Yes No Yes No Deploy Staging QA Approved? Production Push Code Tests Pass? Build Image Fix & Retry
CI/CD Pipeline
Flowchart diagram, zombie-mermaid Data Layer Service Layer Client Layer Auth DB User DB Order DB Message Queue Auth Service User Service Order Service Web App API Gateway Mobile App
System Architecture
Flowchart diagram, zombie-mermaid Yes No Yes No Yes No Is it raining? Have umbrella? Go outside Go with umbrella Is it heavy? Stay inside Run for it
Decision Tree
Flowchart diagram, zombie-mermaid approved pass fail main develop feature/auth feature/ui PR Review release/1.0 Tests?
Git Branching Workflow
Keep exploring

Explore the other diagram types.

Pick a look

Live in every built-in theme.