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) and right arrow #rarr;")

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