Markdown 流程图绘制详解

news2024/12/23 8:12:08

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

文章目录

  • 一、前言
  • 二、基本语法
    • 2.1 流程方向
  • 三、连接线的种类
    • 3.1 连接线的形状
    • 3.2 新箭头类型
    • 3.3 带文字连接线
    • 3.4 连接线样式
    • 3.5 交互语法
    • 3.6 串联连接
    • 3.7 视图分组
    • 3.8 使用场景及实例
  • 四、节点的形状
    • 4.1. 形状图形表
    • 4.2 形状介绍
  • 五. 其他
    • 5.1 注解
    • 5.2 转义字符
  • 五. 总结

一、前言

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。

本节将重点介绍如何通过 Mermaid 绘制「流程图」。

流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

二、基本语法

基本的流程图包含：流程图布局方向、几何图形和连接线三个部分组成。以下是一个简单的Markdown流程图示例，采用Mermaid语法：

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

说明：

  • graph LR;：指定这是一个有向图。
  • 节点以及节点之间的关系通过-->来表示。
  • 方框中的文字表示节点的名称，例如A[开始]表示开始节点。
  • 决策节点后接两条分支线，分别表示决策的两个选项。
  • 流程图的开始和结束通过特殊节点开始和结束表示。

2.1 流程方向

符号/术语含义
TB /TD
(两者相同)		从上到下（Top to Bottom）的流程方向
BT从下到上（Bottom to Top）的流程方向
LR从左到右（Left to Right）的流程方向
RL从右到左（Right to Left）的流程方向
HZ水平方向（Horizontal）的流程方向
VT垂直方向（Vertical）的流程方向

三、连接线的种类

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

3.1 连接线的形状

线的形状
请添加图片描述箭头形状
请添加图片描述双向箭头
请添加图片描述语法示例

连接线实例：
```mermaid 
graph LR;
	test((指我干啥))
	直线---test
	直线箭头-->test
	虚线-.-test
	虚线箭头-.->test;
	粗直线===test;
	粗箭头==>test;
	双竖线加标签---|"||加标签"| test;
```

效果如下：
||加标签
指我干啥
直线
直线箭头
虚线
虚线箭头
粗直线
粗箭头
双竖线加标签

对于点或粗链接，要添加的字符是等号或点，如下表所示：

长度1 个23
无向------------
普通箭头-->--->---->
加粗============
加粗箭头==>===>====>
点状-.--..--...-
点状箭头-.->-..->-...->

3.2 新箭头类型

以下是支持的新类型的箭头：

```mermaid 
flowchart LR
    A --o B
    B --x C
```
A
B
C

多方向箭头：

```mermaid 
flowchart LR
    A o--o B
    B <--> C
    C x--x D
```
A
B
C
D

3.3 带文字连接线

带文字连接线可以在连接线上增加连接线的注释。注释有两种写法：

写在末尾：||符号，只需要在连接线符号末尾增加—>|文字|即可展示。

写在中间：类似—文字—>、-. 文字 .->，等于是重复连接符号，前半部分是定义上一个图形到文字的连接线样式，后半部分是定义文字到图形的连接线样式。

介绍语法
不带描述文字A--描述---B
带描述的箭头A--描述-->B
带描述的虚线连指向A-.描述.->B
带描述的加粗箭头指向A==描述==>B
末尾增加文字A--->|描述|B

3.4 连接线样式

可以对连接线进行样式设置。例如，您可能希望对流程中倒退的连接线进行样式设置。因为连接不像节点那样可以设置 id，所以需要其他确定连接应附加到哪种样式的方法。

语法示例

**连接线样式** 在 linkStyle 语句中定义的样式
```mermaid
graph LR;
    A-->B;
linkStyle 0 stroke:#ff3,stroke-width:4px,color:red;
```


**节点样式** 可以为节点定义指定的样式，例如更粗的边框或不同的背景色：
```mermaid
graph LR
   A-->B;
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```

**类 Class** 比每次定义样式更方便的是定义一个样式 class，并将该 class 添加到不同的节点上。
```mermaid
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;
```

效果如下：

连接线样式 在 linkStyle 语句中定义的样式
A
B

节点样式 可以为节点定义指定的样式，例如更粗的边框或不同的背景色：
A
B

类 Class 比每次定义样式更方便的是定义一个样式 class，并将该 class 添加到不同的节点上。
A
B

3.5 交互语法

可以在节点上定义点击时跳转到超链接。

语法示例

**跳转链接交换** 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 （支持 _self，_blank，_parent 和 _top）：
```mermaid
graph LR;
    百度-->知乎;
    click A "http://www.baidu.com/" _blank
    click B "http://www.zhihu.com/" _blank
```

效果如下：

跳转链接交换 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 （支持 _self，_blank，_parent 和 _top）：
百度
知乎

