Markdown flowchart maker

Draw a flowchart in your browser. Describe the steps as a Mermaid block and watch it render as you type, then drop the Markdown into your document. Good for processes, decision trees and onboarding flows.

Mermaid flowchart syntax

A flowchart is a list of boxes and the arrows between them. You name each box, join the names with arrows, and Mermaid works out the layout. Here is each piece you can write.

Boxes

Give each box a short id and a label. The id is how you refer to the box when you draw arrows. The label is the text shown inside it.

You write

flowchart TD
  A[Start]
  B[Collect details]
  C[Done]

You get

Shapes

The brackets around the label choose the shape.

You write

flowchart TD
  A[Rectangle]
  B(Rounded)
  C([Stadium])
  D[[Subroutine]]
  E[(Database)]
  F((Circle))
  G{Diamond}
  H{{Hexagon}}

You get

Arrows

An arrow connects two ids. The line style sets the kind of link.

You write

flowchart TD
  A --> B
  B --- C
  C -.-> D
  D ==> E

You get

Arrow labels

Add a label to an arrow by wrapping text in a pipe on each side.

You write

flowchart TD
  A -->|Yes| B
  A -->|No| C

You get

Subgraphs

Wrap boxes in a subgraph to group them. A subgraph can hold other subgraphs.

You write

flowchart TD
  subgraph Setup
    A[Install]
    B[Configure]
  end
  A --> B
  B --> C[Run]

You get

Direction

The two letters after the word flowchart set the direction the arrows flow. TD flows top down, LR flows left to right, BT flows bottom to top, and RL flows right to left.

You write

flowchart LR
  A --> B --> C

You get

Cheat sheet

Write this	You get
Shapes
`A[Text]`	Rectangle
`A(Text)`	Rounded box
`A([Text])`	Stadium
`A[[Text]]`	Subroutine
`A[(Text)]`	Database cylinder
`A((Text))`	Circle
`A{Text}`	Diamond decision
`A{{Text}}`	Hexagon
Arrows
`A --> B`	Arrow
`A --- B`	Line with no arrow head
`A -.-> B`	Dotted arrow
`A ==> B`	Thick arrow
`A -->\|Text\| B`	Arrow with a label
Layout
`flowchart TD`	Top down
`flowchart LR`	Left to right
`flowchart BT`	Bottom to top
`flowchart RL`	Right to left
`subgraph Name ... end`	Group boxes together