这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战
基础语法
默认的节点
graph TD
Node
graph TD
Node
带文本的节点
graph TD
A[这是一个节点]
B["特殊字符()"]
graph TD
A[这是一个节点]
B["特殊字符()"]
- 注意:
- 不用使用end作为流程图的节点。为防止流程图被破坏,大写所有或任何一个字母,例如"End"或者"END"。
- 将文本放在引号内部,可以展示更多特殊字符。
图的走向
声明
- 使用
graph关键字来声明整个图形的走向。
走向
-
所有的走向如下表所示
- TB - 从上到下
- TD - 从上到下
- BT - 从下到上
- RL - 从右到左
- LR - 从左到右
-
从左向右
graph LR
开始-->结束
graph LR
开始-->结束
- 从上到下
graph TD
开始-->结束
graph TD
开始-->结束
节点形状
圆边节点
graph TD
Node(圆边节点)
graph TD
Node(圆边节点)
椭圆形节点
graph TD
Node([椭圆形节点])
graph TD
Node([椭圆形节点])
子程序节点
graph TD
Node[[子程序节点]]
graph TD
Node[[子程序节点]]
圆柱形节点
graph TD
Node[(圆柱形节点)]
graph TD
Node[(圆柱形节点)]
圆形节点
graph TD
Node((圆形节点))
graph TD
Node((圆形节点))
不对称节点
graph TD
Node>不对称节点]
graph TD
Node>不对称节点]
菱形节点
graph TD
Node{菱形节点}
graph TD
Node{菱形节点}
六角形节点
graph TD
Node{{六角形节点}}
graph TD
Node{{六角形节点}}
平行四边形节点
graph TD
Node[/平行四边形节点/]
graph TD
Node[/平行四边形节点/]
反平行四边形节点
graph TD
Node[\反平行四边形节点\]
graph TD
Node[\反平行四边形节点\]
梯形节点
graph TD
Node[/梯形节点\]
graph TD
Node[/梯形节点\]
反梯形节点
graph TD
Node[\反梯形节点/]
graph TD
Node[\反梯形节点/]
节点间的线
有箭头的线
graph LR
A-->B
graph LR
A-->B
有箭头的线上的文本
graph LR
A-->|文本|B
C--文本-->D
graph LR
A-->|文本|B
C--文本-->D
没有箭头的线
graph LR
A---B
graph LR
A---B
没有箭头的线上的文本
graph LR
A---|文本|B
C--文本---D
graph LR
A---|文本|B
C--文本---D
虚线
graph LR
A-.-B
graph LR
A-.-B
虚线上的文本
graph LR
A-.文本.->B
graph LR
A-.文本.->B
粗线
graph LR
A-.-B
graph LR
A==>B
粗线上的文本
graph LR
A==文本==>B
graph LR
A==文本==>B
线的长度
- 如果某些节点之间的连线需要跨越多个节点,那么就需要调整线的长度,参考如下表格:
|长度|1|2|3|
|:---:|:---:|:---:|:---:|
|普通线|
---|----|-----| |带箭头的普通线|-->|--->|---->| |粗线|===|====|=====| |带箭头的粗线|==>|===>|====>| |虚线|-.-|-..-|-...-| |带箭头的虚线|-.->|-..->|-...->|
graph LR
A--短线-->B
A--中线--->C
A--长线---->D
graph LR
A--短线-->B
A--中线--->C
A--长线---->D
子图
- 使用
subgraph...end关键字来定义
%% 这是注释
graph TD
subgraph first
B-->C
end
subgraph second [老二]
D-->E
end
A-->C
D-->C
%% 这是注释
graph TD
subgraph first
B-->C
end
subgraph second [老二]
D-->E
end
A-->C
D-->C
在Markdown语法中添加注释使用
%%.
以上便是UML流程图的介绍,以及相关的Markdown语法:)