Markdown中流程图的用法

前言

Markdown的原生语法不支持绘制图形，但通过Mermaid扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。
Mermaid是一个方便于Markdown文档撰写者通过文本方式生成图形的扩展工具。相比于微软的Visio，它几行文字就可以生成一幅完整且美观的流程图。
本节将重点介绍如何通过 Mermaid 绘制「流程图」。
流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

语法详解

基本流程图

流程图由几何图形节点以及连接点组成。几何图形节点是流程图内的各元素的载体，通常用形状来区分其属性，例如圆形代表开始或结束，菱形代表判断。连接线用于描述几何图形节点之间的联系，可能是有向线段，也可能是无向线段等。
在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，代码如下：

​```mermaid
<!-- 此处的内容会被渲染成 mermaid 图形 -->
​```

基本流程图包含：流程图布局方向，几何图形和连接线三个部分组成。
实例一：
基本的竖向流程图。

代码：

​```mermaid
graph TD
 开始 --> 结束
​```

渲染：

通过修改图表的声明，可以修改流程图的布局方向。例如将上边的流程图转换为横向流程图。
实例二：
基本的横向流程图
代码：

​```mermaid
graph LR
 开始 --> 结束
​```

渲染：

支持的方向有：

缩写单词含义：
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​
```​

渲染：

不同种类的连接线可以表示不同类型的关系，例如，无方向的连接线可用来表示相关性、有方向的连接线可以表示数据流向或者节点间的依赖关系；用实线表示强关联、用虚线表示弱关联等待。

无向线段连接线。

实例 七：

```mermaid 
graph LR 
A --- B -- 带文字连接线 --- C​
```​

渲染：

点状连接线。

```mermaid 
graph LR 
A -.- B -. 带文字连接线 .-> C​
```​

渲染：

粗实连接线。

```mermaid 
graph LR 
A ==> B == 带文字连接线 ==> C​
```​

渲染：

视图分组。

对于相对庞大的流程图，可以通过对视图分组，以区分体系内的不同模块，以及不同模块间的关联关系。
实例 八：

```mermaid 
graph TB
    c1-->a2
    subgraph 第一组
    a1-->a2
    end
    subgraph 第二组
    b1-->b2
    end
    subgraph 第三组
    c1-->c2
    end


```​

渲染：

冒泡排序流程图。

实例 九：

```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--> 结束
```​

渲染：

小结

如果对您有帮助，请您点赞、收藏、关注、转发，让更多的人看到。

其他文章

点击此处查看
👉Markdown段落的空行缩进用法
👉Markdown表格的使用
👉Markdown语法字体字号讲解
👉Markdown语法字体字号讲解
👉Markdown如何填充前景色、背景色
👉Markdown代码块，超链接，图片的插入
👉Markdown如何添加任务列表-复选框的添加
👉Markdown中特殊符号的使用
👉Markdown实现代码高亮，注释代码
👉Markdown注释的用法

快来试试吧☺️