« Mermaid » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
|||
| Ligne 84 : | Ligne 84 : | ||
= [https://mermaid.js.org/syntax/classDiagram.html Class diagram] = | = [https://mermaid.js.org/syntax/classDiagram.html Class diagram] = | ||
<kode lang='mermaid'> | |||
classDiagram | |||
direction LR | |||
class Class1 { | |||
string Property1 | |||
} | |||
class Enum1 { | |||
<<enum>> | |||
One = 1 | |||
Two | |||
} | |||
note for Enum1 "Enum note" | |||
Class1 -- Enum1 : Property2 | |||
</kode> | |||
Version du 12 février 2024 à 16:18
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 LR
class Class1 {
string Property1
}
class Enum1 {
<<enum>>
One = 1
Two
}
note for Enum1 "Enum note"
Class1 -- Enum1 : Property2
|
