Flowchart

Free Online Flowchart Maker

Create flowcharts and process diagrams using Mermaid syntax. Write code, see your diagram render instantly.

Try it live 

flowchart TD
    A([Start]) --> B{User logged in?}
    B -->|Yes| C[Show dashboard]
    B -->|No| D[Redirect to login]
    D --> E[User enters credentials]
    E --> F{Valid credentials?}
    F -->|Yes| G[Create session]
    F -->|No| H[Show error]
    H --> E
    G --> C
    C --> I([End])

When to use flowchart

Process documentation

Map out business processes, onboarding flows, and standard operating procedures.

Software architecture

Visualize application flow, request handling, and decision logic in your codebase.

Troubleshooting guides

Create step-by-step decision trees for diagnosing and resolving issues.

Key syntax

flowchart TDTop-down direction (also LR, RL, BT)
A[Text]Rectangle node
A(Text)Rounded rectangle
A{Text}Diamond / decision
A([Text])Stadium / pill shape
A --> BArrow connection
A -->|label| BLabeled arrow
A -.-> BDashed arrow

How to create a flowchart with Mermaid

1

Open FlowViz editor by clicking "Open Editor" above.

2

Start with the diagram direction: type flowchart TD for top-down or flowchart LR for left-right.

3

Define your nodes using bracket notation: A[Step name] for rectangles, A{Decision} for diamonds.

4

Connect nodes with arrows: A --> B for a simple connection, A -->|Yes| B for a labeled arrow.

5

Add more nodes and connections to complete your flow.

6

Use the theme switcher in the bottom bar to change the visual style.

7

Export your flowchart as SVG using the Export button.

Related tools

Sprint Retro Board →

Start diagramming now

No signup. No install. Just open the editor and start writing.