Markdown(五)——绘图工具mermaid之流程图Flowchart

最新推荐文章于 2025-03-25 08:59:18 发布

陆小白很白

最新推荐文章于 2025-03-25 08:59:18 发布

阅读量4.5k

点赞数 1

分类专栏： MarkDown基础操作

本文链接：https://blog.youkuaiyun.com/qq_36749906/article/details/107579687

版权

MarkDown基础操作专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用Markdown的绘图工具Mermaid创建流程图，包括流程图的流向设定（TB, LR），结点类型（如开始/结束、处理动作、判断、数据输入/输出），连线类型（单箭头、无箭头、有注释、无注释、虚线连接线）以及子图的使用方法。" 121922510,11666695,《21天学通Python》编程入门指南,"['Python', '开发语言', '后端', '编程入门']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：更新下mermaid画图的流程图。

流程图

跟之前的状态图一样，要注意的是需要在在开头加上mermaid关键字。

1. 流程图流向

在最初设计流程图的时候，首先要确定流程图的总体流向，流程图流动方向有如下几种:

方向	标记	备注
上=>下	TB	Top to Bottom
上=>下	BT	Bottom to Top
左=>右	LR	Left to Right
右=>左	RL	Right to Left

表示流向时，在最开始用关键字graph+ 上述方向标记符确定流程图流向。

从上往下 TB
```
graph TD
Start --> Stop
```

从左往右 LR
```
graph LR
Start --> Stop
```

2. 结点类型

下面只介绍基本流程图中常见的结点类型。

2.1圆角矩形——代表流程的开始或结束

```
graph LR
id1(This is the text in the box)
```

2.2 矩形——代表要处理的动作

graph LR
id1[This is the text in the box]

2.3菱形——代表判断

graph LR
C{decision}

2.4平行四边形——代表数据输入输出操作

graph TD
id1[/This is the text in the box/]

3.连线类型

连线类型也只介绍几种基本类型，分别为有无箭头连线、有无注释连线以及虚线连接线。

3.1单箭头无注释连线

graph LR
A-->B

3.2无箭头无注释连线

graph LR
A --- B

3.3单箭头有注释连线

graph LR
A-- text -->B

3.4无箭头有注释连线

graph LR
A-- This is the text! ---B

3.5虚线有注释连线

	graph LR
   A-. text .-> B

3.6虚线无注释连线

graph LR;
A-.->B;

4.子图类型

流程图中的子图由一对graph和end包围，并且子图的名字跟在graph后。

graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end