Direction you can change
Use TD, TB, LR, RL, or BT to match the available space and the way readers scan the process.
Process and decision modeling
Mermaid Flowchart Online Editor
Create a Mermaid flowchart online for processes, decisions, request paths, and system workflows. Edit the source, inspect the live preview, and export SVG or PNG.
Build a Mermaid flowchart online
Start from a practical request-review flow, then change nodes, decisions, labels, and direction while the preview stays visible.
Build a Mermaid flowchart online
Changes render automatically in the preview.
flowchart.mmd6 lines
Live previewWaiting
Turn process logic into reviewable text
A Mermaid flowchart keeps the path, branch labels, and node meaning in source that teams can review alongside technical documentation.
Explicit decision branches
Label outgoing connections so readers understand why the process follows each branch.
Live Mermaid preview
See the rendered diagram update after each source change and keep syntax errors beside the editor.
SVG and PNG export
Download scalable SVG for documentation or a high-resolution PNG for slides and sharing.
No local setup
Work in the browser without installing Mermaid CLI, a desktop application, or an editor extension.
Continue in OnUML
Move the current source into the full editor for AI generation, repair, sharing, and saved projects.
How to create a Mermaid flowchart
Start with the question the flowchart must answer, then add only the steps and branches needed for that review.
- 01
Choose a direction such as flowchart TD for a top-down process or flowchart LR for a left-to-right system path.
- 02
Declare each meaningful step once, using stable node IDs and concise labels that describe actions or states.
- 03
Connect nodes with arrows and label decision branches with the condition that selects each route.
- 04
Read every path from its starting node to an outcome, then remove branches that do not help the intended audience.
- 05
Export SVG or PNG, or continue in the full editor when the flow needs AI-assisted generation or repair.
Mermaid flowchart syntax and modeling choices
The most useful flowcharts are not the largest ones. They make direction, decisions, and outcomes explicit without turning every implementation detail into a node.
Use stable IDs and readable labels
Node IDs connect the source while labels communicate with readers. Keep IDs short and stable, then use brackets, parentheses, or braces to choose a shape that matches the role of the node.
flowchart LR
start[Receive request] --> decision{Valid?}Label branches with real conditions
A diamond without labeled exits forces readers to guess. Put the condition on each outgoing edge and make sure the labels are mutually understandable, such as Yes and No or Approved and Rejected.
decision -->|Yes| process[Process request]
decision -->|No| reject[Return error]Group related steps with subgraphs
Use a subgraph when a set of steps belongs to one service, team, phase, or trust boundary. Avoid nesting purely for decoration because every boundary should convey meaning.
subgraph API
validate --> persist
endFlowchart vs sequence diagram
Use a flowchart when decisions and possible paths are the central question. Use a sequence diagram when the ordered messages between participants are more important than branching process logic.
Mermaid flowchart example
The editor starts with a change-review workflow containing a loop, a decision, and two labeled outcomes. Replace the labels with your own process while preserving the branch structure.
flowchart TD
Request[Receive change request] --> Review{Ready for review?}
Review -->|No| Revise[Revise the proposal]
Revise --> Review
Review -->|Yes| Approve[Approve the change]
Approve --> Release[Schedule the release]Related Mermaid tools
Continue with the general editor, browse this release’s tool directory, or compare the diagram with a related modeling view.
Mermaid Online Editor
Write Mermaid source, preview the result, and export SVG or PNG.
Open tool →Mermaid Tools
Choose a focused Mermaid editor for the diagram you need to create.
Open tool →Mermaid Sequence Diagram Online Editor
Document messages between users, services, APIs, and databases over time.
Open tool →Frequently asked questions
What is a Mermaid flowchart online editor?
It is a browser-based workspace where you write Mermaid flowchart syntax, preview the diagram, and export the rendered result without installing Mermaid locally.
How do I change a Mermaid flowchart from vertical to horizontal?
Change the direction after the flowchart declaration. Use TD or TB for top-down, LR for left-to-right, RL for right-to-left, or BT for bottom-to-top.
Can Mermaid flowcharts show decisions and loops?
Yes. Diamond-shaped nodes can represent decisions, labeled arrows can identify branch conditions, and connections can point back to an earlier node to show a loop.
Can I group steps by service or phase?
Yes. Use subgraph blocks to group related nodes under a named boundary such as a service, team, environment, or process phase.
Can I export the flowchart as SVG or PNG?
Yes. Use SVG for scalable documentation and PNG for slides, issue trackers, and tools that do not render Mermaid source.
When should I use a sequence diagram instead?
Choose a sequence diagram when you need to explain who sends each message and in what order. Choose a flowchart when decisions, loops, and alternative process paths are the main concern.