3.6 串联连接

在Mermaid中，可以使用一行代码声明多个连接或节点之间的关系，这使得描述依赖关系变得非常简洁。以下是一些示例：

语法示例

1. **多个连接关系：**

```mermaid
flowchart LR
   A -- 文字 --> B -- 文字 --> C
```

2. **多个节点连接：**

```mermaid
flowchart LR
   a --> b & c--> d
```

3. **简洁的依赖关系声明：**

```mermaid
flowchart TB
    A & B--> C & D
```

效果如下：

  1. 多个连接关系：
文字
文字
A
B
C
  1. 多个节点连接：
a
b
c
d
  1. 简洁的依赖关系声明：
A
B
C
D

这种简洁的语法提供了更清晰的流程图表示方式。然而，请注意，过于紧凑的表示方式可能会降低Markdown的可读性。在选择使用这种语法时，请确保图表仍然易于理解。

基本语法等价表示

虽然一行代码可以表示多个连接关系，但是等价的基本语法会更加详细。以下是等价的基本语法表示：

语法示例

```mermaid
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
```

效果如下：
A
C
D
B

这四行代码与前述一行代码具有相同的效果。在选择使用哪种语法时，请根据图表的复杂性和可读性做出明智的决策。

3.7 视图分组

mermaid支持将图的一部分包裹起来，形成子图，效果如下：
语法示例

**子图**
```mermaid 
graph LR;
	subgraph 第一个子图
	测试数据1 --> 指我干啥
	end

	subgraph 第二个子图
	测试数据2 --> 你也指我干啥
	end
```

**多子图流转**
在多个子图中，可以在子图之间设置连接线，如下面的例子所示：
```mermaid 
flowchart TB
    c1-->a2
    subgraph A
    a1-->a2
    end
    subgraph B
    b1-->b2
    end
    subgraph C
    c1-->c2
    end
    A --> B
    C --> B
    B --> c2
```

**子图的方向**
在多个流程图中，您可以使用方向语句来设置子图将呈现的方向，就像下面的例子所示：
```mermaid
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
```

​​效果如下​​
子图

第二个子图
第一个子图
你也指我干啥
测试数据2
指我干啥
测试数据1

多子图流转
在多个子图中，可以在子图之间设置连接线，如下面的例子所示：

C
A
c2
c1
B
b2
b1
a2
a1

子图的方向
在多个流程图中，您可以使用方向语句来设置子图将呈现的方向，就像下面的例子所示：
TOP
B1
f1
i1
B2
f2
i2
A
B

3.8 使用场景及实例

流程图常用于项目的需求分析和设计阶段，也较常出现于程序使用手册中。
冒泡排序流程图。

语法示例

```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
开始
结束

​

四、节点的形状

在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。

语法示例

**形状语法示例：为方便我们分上下两组显示**
```mermaid 
graph TB;
	A(圆角形节点)
	B([跑道形节点])
	C[(圆柱形节点)]
	D{菱形节点}
	E((圆形节点))
	F{{六角形节点}}
```

```mermaid 
graph TB;
	G>非对称形节点]
	H[/梯形--正向\]
	I[\梯形--反向/]
	J[/平行四边形--右倾/]
	K[\平行四边形--左倾\]
	L[[子程序形状]]
```

效果如下：

形状语法示例：为方便我们分上下两组显示

圆角形节点
跑道形节点
圆柱形节点
菱形节点
圆形节点
六角形节点
非对称形节点
梯形--正向
梯形--反向
平行四边形--右倾
平行四边形--左倾
子程序形状

4.1. 形状图形表

请添加图片描述

4.2 形状介绍

在Mermaid图表中，你可以使用不同的Markdown节点形状来呈现各种元素。以下是一些常见的Markdown节点形状及其用途的简单介绍：

名称代码用法
圆角形节点ID(round edge)表示起点、终点或注重循环的元素。
跑道形节点ID([straight path])用于表示直线路径或流程中的步骤。
圆柱形节点ID[(cylinder)]通常用于表示过程或操作，也可以用于表示立体感的元素。
菱形节点ID{diamond}用于表示判断或决策的节点。
圆形节点ID((circle))用于表示起点、终点或注重循环的元素。
六角形节点ID{{hexagon}}用于表示起点、终点或注重循环的元素。
非对称形节点ID>asymmetric]用于表示不对称的元素。
梯形（正向）节点ID[/trapezoid]用于表示正向梯形形状的节点。
梯形（反向）节点ID[\reversed trapezoid/]用于表示反向梯形形状的节点。
平行四边形（右倾）节点ID[/parallelogram/]用于表示右倾的平行四边形。
平行四边形（左倾）节点ID[\parallelogram]用于表示左倾的平行四边形。
子程序形状节点ID[[subroutine shape]]用于表示子程序形状的节点。

这些节点形状可以根据需要组合使用，以创建具有更多细节和表达力的Mermaid图表。

五. 其他

5.1 注解

可以在流程图中输入注释，解析器将忽略该注释。注释需要在独立的行内，并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何流程图语法：

语法示例

**注释** %%号为注释符，会将符号之后到此行结束都视为注释。
```mermaid
graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

