Flowchart diagrams

Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and linking to and from subgraphs.

​

Basic example

​

Direction

This statement declares the direction of the flowchart. You can orient flowcharts in different directions:

• TB or TD - Top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

​

Node shapes

Mermaid supports a wide variety of node shapes to represent different types of elements in your flowchart.

​

Basic shapes

​

Advanced shapes

​

Extended shape syntax (v11.3.0+)

Mermaid introduces 30+ new shapes using a general syntax format:

Common shape types

• rect - Rectangle (process)
• rounded - Rounded rectangle (event)
• stadium - Stadium shape (terminal)
• subroutine - Rectangle with double lines
• cylinder - Database
• circle - Circle (start/end)
• diamond - Diamond (decision)
• hexagon - Hexagon (preparation)
• doc - Document shape
• delay - Half-rounded rectangle

See the full list in the source documentation for all 30+ available shapes.

​

Links between nodes

Nodes can be connected with different types of links:

​

Arrow types

​

Links with text

​

Chaining links

​

Multi-directional arrows

​

Node text formatting

​

Unicode text

Use " to enclose unicode text:

​

Markdown formatting

Use double quotes and backticks to enable markdown:

​

Subgraphs

You can group nodes into subgraphs:

​

Direction in subgraphs

​

Styling

​

Styling a node

​

Using classes

​

Styling links

​

Interaction

You can bind click events to nodes:

​

Comments

Comments must be on their own line and prefaced with %%:

​

Special characters

Use quotes to include special characters:

​

Entity codes