« Mermaid » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| (4 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 49 : | Ligne 49 : | ||
<kode lang='mermaid'> | <kode lang='mermaid'> | ||
flowchart TB | flowchart TB | ||
a --> b("use (parenthesis) | a --> b("use (parenthesis), right arrow #rarr; and #quot;double quotes#quot;") | ||
</kode> | </kode> | ||
| Ligne 81 : | Ligne 81 : | ||
%% apply the class style to nodes | %% apply the class style to nodes | ||
class a,b className; | class a,b className; | ||
</kode> | |||
= [https://mermaid.js.org/syntax/classDiagram.html Class diagram] = | |||
<kode lang='mermaid'> | |||
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 | |||
Parent <|-- Child | |||
</kode> | </kode> | ||
Dernière version du 5 mars 2024 à 09:13
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
Parent <|-- Child
|
