Mermaid flowcharts
A Mermaid flowchart is a process diagram written as plain text: each line declares a node or an arrow, and the renderer lays out the boxes for you. Because the source is text, flowcharts diff cleanly in Git and render natively in GitHub, GitLab, and most docs tools.
A deployment decision flow with branches and a retry loop.
Flowcharts are Mermaid's most-used diagram type — anything with steps and decisions fits: onboarding flows, deploy pipelines, escalation paths, decision trees. In MermaidCreator you can build them three ways: drag nodes on the canvas, type the syntax, or describe the process and let AI draft it.
When to use a flowchart
- Process documentation — onboarding, approvals, incident response
- User flows for product and UX discussions
- CI/CD and infrastructure pipelines in READMEs
- Decision trees and troubleshooting guides
The Mermaid code
Copy it anywhere Mermaid renders — or see the full syntax reference.
flowchart TD
A[Push to main] --> B{CI green?}
B -->|yes| C[Deploy to staging]
B -->|no| D[Fix tests]
D --> A
C --> E{Smoke tests pass?}
E -->|yes| F[Promote to production]
E -->|no| G[Rollback]
G --> DFrequently asked questions
- How do I create a flowchart in Mermaid?
- Start a code block with `flowchart TD` (top-down) or `flowchart LR` (left-right), then write one relationship per line, like `A[Start] --> B{Decision}`. Square brackets make rectangles, curly braces make decision diamonds, and `-->|label|` puts text on the arrow. In MermaidCreator you can also drag the nodes visually and the code is written for you.
- Can AI generate a flowchart from a description?
- Yes. In MermaidCreator, describe the process in plain English — for example 'user signup flow with email verification' — and Claude drafts the complete Mermaid flowchart in seconds. The result is normal Mermaid code you can edit visually or by hand.
- Where can I embed a Mermaid flowchart?
- GitHub, GitLab, Notion, Obsidian, Azure DevOps, and most docs-as-code tools render Mermaid flowcharts natively from a fenced ```mermaid code block. For everything else (slides, email, Confluence without the plugin), export the flowchart as PNG or SVG.