Markdown中流程图的用法
Markdown中流程图的用法👈点击这里也可查看
前言
Markdown的原生语法不支持绘制图形，但通过Mermaid扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 "流程图"、"时序图"、"类图"、"状态图"、"甘特图"、"饼图" 等。
Mermaid是一个方便于Markdown文档撰写者通过文本方式生成图形的扩展工具。相比于微软的Visio，它几行文字就可以生成一幅完整且美观的流程图。
本节将重点介绍如何通过 Mermaid 绘制「流程图」。
流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。
语法详解
基本流程图
流程图由几何图形节点以及连接点组成。几何图形节点是流程图内的各元素的载体，通常用形状来区分其属性，例如圆形 代表开始或结束，菱形 代表判断。连接线用于描述几何图形节点之间的联系，可能是有向线段，也可能是无向线段等。
在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，代码如下：
c
```mermaid
<!-- 此处的内容会被渲染成 mermaid 图形 -->
```基本流程图包含：流程图布局方向，几何图形和连接线三个部分组成。
实例一：
基本的竖向流程图。
代码：
```mermaid
graph TD
开始 --> 结束
```
渲染：
开始 结束
通过修改图表的声明，可以修改流程图的布局方向 。例如将上边的流程图转换为横向流程图 。
实例二：
基本的横向流程图
代码：
```mermaid
graph LR
开始 --> 结束
```
渲染：
开始 结束
支持的方向有：
| 标志 | 方向 |
|---|---|
| TB | top bottom - 从上到下 |
| BT | bottom top - 从下到上 |
| RL | right left - 从右到左 |
| LR | left right - 从左到右 |
| TD | 等同于 TB |
缩写单词含义：
Ttop ---Ddown
Lleft---Rright
几何图形节点
默认的节点
几何图形节点是流程图中的核心元素，其要素包括形状和内容。
在mermaid语法中，不加任何修饰的文字内容会被渲染成几何图形节点。
实例三：
默认的几何图形
代码：
```mermaid
graph LR
几何图形中的文本内容
```
渲染：
几何图形中的文本内容
分离节点的ID与内容
在相对复杂的场景中，同意图形可能被多次引用，如果图形中的文本较长，或者文本内容不足以体现图形的唯一性，可将图形节点的Id与其文本内容分开定义，以使结构更加清晰。
实例四：
将节点的ID和显示文本区分开。
代码：
```mermaid
graph LR
1号节点[在此输入希望在一号节点上显示的文字内容]
```
渲染：
在此输入希望在一号节点上显示的文字内容
节点形状
形状可用于区分节点的不同属性，有利于丰富流程图的信息量，同时保持其简洁性。
在在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。
实例五：
圆角形节点的语法
代码：
```mermaid
graph TD
节点ID(节点显示文本)
```
渲染：
节点显示文本
圆形节点的语法。
代码：
```mermaid
graph TD
节点ID((节点显示文本))
```
渲染：
节点显示文本
非对称节点语法
代码：
```mermaid
graph TD
节点ID>节点显示文本]
```
渲染：
节点显示文本
菱形节点的语法。
代码：
```mermaid
graph TD
节点ID{节点显示文本}
```
渲染：
节点显示文本
六角形节点的语法。
代码：
```mermaid
graph TD
节点ID{{节点显示文本}}
```
渲染：
节点显示文本
平行四边形节点的语法。
代码：
```mermaid
graph TD
右倾平行四边形[/平行四边形--右倾/]
```
```mermaid
graph TD
左倾平行四边形[\平行四边形--左倾\]
```
渲染：
平行四边形--右倾
平行四边形--左倾
梯形节点的语法。
代码：
```mermaid
graph TD
梯形[/梯形--正向\]
```
```mermaid
graph TD
反向梯形[\梯形--反向/]
```
渲染：
梯形--正向
梯形--反向
连接线
基本的连接线语法。
实例六：
```mermaid
graph LR
A-->B
```
渲染：
A B
不同种类的连接线可以表示不同类型的关系，例如，无方向的连接线可用来表示相关性、有方向的连接线可以表示数据流向或者节点间的依赖关系；用实线表示强关联、用虚线表示弱关联等待。
无向线段连接线。
实例 七：
```mermaid
graph LR
A --- B -- 带文字连接线 --- C
```
渲染：
带文字连接线 A B C
点状连接线。
```mermaid
graph LR
A -.- B -. 带文字连接线 .-> C
```
渲染：
带文字连接线 A B C
粗实连接线。
```mermaid
graph LR
A ==> B == 带文字连接线 ==> C
```
渲染：
带文字连接线 A B C
视图分组。
对于相对庞大的流程图，可以通过对视图分组，以区分体系内的不同模块，以及不同模块间的关联关系。
实例 八：
```mermaid
graph TB
c1-->a2
subgraph 第一组
a1-->a2
end
subgraph 第二组
b1-->b2
end
subgraph 第三组
c1-->c2
end
```
渲染：
第三组 第二组 第一组 c2 c1 b2 b1 a2 a1
冒泡排序流程图。
实例 九：
```mermaid
graph LR
执行1[i = 1]
执行2[j = 0]
执行3[i ++]
执行4["a = arr[j], b = arr[j + 1]"]
执行5[交换 a, b]
执行6[j ++]
判断1["i < n"]
判断2["j < n - i"]
判断3["a > b"]
开始 --> 执行1
执行1 --> 判断1
判断1 --Y--> 执行2
执行2 --> 判断2
判断2 --Y--> 执行4
判断2 --N--> 执行3
执行3 --> 判断1
执行4 --> 判断3
判断3 --N--> 判断2
判断3 --Y--> 执行5
执行5 --> 执行6
执行6 --> 判断2
判断1 --N--> 结束
```
渲染：
Y Y N N Y N i = 1 j = 0 i ++ a = arr[j], b = arr[j + 1] 交换 a, b j ++ i < n j < n - i a > b 开始 结束
小结
如果对您有帮助，请您点赞、收藏、关注、转发，让更多的人看到。
其他文章
快来试试吧☺️