效果如下：

text
text2
A
B
C

5.2 转义字符

可以使用下述示例的语法转义字符：

语法示例

```mermaid
graph LR
    A["一个双引号:#quot;"] -->B["一个十进制数字表示的符号:#9829;"]
```

数字为十进制，因此 # 符号可以编码为 #35;。此外，也支持使用 HTML 字符名称。

效果如下：
一个双引号:"
一个十进制数字表示的符号:♥

五. 总结

  • Mermaid 为 Markdown 提供了文本转换为图形的扩展功能；
  • Mermaid 方式渲染的流程图包含布局方向、图形节点和连接线三个基本要素；
  • Mermaid 流程图支持多种节点形状、连接线种类，可以使流程图具有丰富的表现力。

文章写作不易，您的支持是我最大的动力，请👉关注✨、点赞👍、收藏📂、评论💬。
请添加图片描述

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1389232.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

二叉树的深度遍历

二叉树的深度遍历

目录 深度优先遍历&#xff1a; 二叉树节点定义&#xff1a; 递归法&#xff1a; 前序 中序 后序 迭代法&#xff1a; 前序 中序 后序 迭代法&#xff08;统一写法&#xff09; 前序 中序 后序 广度优先遍历&#xff1a; 二叉树的遍历方法包括两种&#xff1a…
阅读更多...
Vue创建项目配置情况

Vue创建项目配置情况

刚开始接触vue项目创建和运行因为node版本和插件版本不一致时长遇到刚装好插件&#xff0c;项目就跑不起来的情况&#xff0c;特此记录一下 vue -V vue/cli 5.0.8 node -v v12.22.12 npm -v 6.14.16 关闭驼峰命名检查、未使用语法检查 package.json文件内容&#xff1a; {&…
阅读更多...
3dmax渲染出现马赛克该怎么办？

3dmax渲染出现马赛克该怎么办？

为什么渲染会出现马赛克问题呢&#xff0c;什么原因导致的呢&#xff0c;该如何解决呢&#xff1f; 原因一 3dmax渲染出来马赛克可能是因为勾选了 dont reder final image(不渲染最终图像)&#xff0c;所以导致3dmax渲染出来马赛克。 解决方法&#xff1a; 打开渲染器设置菜…
阅读更多...
web练习2

web练习2

需求 1.计算用户指定的数值内的奇数和。例如用户输入的是10则计算13579的和 <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>作业1</title></head> <body> <script>//计算用…
阅读更多...
迅软科技丨IT企业如何应对数据泄密危机？

迅软科技丨IT企业如何应对数据泄密危机？

随着信息技术的快速发展&#xff0c;软件IT行业面临着前所未有的数据安全挑战。黑客攻击、病毒传播、内部泄密等安全威胁层出不穷&#xff0c;给企业的核心资产和运营带来严重威胁。同时&#xff0c;国家对于数据安全的法律法规也日益严格&#xff0c;要求企业必须采取更加有效…
阅读更多...
边缘计算的挑战和机遇（结合RDH-EI）

边缘计算的挑战和机遇（结合RDH-EI）

边缘计算的挑战和机遇 边缘计算面临着数据安全与隐私保护、网络稳定性等挑战&#xff0c;但同时也带来了更强的实时性和本地处理能力&#xff0c;为企业降低了成本和压力&#xff0c;提高了数据处理效率。因此&#xff0c;边缘计算既带来了挑战也带来了机遇&#xff0c;需要我…
阅读更多...
瑞_Java开发手册_（七）设计规约

瑞_Java开发手册_（七）设计规约

文章目录 设计规约的意义设计规约 &#x1f64a;前言&#xff1a;本文章为瑞_系列专栏之《Java开发手册》的设计规约篇。由于博主是从阿里的《Java开发手册》学习到Java的编程规约&#xff0c;所以本系列专栏主要以这本书进行讲解和拓展&#xff0c;有需要的小伙伴可以点击链接…
阅读更多...
K8S中使用helm安装MinIO

K8S中使用helm安装MinIO

注意事项 使用helm部署MinIO分为两部分 helm部署MinIO operator&#xff0c;用来管理tenant&#xff08;K8S集群中只能部署一个&#xff09;helm部署MinIO tenant&#xff0c;真实的MinIO Cluster&#xff08;K8S集群中可以部署多个&#xff09; 使用helm部署到K8S集群&…
阅读更多...
CC工具箱使用指南：【获取所有字段信息】

