Flowchart Examples Adapt a validation loop, document approval, or grouped release pipeline for your own process. Each example includes code, an explanation of its paths, a live preview, and an editor link that keeps the code and configuration.
Try a flowchart example Edit the code below or load an example. Open the current code in the full editor to choose a theme, share a link, or export PNG/SVG.
Live preview Paste Mermaid diagram code to preview.
Your code, theme, and diagram configuration travel with the link. Flowchart spacing uses the Standard preset.
Flowchart examples for real workflows Decision flowchart example Approval with a revision loop Grouped build and release pipeline Decision flowchart example Validate input and return invalid entries for correction. Use this for a form, import job, or support intake process.
flowchart TD
Start([Start]) --> Input[Collect input]
Input --> Valid{Valid?}
Valid -->|No| Fix[Ask for correction]
Fix --> Input
Valid -->|Yes| Finish[Continue workflow]The No branch returns to Collect input; the Yes branch continues the workflow. Replace Valid? with a concrete rule, such as Required fields present?, before using the diagram in a spec. Approval with a revision loop Separate draft review from publication. A rejected draft returns for edits rather than silently reaching the successful outcome.
---
config:
theme: base
themeVariables:
primaryColor: "#dbeafe"
primaryTextColor: "#172554"
primaryBorderColor: "#2563eb"
---
flowchart TD
Draft["Prepare draft"] --> Review{"Approved?"}
Review -->|Yes| Publish["Publish document"]
Review -->|No| Revise["Revise draft"]
Revise --> ReviewRename the decision to the actual approval rule and identify who owns the revision step. The base theme and custom node colors are included in the code and travel to the editor. Grouped build and release pipeline Show build checks and release work as separate groups. A failed test returns to the build step; passing checks reach deployment.
flowchart TD
subgraph Checks["Build checks"]
Build["Build package"] --> Test{"Tests pass?"}
Test -->|No| Build
end
subgraph Release["Release"]
Deploy["Deploy build"] --> Verify["Verify production"]
end
Test -->|Yes| DeploySubgraphs group responsibilities; the arrows still define the workflow. A subgraph linked through its internal nodes can inherit the parent direction. Check the preview rather than relying on a separate group direction. Before you share the diagram Model one process per diagram, with a clear start and an observable outcome. Name both success and failure paths. Add a stopping condition if your real workflow has a retry limit. Keep step labels short and explain detailed rules alongside the diagram. Flowchart syntax and quick preview
For more syntax, see the official Mermaid reference .
Preview, style, and export in one place Mermaid Viewer keeps the workflow focused: paste Mermaid code, preview the rendered diagram, choose a theme or layout preset, then export PNG/SVG when the result is ready for documentation or slides.
Frequently Asked Questions How do I preview a Mermaid flowchart example?
Choose Preview example to load a case into the live preview on this page. Open example in editor carries that case’s code and theme into the full editor.
Can I change the flowchart theme?
Yes. Mermaid Viewer lets you compare themes and layout presets before exporting.