Mermaid

De Banane Atomic
Aller à la navigationAller à la recherche

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;