flowchart TD
A1-->B1 %%arrow head
A2---B2 %%open link
A3_1--text---B3_1 %%text on links
A3_2---|text|B3_2 %%text on links
A4_1-->|text|B4_1 %%with arrow head and text
A4_2--text-->B4_2 %%with arrow head and text
A5-.->B5 %%dotted link
A6-.text.->B6 %%dotted link with text
A7==>B7 %%thick link
A8==text==>B8 %%thick link wiht text
flowchart TD
A --> B
C ---->|text1| D
E -- text2 ----> F
linkStyle 2 stroke:#ff3,stroke-width:4px,color:green;
style A fill:red,stroke:#ff3,height:10,width:10;
%% for dotted or thick links, added dots or equal signs
Special characters that break syntax
flowchart LR
id1["This is (#10004;) #10008;"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Subgraths
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
flowchart TB %%set edges to and from subgraphs
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
flowchart LR %%direction in subgraphs(not work)--can use VS Code
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Interaction
flowchart 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"
%% click nodeId callback
%% click nodeId call callback()
flowchart 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
Styling and classes
styling links
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
%% to style the fourth link
gantt %%use Typora better
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
%%functionality added :milestone
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h