Flowchart · Mermaid diagram type

Mermaid Flowchart Maker

A flowchart is the fastest way to turn a process, decision, or pipeline into a diagram you can version alongside your code. This page walks through the syntax — directions, node shapes, decisions, and subgraphs — then lets you edit a live example and export it.

Mermaid flowchart syntax by example

Basic flow

Declare a direction, then connect nodes with arrows. Rounded () nodes read as soft steps.

flowchart LR
  A(Write) --> B(Preview)
  B --> C(Export)
  B --> D(Docs Asset)

Decisions and branches

A diamond {} node is a decision. Label each outgoing edge so readers know why a path is taken.

flowchart TD
  A([Start]) --> B{Approved?}
  B -->|Yes| C[Deploy]
  B -->|No| D[Request changes]
  D --> A

Grouping with subgraphs

Wrap related nodes in a subgraph to show stages or bounded contexts, then link between them.

flowchart LR
  subgraph Build
    A[Compile] --> B[Test]
  end
  subgraph Ship
    C[Release] --> D[Notify]
  end
  B --> C

Node shapes

Syntax	Shape	Use for
A[Text]	Rectangle	A process step
A(Text)	Rounded	A soft step or start point
A([Text])	Stadium	A terminator / entry point
A{Text}	Diamond	A decision or branch
A[[Text]]	Subroutine	A predefined subprocess
A[(Text)]	Cylinder	A database or store

Directions

Keyword	Direction	Best for
TD / TB	Top-down	Approval flows, hierarchies
LR	Left-right	Pipelines, process timelines
RL	Right-left	Reverse or upstream flows
BT	Bottom-top	Dependency / build-up flows

When a flowchart is the right diagram

Process and onboarding docs

Map a signup, checkout, or support process step by step so the README or handbook stays in sync with the code.

Decision and branching logic

Show if/else paths, feature flags, or routing rules that are hard to describe clearly in prose.

Build and deploy pipelines

Sketch CI/CD stages and their dependencies in a left-right flow that fits neatly into architecture notes.

Edit and export this flowchart

The editor is seeded with the basic flow above. Change the nodes, pick an export style, then download a PNG or SVG — no signup, no watermark, rendered locally in your browser.

Paste or edit Mermaid code

Replace the sample below, or load another example.

Load example

Paste Mermaid code here. Preview and export load locally in your browser.

flowchart LR
  A(Write) --> B(Preview)
  B --> C(Export)
  B --> D(Docs Asset)

Live previewSample preview · Clean Docs

Render & export

Export controls activate after your diagram renders locally.

Flowchart

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMEWarm EditorialWhiteboard SketchTransparent DocsGitHub DarkSlide DarkDeep Ocean

Scale

1x2x4x

Or exact width, e.g. 1200px wide

Output: White · comfortable padding

Size: calculated after render

Filename: mermaid-flowchart-white-2x.png

Other Mermaid diagram types

Sequence diagram Class diagram ER diagram Gantt chart State diagram Browse all templates

FAQ

Questions about Mermaid Flowchart Maker

How do I make a flowchart in Mermaid?+

Start a code block with `flowchart TD` or `flowchart LR`, declare nodes such as `A(Start)` and `B{Decision}`, then connect them with arrows like `A --> B`. Paste it into the editor on this page to preview and export it.

What is the difference between TD and LR flowcharts?+

`TD` lays the flow out top-down, which suits approval steps and hierarchies. `LR` lays it out left-to-right, which suits pipelines and process timelines. Change the direction any time by editing the first line.

How do I add a decision or branch to a flowchart?+

Use a diamond node like `B{Approved?}` and label the outgoing edges with the condition, for example `B -->|Yes| C` and `B -->|No| D`, so each path is clearly explained.

Can I export a Mermaid flowchart without a watermark?+

Yes. The exporter is free for single-diagram use and never adds a watermark. Export PNG for the broadest compatibility or SVG when you need a scalable vector version.