« Mermaid » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| (10 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 5 : | Ligne 5 : | ||
= Flowchart = | = Flowchart = | ||
== | == Orientation == | ||
{| class="wikitable wtp" | {| class="wikitable wtp" | ||
! code | ! code | ||
| Ligne 23 : | Ligne 23 : | ||
<kode lang='mermaid'> | <kode lang='mermaid'> | ||
flowchart TB | flowchart TB | ||
1 --> | a --> b | ||
</kode> | |||
== [https://mermaid-js.github.io/mermaid/#/flowchart?id=node-shapes Node shape] == | |||
<kode lang='mermaid'> | |||
flowchart TB | |||
a[square] --> b(rounded) | |||
b --> c([stadium-shaped]) | |||
c --> d((circle)) | |||
d --> e{diamond} | |||
</kode> | |||
== [https://mermaid-js.github.io/mermaid/#/flowchart?id=links-between-nodes Links between nodes] == | |||
<kode lang='mermaid'> | |||
flowchart TB | |||
a --- b | |||
b --> c | |||
c -->|text| d | |||
d --o e | |||
e --x f | |||
f <--> g | |||
</kode> | |||
== [https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax Special characters] == | |||
<kode lang='mermaid'> | |||
flowchart TB | |||
a --> b("use (parenthesis), right arrow #rarr; and #quot;double quotes#quot;") | |||
</kode> | |||
== [https://mermaid-js.github.io/mermaid/#/flowchart?id=subgraphs Subgraph] == | |||
<kode lang='mermaid'> | |||
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 | |||
</kode> | |||
== [https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes Style] == | |||
<kode lang='mermaid'> | |||
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; | |||
</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
|
