Diagrams and visualizations using Mermaid

Explore

Diagrams and visualizations using Mermaid

Flowcharts

All Flowcharts are composed of nodes, the geometric shapes and edges, the arrows or lines.

⁠

Syntax documentation

⁠

Graph

Orientation:

⁠

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

⁠

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.