CC工具箱使用指南：【获取所有字段信息】

一、简介 这个工具的目的简单易懂&#xff0c;就是获取选定要素图层的所有字段信息。 本身不对要素图层作任何处理&#xff0c;只是一个查看属性的工具。 问我要用在什么地方&#xff0c;我也不知道-_- 二、工具参数介绍 点击【信息获取】组里的【获取所有字段信息】工具&a…
阅读更多...
vue3二次封装element-ui中的table组件

vue3二次封装element-ui中的table组件

为什么要做这件事 借助封装table组件的过程来巩固一下vue3相关知识点。 组件有哪些配置项 options:表格的配置项data: 表格数据源elementLoadingText&#xff1a;加载文案elementLoadingSpinner&#xff1a;加载图标elementLoadingBackground&#xff1a;背景遮罩的颜色elem…
阅读更多...
解码Java SPI：深入理解与实践【七】

解码Java SPI：深入理解与实践【七】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 解码Java SPI&#xff1a;深入理解与实践【七】 前言SPI机制简介&#xff1a;SPI的工作原理java标准SPI示例总结 前言 在编写Java应用程序时&#xff0c;我们经常需要使用不同的库和框架来扩展功能。…
阅读更多...
NET Core发布 HTTP Error 500.31 - Failed to load ASP.NET Core runtime

NET Core发布 HTTP Error 500.31 - Failed to load ASP.NET Core runtime

记录一下踩过的坑&#xff1a; 首先&#xff0c;不论是500.31还是500.30 &#xff0c;首先确保安装了三个文件 1.NET Core RunTime 2.NET SDK 3.NET Hosting 其次&#xff0c;确保三个文件的版本一致&#xff0c;如下&#xff1a; 要装就统一装同一个大版本&#xff0c;不要东…
阅读更多...
streamlit配合plotly绘制交互式图表

streamlit配合plotly绘制交互式图表

借助st.plotly_chart实现 官方介绍&#xff1a;st.plotly_chart 案例&#xff1a; import pandas as pd import plotly.graph_objs as go import plotly.express as pxst.subheader("课题组成员", dividerred) df pd.read_excel("./data/summary.xlsx"…
阅读更多...
护眼灯到底有用吗知乎？护眼台灯的作用

护眼灯到底有用吗知乎？护眼台灯的作用

近年来&#xff0c;随着电子产品的普及和使用时间的增加&#xff0c;人们对眼部健康的关注度也日益提高。为解决由此带来的问题&#xff0c;护眼台灯在这一背景下崭露头角。护眼台灯是一种融合先进技术的台灯&#xff0c;旨在缓解眼部疲劳并保护视力&#xff0c;那护眼台灯究竟…
阅读更多...
第七站:C++面向对象训练

第七站:C++面向对象训练

1:介绍 创建两个类,一个boy类,一个girl类,实现对两个类的数据输入,并通过main函数,对两个类的成员进行比较匹配 涉及: vector容器,面向对象,const关键字, stringstream(sstream.h) stringstream用法 stringstream ret;//可以将写入的数据转换成字符串 ret << &quo…
阅读更多...
利用python将Excel文件拆分为多个CSV

利用python将Excel文件拆分为多个CSV

目录 一、准备工作 二、拆分Excel文件为多个CSV 1、读取Excel文件&#xff1a; 2、确定要拆分的列&#xff1a; 3、创建空的字典来存储CSV文件&#xff1a; 4、循环遍历数据并根据类别拆分&#xff1a; 5、打印或返回CSV文件名字典&#xff1a; 6、保存CSV到特定目录&a…
阅读更多...
python.24.1.16函数

python.24.1.16函数

python自带函数 自定义函数 参数的使用
阅读更多...
机器学习——支持向量机SVM

机器学习——支持向量机SVM

1 摘要&#xff1a; 支持向量机&#xff08;SVM&#xff09;是一种二类分类模型&#xff0c;其基本模型是在特征空间上找到最佳的分离超平面使得训练集上正负样本间隔最大&#xff0c;间隔最大使它有别于感知机&#xff0c;支持向量机也可通过核技巧使它成为非线性分类器。支持…
阅读更多...
presto 支持regexp_count

presto 支持regexp_count

一、背景 1、查询regexp_count 函数提示未注册 用户想正则查询特定字符出现次数 function regexp_count not registered 二、调研 1、官网地址&#xff1a; Presto Documentation — Presto 0.284 Documentation 2、regexp_extract_all Regular Expression Functions —…
阅读更多...
c++时间复杂度详解

c++时间复杂度详解

1.基本概念 在计算机科学中&#xff0c;时间复杂性&#xff0c;又称时间复杂度&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定性描述该算法的运行时间。这是一个代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述&#xff0c;不包括这个函数的低阶项和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023