« 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
Mermaid.svg
flowchart TB
    a --> b

Node shape

Mermaid.svg
flowchart TB
  a[square] --> b(rounded)
  b --> c([stadium-shaped])
  c --> d((circle))
  d --> e{diamond}

Links between nodes

Mermaid.svg
flowchart TB
  a --- b
  b --> c
  c -->|text| d
  d --o e
  e --x f
  f <--> g

Special characters

Mermaid.svg
flowchart TB
  a --> b("use (parenthesis), right arrow #rarr; and #quot;double quotes#quot;")

Subgraph

Mermaid.svg
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

Mermaid.svg
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

Mermaid.svg
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