Process and decision modeling

Mermaid Flowchart Online Editor

Map an approval process, a request path, or a decision tree in Mermaid. Edit nodes and labeled branches in the workspace above, check the preview, and download SVG or PNG for your documentation.

Build a Mermaid flowchart online

Adapt the change-review example below or paste your own flowchart. An existing workspace draft is restored before the page example.

OnUML
Loading diagram preview...

Build a flowchart that explains the next step

Use a flowchart when the important question is which path a process follows. Use a sequence diagram when you need to show which participant sends each message.

Choose the reading direction

Use TD for a vertical approval process or LR for a request path that fits a wide document.

Separate steps from decisions

Rectangles describe actions; diamonds highlight questions that lead to different outcomes.

Name branches and loops

Put Yes, No, or a business condition on each branch, and connect a revision step back to the decision.

Group a phase or service

Use a named subgraph to show which team, system, or stage owns a group of steps.

Create and export a process flow

Start with one process and one outcome to keep the first draft easy to check.

  1. 01

    Declare flowchart TD or flowchart LR, then give each step a stable ID and an action label.

  2. 02

    Connect steps, label decision exits, and follow both the success path and any retry loop in the preview.

  3. 03

    Choose a theme and download SVG or PNG. Keep the source for later changes; sign in if you want to save it as a project.

Flowchart syntax for directions, decisions, and groups

Each example is a complete small flowchart. Copy one into a new draft or adapt the matching lines in your own source.

Mermaid flowchart syntax reference →

Direction and readable labels

TD and TB both run top to bottom. LR runs left to right; RL and BT reverse those directions. Keep the ID stable when changing the visible label.

flowchart LR
    request[Receive request] --> review[Review proposal]

Decision branches and a retry loop

Braces create a decision shape. The text between vertical bars labels an edge; it describes the condition but does not execute it.

flowchart TD
    review{Approved?} -->|Yes| release[Schedule release]
    review -->|No| revise[Revise proposal]
    revise --> review

A boundary with subgraph

Group related nodes under one title. If a node connects outside its subgraph, Mermaid may use the parent direction instead of the subgraph direction.

flowchart LR
    subgraph API
        validate[Validate request] --> persist[Save request]
    end
    client[Client] --> validate

Quoted labels and dashed connections

Quote labels containing parentheses or other punctuation. Use -.-> for a dashed connection. Avoid bare lowercase end as a node label; use End or a quoted label.

flowchart LR
    check["Validate input (required)"] -.-> finish["End"]

Mermaid flowchart example

A change request loops back for revision until it is ready for approval, then reaches a scheduled release. The labeled decision makes the two paths explicit.

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]
  • Request and Revise are actions; Review is the question that selects a path.
  • Revise --> Review makes the correction cycle visible instead of drawing a second review step.
  • Try changing flowchart TD to flowchart LR, then read the same paths in the new layout.

Frequently asked questions

How do I make the flowchart horizontal?

Change the first line to flowchart LR. Direction controls the overall layout, but it does not guarantee exact positions for every node.

Why does a label with parentheses fail?

Put the visible label in double quotes inside its node shape, for example A["Check input (required)"]. Also check brackets and braces are paired.

How do I label a Yes/No branch?

Place the label between vertical bars on the connection, such as Review -->|Yes| Approve. Use a different condition on each alternative exit.

Why is my subgraph direction ignored?

When a node inside a subgraph connects to a node outside it, Mermaid can inherit the parent graph direction. Reconsider the boundary or the overall direction rather than relying on an exact local arrangement.

How do I draw a dashed connection?

Use A -.-> B for a dashed arrow. To explain it, add text between the dashes, such as A -. optional .-> B. The label describes the connection; it does not execute a condition.

Which export should I use for documentation?

Choose SVG when the destination accepts scalable vector images. Choose PNG for image attachments or slide workflows that require raster images, and keep the Mermaid source for editing.

Learn the syntax

Build practical Mermaid flowcharts step by step

Work through reusable examples for authentication, CI/CD, architecture, error handling, SSO, and order fulfillment.

Read the Mermaid flowchart guide →