Flowcharts
Example 1
graph TD
Start --> Stop
Example 2
graph LR
Start --> Stop
Example 3
graph LR
id
Example 4
graph LR
id1[This is the text in the box]
Example 5
graph LR
id1(This is the text in the box)
Example 6
graph LR
id1([This is the text in the box])
Example 7
graph LR
id1[[This is the text in the box]]
Example 8
graph LR
id1[(Database)]
Example 9
graph LR
id1((This is the text in the circle))
graph LR
id1>This is the text in the box]
Example 10
graph LR
id1{This is the text in the box}
Example 11
graph LR
id1{{This is the text in the box}}
Example 12
graph TD
id1[/This is the text in the box/]
Example 13
graph TD
id1[\This is the text in the box\]
Example 14
graph TD
A[/Christmas\]
Example 15
graph TD
B[\Go shopping/]
Example 16
graph LR
A-->B
Example 17
graph LR
A --- B
Example 18
graph LR
A-- This is the text! ---B
Example 19
graph LR
A---|This is the text|B
Example 20
graph LR
A-->|text|B
Example 21
graph LR
A-- text -->B
Example 22
graph LR;
A-.->B;
Example 23
graph LR
A-. text .-> B
Example 24
graph LR
A ==> B
Example 25
graph LR
A == text ==> B
Example 26
graph LR
A -- text --> B -- text2 --> C
Example 27
graph LR
a --> b & c--> d
Example 28
graph TB
A & B--> C & D
Example 29
graph TB
A --> C
A --> D
B --> C
B --> D
Example 30
flowchart LR
A --o B
B --x C
Example 31
flowchart LR
A o--o B
B <--> C
C x--x D
Example 32
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
Example 33
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
Example 34
graph LR
id1["This is the (text) in the box"]
Example 35
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Example 36
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Example 37
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Example 38
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Example 39
Example 40
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "http://www.github.com" "This is a tooltip for a link"
Example 41
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
Example 42
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
Example 43
Example 44
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Example 45
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Example 46
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
Example 47
Example 48
graph LR;
A-->B[AAABBB];
B-->D;
class A cssClass;
Example 49
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
Example 50
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]