# Mermaid Flowchart Cheat Sheet

Boxes, arrows and branches — the diagram most people mean by Mermaid.

## Direction

The first line picks the flow: TD and TB are the same, LR and RL run sideways.

```mermaid
flowchart LR
  A[Start] --> B[Middle] --> C[End]
```

![A left-to-right flowchart with three boxes labelled Start, Middle and End, connected by arrows.](/diagrams/flowchart/direction.svg)

## Node shapes

The brackets you type are the shape you get. These are the five Mernyx draws as everyday boxes.

```mermaid
flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]
```

![A flowchart of five connected nodes, each drawn in a different shape: a rectangle, a rounded box, a stadium, a subroutine and a database cylinder.](/diagrams/flowchart/shapes.svg)

## Round and angular shapes

The rest of the everyday set: circles, the decision diamond, the hexagon and the slanted one.

```mermaid
flowchart LR
  A((Circle)) --> B(((Double circle)))
  B --> C{Diamond}
  C --> D{{Hexagon}}
  D --> E>Asymmetric]
```

![A flowchart of five connected nodes drawn as a circle, a double circle, a diamond, a hexagon and an asymmetric shape.](/diagrams/flowchart/shapes-round.svg)

## The slanted four

Parallelograms and trapezoids. The slashes lean the shape; backslashes lean the other way.

```mermaid
flowchart LR
  A[/Parallelogram/] --> B[\Alternate\]
  B --> C[/Trapezoid\]
  C --> D[\Inverted/]
```

![Four flowchart nodes in a row: a parallelogram leaning right, one leaning left, a trapezoid and an inverted trapezoid.](/diagrams/flowchart/shapes-slanted.svg)

## Arrow types

Four ways to connect two nodes: solid, dotted, open and thick.

```mermaid
flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]
```

![One node on the left connected to four nodes on the right by a solid arrow, a dotted arrow, an open line and a thick arrow.](/diagrams/flowchart/edges.svg)

## Labelling an edge

Two spellings. The pipe form reads better on long labels.

```mermaid
flowchart LR
  A[Start] -->|Yes| B[Continue]
  A -- No --> C[Stop]
```

![A node labelled Start with two outgoing arrows: one labelled Yes leading to Continue, one labelled No leading to Stop.](/diagrams/flowchart/edge-labels.svg)

## Chaining and link length

Nodes can be chained in one line, and extra dashes push a node further away.

```mermaid
flowchart LR
  A[One] --> B[Two] --> C[Three]
  B ----> D[Further away]
```

![A left-to-right chain of three boxes, with a fourth box further to the right, connected by a longer arrow.](/diagrams/flowchart/chaining.svg)

## Grouping into a subgraph

A subgraph is a labelled box around the nodes indented inside it.

```mermaid
flowchart TB
  subgraph Backend
    API[API] --> DB[(Database)]
  end
  subgraph Frontend
    UI[UI] --> API
  end
```

![Two grouped boxes, Backend and Frontend. Backend holds an API box connected to a database cylinder, Frontend holds a UI box connected to the API.](/diagrams/flowchart/subgraph.svg)

## Styling a node

style changes one node; classDef names a style you can reuse.

```mermaid
flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet
```

![Two boxes connected by an arrow. The right box is filled coral, the left box is filled light grey.](/diagrams/flowchart/styling.svg)

## Markdown in a label

Wrap the label in backticks and the text can be bold, italic or code.

```mermaid
flowchart LR
  A["`**Bold** text`"]
  B["``inline code``"]
```

![Two boxes, one labelled with bold text and one labelled with monospaced inline code.](/diagrams/flowchart/markdown-labels.svg)

## Icons

Font Awesome Free, spelled the Mermaid way: the name goes in the label and Mernyx draws the glyph. An icon it does not recognise leaves a gap the width of one icon instead of failing the diagram.

```mermaid
flowchart LR
  A([fa:fa-user User]) --> B([fa:fa-server Server])
  B --> C([fa:fa-database Database])
```

![A left-to-right flowchart of three boxes labelled User, Server and Database, each with a small Font Awesome Free icon in front of its label: a person, a server rack and a database cylinder.](/diagrams/flowchart/icons.svg)

Icons: Font Awesome Free, CC BY 4.0

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.