Flowchart diagrams

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt

Use this file to discover all available pages before exploring further.

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