【Tool】UML流程图详解及Markdown语法

1,961 阅读2分钟

这是我参与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语法:)