当前位置：首页 > news >正文

Markdown中流程图的用法

news 来源：原创 2025/5/11 2:36:46

Markdown中流程图图的用法

前言
语法详解
- 基本流程图
- 几何图形节点
- - 默认的节点
  - 分离节点的ID与内容
  - 节点形状
  - - 圆角形节点的语法
    - 圆形节点的语法。
    - 非对称节点语法
    - 菱形节点的语法。
    - 六角形节点的语法。
    - 平行四边形节点的语法。
    - 梯形节点的语法。
  - 连接线
  - - 基本的连接线语法。
    - 无向线段连接线。
    - 点状连接线。
    - 粗实连接线。
  - 视图分组。
  - 冒泡排序流程图。
小结
其他文章
快来试试吧☺️

Markdown中流程图的用法👈点击这里也可查看

前言

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

语法详解

基本流程图

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

```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 LR1号节点[在此输入希望在一号节点上显示的文字内容]```

渲染：

节点形状

形状可用于区分节点的不同属性，有利于丰富流程图的信息量，同时保持其简洁性。
在在 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 TBc1-->a2subgraph 第一组a1-->a2endsubgraph 第二组b1-->b2endsubgraph 第三组c1-->c2end```

渲染：

冒泡排序流程图。

实例九：

```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注释的用法

快来试试吧☺️

Markdown中流程图图的用法

前言

语法详解

基本流程图

几何图形节点

默认的节点

分离节点的ID与内容

节点形状

圆角形节点的语法

圆形节点的语法。

非对称节点语法

菱形节点的语法。

六角形节点的语法。

平行四边形节点的语法。

梯形节点的语法。

连接线

基本的连接线语法。

无向线段连接线。

点状连接线。

粗实连接线。

视图分组。

冒泡排序流程图。

小结

其他文章

快来试试吧☺️

相关文章：