Flowchart
Free Mermaid Flowchart Editor
A flowchart is a diagram that represents a process as a sequence of steps connected by arrows, showing the order operations happen in and the direction control flows. Rectangles usually mark actions, diamonds mark decision points where the path branches, and arrows connect them into a complete picture of the logic.
Write the flowchart as text and it renders as you type — or click a box on the diagram and change its shape, colour or label, and the Mermaid source updates itself.
Last updated: · Mermaid v11
Try it live
When to use flowchart
Process documentation
Map business processes, onboarding flows, and standard operating procedures as flowcharts that live next to the code. Because the diagram is text, a process change is a one-line edit and a reviewable diff — no drawing tool, no stale PNG.
Software architecture
Visualize application flow, request handling, and decision logic as nodes and arrows. Decision diamonds capture the branch points, and labeled edges document why each path is taken.
Troubleshooting guides
Turn tribal debugging knowledge into step-by-step decision trees anyone on call can follow. Each diamond is a check, each branch an outcome, and the flowchart stays copy-pasteable into runbooks and wikis.
Key syntax
flowchart TDTop-down direction (also LR, RL, BT)A[Text]Rectangle nodeA(Text)Rounded rectangleA{Text}Diamond / decisionA([Text])Stadium / pill shapeA --> BArrow connectionA -->|label| BLabeled arrowA -.-> BDashed arrowHow to create a flowchart with Mermaid
Open FlowViz editor by clicking "Open Editor" above.
Start with the diagram direction: type flowchart TD for top-down or flowchart LR for left-right.
Define your nodes using bracket notation: A[Step name] for rectangles, A{Decision} for diamonds.
Connect nodes with arrows: A --> B for a simple connection, A -->|Yes| B for a labeled arrow.
Add more nodes and connections to complete your flow.
Use the theme switcher in the bottom bar to change the visual style.
Export your flowchart as SVG using the Export button.
Frequently asked questions
How do I keep a large flowchart readable?
Three things help most. Set the direction explicitly — `flowchart LR` suits wide, shallow processes and `TD` suits deep ones. Group related steps in `subgraph` blocks so the layout engine keeps them together instead of scattering them. Past roughly 25 nodes, split the diagram and link between the parts. Because the diagram is text, splitting one is a copy-paste rather than a redraw.
What is a Mermaid flowchart used for?
Process flows, decision trees, and system logic — anywhere you need boxes and arrows. Because the diagram is plain text, it diffs cleanly in git and lives happily inside docs and READMEs.
How do I change the flowchart direction?
The first line sets it: flowchart TD renders top-down, LR renders left-right, and RL and BT reverse those.
Is the FlowViz flowchart maker free?
Yes — free with no account. Diagrams stay in your browser, and you can export SVG or share the diagram as a URL.
Related tools
Start diagramming now
No signup. No install. Just open the editor and start writing.