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