Flowchartio
Sign inTry it freeTry free

Mermaid flowcharts

Mermaid flowchart syntax cheat sheet

A Mermaid flowchart starts with "flowchart" and a direction (TD, LR…), then declares nodes with an id and a shape, such as A[Step] or B{Question?}, and connects them with arrows like A --> B or B -->|Yes| C.

By Flowchartio · Updated · 1 min read

Direction

The first line sets the type and direction:

  • flowchart TD or flowchart TB: top to bottom
  • flowchart LR: left to right
  • flowchart BT and flowchart RL: reversed

The older keyword graph still works, but flowchart is the current one.

Node shapes

A node is an id followed by a shape. The id is used in arrows; the text is what is displayed.

flowchart TD
  A[Rectangle: a step]
  B(Rounded rectangle)
  C([Stadium: start or end])
  D[[Subroutine: predefined process]]
  E[(Database)]
  F((Circle))
  G{Rhombus: a decision?}
  H{{Hexagon}}
  I[/Parallelogram: input or output/]

These map closely to the classic flowchart symbols: stadium for terminators, rectangle for steps, rhombus for decisions, parallelogram for input and output.

Arrows and labels

  • A --> B: arrow
  • A --- B: line without arrowhead
  • A -.-> B: dotted arrow
  • A ==> B: thick arrow
  • A -->|Yes| B or A -- Yes --> B: labelled arrow
  • A --> B --> C: chain
  • A & B --> C: several sources at once

Text with special characters

Wrap text in double quotes when it contains brackets, parentheses or other symbols: A["Check (manual)"]. Inside quotes, write a double quote as #quot;.

Ids versus text

Keep ids short and stable (check, pay) and put the readable label in brackets. Renaming a label then never breaks the arrows that point to the node.

Comments

Lines starting with %% are ignored: %% TODO: add the refund branch.

Common errors

  • The word "end" in lowercase as node text can break a flowchart, because end closes subgraphs. Capitalise it ("End") or quote it.
  • Ids starting with "o" or "x" right after a link, as in A---oB, create circle or cross edge endings. Add a space or rename the node.
  • Unquoted parentheses or brackets in text confuse the parser.
  • Reusing an id with a different shape: the first declaration wins, which may not be what you expect.

A complete example

flowchart TD
  start([Refund request]) --> check[Support checks order date]
  check --> old{Older than 30 days?}
  old -->|Yes| refuse[Refuse and inform customer]
  old -->|No| pay[Finance pays refund]
  refuse --> stop([End])
  pay --> stop

To group steps by team, continue with subgraphs and styling. To publish the result, see Mermaid on GitHub and GitLab.