Try flowchart syntax with editable examples for directions, readable labels, and decisions. Inspect the live preview, then open your current code in the full editor to style, share, or export it.
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.
Your code, theme, and diagram configuration travel with the link. Flowchart spacing uses the Standard preset.
Inspect a decision with two labeled exits and a return path. Edit the condition or rename a step to see the flow update.
flowchart TD
Start([Start]) --> Check{Requirements clear?}
Check -->|Yes| Build[Build diagram]
Check -->|No| Refine[Refine steps]
Refine --> Check
Build --> Export[Export flowchart]A short left-to-right process for a README. Change LR to TD when a vertical diagram fits your document better.
flowchart LR
Source["Read source"] --> Review["Review changes"]
Review --> Ready(["Ready to publish"])Check whether an upload is accepted or rejected. Each outcome ends in its own step, making the boundary easy to inspect.
flowchart TD
Upload["Receive upload"] --> Size{"Within size limit?"}
Size -->|Yes| Accept["Accept file"]
Size -->|No| Reject["Show size limit"]| Syntax | Meaning |
|---|---|
flowchart TD / LR | Set top-to-bottom or left-to-right direction. |
A[Label] | Give node A a visible process label. |
B{Question?} | Draw a decision. |
A -->|Yes| B | Connect two nodes with a labeled arrow. |
subgraph Group ... end | Group related steps; close the group with end. |
Flowchart examples for approvals, validation, and grouped pipelines
For more syntax, see the official Mermaid reference.
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.