Mermaid
De Banane Atomic
Aller à la navigationAller à la recherche
Links
Flowchart
Orientation
| code | description |
|---|---|
| TB | top to bottom |
| TD | top-down/ same as top to bottom |
| BT | bottom to top |
| RL | right to left |
| LR | left to right |
|
flowchart TB
a --> b
|
Node shape
|
|
flowchart TB
a[square] --> b(rounded)
b --> c([stadium-shaped])
c --> d((circle))
d --> e{diamond}
|
Links between nodes
|
|
flowchart TB a --- b b --> c c -->|text| d d --o e e --x f f <--> g |
Special characters
|
|
flowchart TB
a --> b("use (parenthesis), right arrow #rarr; and #quot;double quotes#quot;")
|
Subgraph
|
|
flowchart TB
a --> sg1
subgraph sg1[subgraph 1]
direction LR
b --> c
end
%% change the background of sg1 to transparent
classDef transparent fill:transparent
class sg1 transparent
|
Style
|
|
flowchart TB a --> b %% style of the first (0) link linkStyle 0 stroke:blue,stroke-width:4px; %% style the node b style b fill:blue,stroke:red,stroke-width:2px,color:green,stroke-dasharray: 5 5 %% create a class style classDef className fill:blue,stroke:red,stroke-width:4px; %% apply the class style to nodes class a,b className; |
Class diagram
|
|
classDiagram
%% direction of the diagram
direction LR
class Class1 {
string Property1
}
class Enum1 {
<<enum>>
One = 1
Two
}
note for Enum1 "Enum note"
%% link
Class1 -- Enum1 : Property2
|
