« Mermaid » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:Langages de Programmation = Links = * [https://mermaid-js.github.io Mermaid JS] * [https://mermaid.live online editor] ») |
|||
| (12 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 3 : | Ligne 3 : | ||
* [https://mermaid-js.github.io Mermaid JS] | * [https://mermaid-js.github.io Mermaid JS] | ||
* [https://mermaid.live online editor] | * [https://mermaid.live online editor] | ||
= Flowchart = | |||
== Orientation == | |||
{| class="wikitable wtp" | |||
! 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 | |||
|} | |||
<kode lang='mermaid'> | |||
flowchart TB | |||
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> | |||
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
|
