Skip to content
Diagrams and visualizations using Mermaid
Share
Explore
Diagrams and visualizations using Mermaid

Flowcharts

Graph
Orientation:
LR
Start --> Stop
Nodes & shapes
Theme:
default

Default node


With text

With round edges


Stadium-shaped


Subroutine shape


Cylindrical shape



Circle shape


Asymmetric shape



Rhombus shape



A hexagon

Parallelogram


Parallelogram alt

Trapezoid


Trapezoid alt

id

id1[The text in the box]

id1(The text in the box)

id1([The text in the box])

id1[[The text in the box]]

id1[(Database)]



id1((The text in the circle))


id1>The text in the box]



id1{The text in the box}

id1{{The text in the box}}

id1[/The text in the box/]

id1[\The text in the box\]

A[/Christmas\]

B[\Go shopping/]
Links between nodes
A link with arrow head


An open link


Text on links


With arrowhead and text


Dotted link


Dotted link with text

Thick link


Thick link with text

A-->B

A --- B

A---|This is the text!|B

A-->|text|B

A-.->B;

A-. text .-> B

A ==> B

A == text ==> B
Chaining of links
A -- text --> B -- text2 --> C
a --> b & c--> d
A & B--> C & D
Other arrow types
A --o B
B --x C
Multi directional arrows
A o--o B
B <--> C
C x--x D
Additional length in a link
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
Subgraphs
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Styling and classes
Styling links
It is possible to style links. The order number of when the link was defined in the graph is used. In the example below the style defined in the linkStyle statement will belong to the second link in the graph:
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look.
A:::someclass --> B
classDef someclass fill:#f96;
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.