Graph
graph
:绘制流程图
TD
声明流程图的方向,声明了图是自上而下的(TD或TB)
graph TD
Start --> Stop %%注释,由A到B,自上而下排
%% graph ,声明绘制流程图,TD:top to down
%% 第二行起建议缩进
%% 首行不可注释
%% --> 两个-,两边建议空格
类似,如下声明自左向右 (LR)
graph LR
Start --> Stop
流程图方向
所有的方向:
TB - top to bottom
TD - top-down/ same as top to bottom
BT - bottom to top
RL - right to left
LR - left to right
节点
节点id是流程图的基本单元,除了end
,其他字符都可以作为节点id,默认显示内容为节点id:
graph LR
E %% E为节点id,不能是"end",但可以是“End”、“END”
- 带内容的节点id
可以给节点id内容,后续可以引用之前定义的节点内容
graph LR
id1[This is the textin the box] --> id1
%% 节点id与内容之间没有空格
%% 可以引用之前定义的节点id
节点形状
节点可以有不同的形状,使用不同的符号,则产生不同box形状
graph TB
id1[矩形] -->
id2(圆角) -->
id3[[subroute process]] -->
id4[(圆柱形)] -->
id5([椭圆]) -->
id6((圆形)) -->
id7>不对称形状] -->
id8{菱形} -->
id9{{六边形}} -->
id10[/This is the text in the box/] -->
id11[\This is the text in the box\] -->
A[/Christmas\] -->
B[\Go shopping/]
节点之间的连接
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
graph LR
A --> B %% 箭头连接
graph LR
C --- D %%直线连接
graph LR
A-- text link ---B %% 文本连接
graph LR
A-- text link -->B %% 文本箭头连接
graph LR
A-.->B %% 虚线箭头
Dotted link with text
graph LR
A-. text .-> B %% 虚线箭头
Thick link
graph LR
A ==> B %% 粗箭头
graph LR
A == text ==> B %% 粗箭头文本