Mermaid Flowcharts
This is a test page to show which features of Mermaid work using the Mermaid plugin.
A Node (default)
graph LR
id
A Node with text
graph LR
id1[This is the text in the box]
Graph (top-down)
graph TD
Start --> Stop
Graph (left-right)
graph LR
Start --> Stop
Node Shapes
A node with round edges
graph LR
id1(This is the text in the box)
A stadium-shaped node
graph LR
id1([This is the text in the box])
A node in a subroutine shape
graph LR
id1[[This is the text in the box]]
A node in a cylindrical shape
graph LR
id1[(Database)]
A node in the form of a circle
graph LR
id1((This is the text in the circle))
A node in an asymmetric shape
graph LR
id1>This is the text in the box]
A node (rhombus)
graph LR
id1{This is the text in the box}
A node (hexagon)
graph LR
id1{{This is the text in the box}}
Parallelogram
graph TD
id1[/This is the text in the box/]
Parallelogram (alt)
graph TD
id1[\This is the text in the box\]
Trapezoid
graph TD
A[/Christmas\]
Trapezoid alt
graph TD
B[\Go shopping/]
Links between nodes
A link with arrow head
graph LR
A-->B
An open link
graph LR
A --- B
Text on links
graph LR
A-- This is the text! ---B
or
graph LR
A---|This is the text|B
A link with arrowhead and text
graph LR
A-->|text|B
or
graph LR
A-- text -->B
Dotted link
graph LR;
A-.->B;
Dotted link with text
graph LR
A-. text .-> B
Thick link
graph LR
A ==> B
Thick link with text
graph LR
A == text ==> B
Chaining of links
graph LR
A -- text --> B -- text2 --> C
or multiple node links in the same line
graph LR
a --> b & c--> d
or a very expressive way
graph TB
A & B--> C & D
or lagom example
graph TB
A --> C
A --> D
B --> C
B --> D
Beta: New arrow types
flowchart LR
A --o B
B --x C
Beta: Multi directional arrows
flowchart LR
A o--o B
B C
C x--x D
Minimum length of a link
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
or equivalent
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
Special characters that break syntax
graph LR
id1["This is the (text) in the box"]
Entity codes to escape characters
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Subgraphs
Example
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
or explicit id for subgraph
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Beta: Flowcharts
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Interaction
click nodeId callback
click nodeId call callback()Example of tooltip usage below
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "http://www.github.com" "This is a tooltip for a link"
Example with link target to the click definition
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
Comments
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Styling and classes
Styling links
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Styling a node
graph LR
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
Example
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
attachment of class to a node
class nodeId1 className;
attach a class to a list of nodes
class nodeId1,nodeId2 className;
or a shorter form of adding a class using ::: operator
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
Css classes
graph LR;
A-->B[AAABBB];
B-->D;
class A cssClass;
Default class
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
Basic support for fontawesome
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
Graph declarations with spaces between vertices and link and without semicolon
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]