Markdown 流程图绘制详解

✍️作者简介:小北编程(专注于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 LRA --o BB --x C
```
A
B
C

多方向箭头:

```mermaid 
flowchart LRA o--o BB <--> CC 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 LRA-->B;style A fill:#f9f,stroke:#333,stroke-width:4pxstyle B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```**类 Class** 比每次定义样式更方便的是定义一个样式 class,并将该 class 添加到不同的节点上。
```mermaid
graph LRA:::someclass --> BclassDef 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/" _blankclick B "http://www.zhihu.com/" _blank
```

效果如下:

跳转链接交换 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 (支持 _self,_blank,_parent 和 _top):

百度
知乎

3.6 串联连接

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

语法示例

1. **多个连接关系:**```mermaid
flowchart LRA -- 文字 --> B -- 文字 --> C
```2. **多个节点连接:**```mermaid
flowchart LRa --> b & c--> d
```3. **简洁的依赖关系声明:**```mermaid
flowchart TBA & B--> C & D
```

效果如下:

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

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

基本语法等价表示

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

语法示例

```mermaid
flowchart TBA --> CA --> DB --> CB --> D
```

效果如下:

A
C
D
B

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

3.7 视图分组

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

**子图**
```mermaid 
graph LR;subgraph 第一个子图测试数据1 --> 指我干啥endsubgraph 第二个子图测试数据2 --> 你也指我干啥end
```**多子图流转**
在多个子图中,可以在子图之间设置连接线,如下面的例子所示:
```mermaid 
flowchart TBc1-->a2subgraph Aa1-->a2endsubgraph Bb1-->b2endsubgraph Cc1-->c2endA --> BC --> BB --> c2
```**子图的方向**
在多个流程图中,您可以使用方向语句来设置子图将呈现的方向,就像下面的例子所示:
```mermaid
flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> 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 LRA["一个双引号:#quot;"] -->B["一个十进制数字表示的符号:#9829;"]
```

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

效果如下:

一个双引号:"
一个十进制数字表示的符号:♥

五. 总结

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

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


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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker-数据卷网络

docker数据卷 docker volume ls #查看有哪些数据卷 docker volume inspect mysql-db #查看具体数据卷的元信息 docker container run -d --name mysql1 -e MYSQL_ALLOW_EMPTY_PASSWORDTrue -v mysql-db:/var/lib/mysql mysql #会在docker 的卷下面新建一个mysqldb用于数据持久…

力扣hot100 杨辉三角 递归 DP

Problem: 118. 杨辉三角 文章目录 思路复杂度&#x1f496; DP&#x1f496; 从下往上递归 思路 &#x1f468;‍&#x1f3eb; 参考地址 复杂度 时间复杂度: 添加时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( n ) …

Linux/Frolic

Enumeration nmap 还是扫描系统对外开放的端口情况&#xff0c;对外开放了22,139,445,还有9999端口&#xff0c;显示是http服务&#xff0c;使用了nginx 1.10.3 ┌──(kali㉿kali)-[~/HTB/Frolic] └─$ nmap -sC -sV -oA nmap -Pn 10.10.10.111 Starting Nmap 7.93 ( http…

Linux第25步_在虚拟机中备份“ST官方的TF-A源码”

TF-A是ARM公司提供的&#xff0c;ST公司通过修改它&#xff0c;做了一个自己的TF-A代码。因为在后期开发中&#xff0c;若硬件被改变了&#xff0c;我们需要通过修改"ST官方的TF-A源码"就可以自己的TF-A代码了。为了防止源文件被误改了&#xff0c;我们需要将"S…

【经典算法】有趣的算法之---遗传算法梳理

every blog every motto: You can do more than you think. 0. 前言 遗传算法是一种基于自然选择和遗传机制的优化算法&#xff0c;因此它通常被用于求解各种最优化问题&#xff0c;例如函数优化、特征选择、图像处理等。 一言以蔽之&#xff1a; 将数学中的优化问题&#xf…

ZooKeeper 实战(三) SpringBoot整合Curator-开发使用篇

文章目录 ZooKeeper 实战(三) SpringBoot整合Curator-开发使用篇0. ZooKeeper客户端 1. Curator1.1. 简介1.2. 应用场景1.3. 优势1.4. 依赖说明 2. 依赖导入3. 配置类3.1. 重试策略3.2. 实现代码3.3. 总结 4. Curator中的基本API4.1. 创建节点CreateMode中的节点类型4.2. 查询节…

【MATLAB源码-第114期】基于matlab的孔雀优化算法(POA)无人机三维路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 POA&#xff08;孔雀优化算法&#xff09;是一种基于孔雀羽毛开屏行为启发的优化算法。这种算法模仿孔雀通过展开其色彩斑斓的尾羽来吸引雌性的自然行为。在算法中&#xff0c;每个孔雀代表一个潜在的解决方案&#xff0c;而…

通过IDE和jar包运行时加载json配置文件

程序中使用了json配置文件&#xff0c;位置在$rootPath/src/main/resources/config.json, 调试时使用IDE&#xff0c;但运行时使用Jar包&#xff0c;加载config.json配置文件的代码如下&#xff1a; public ConfigParser(String configFileName) throws IOException {try{Inp…

用el-image-viewer实现全局预览图片

背景 在后台管理系统中&#xff0c;一些预览图片的场景&#xff0c;通常都是使用 el-image-viewer 去实现&#xff0c;但是如果多个地方都需要预览图片&#xff0c;又要重复的去写 el-image-viewer 以及一些重复的和预览相关的代码。 可以把预览图片的组件放在根文件&#x…

Python - Bert-VITS2 语音推理服务部署

目录 一.引言 二.服务搭建 1.服务配置 2.服务代码 3.服务踩坑 三.服务使用 1.服务启动 2.服务调用 3.服务结果 四.总结 一.引言 上一篇文章我们介绍了如果使用 conda 搭建 Bert-VITS2 最新版本的环境并训练自定义语音&#xff0c;通过 1000 个 epoch 的训练&#xf…

streamlit设置sidebbar和页面背景

streamlit1.29.0 1. 设置sidebar背景 代码&#xff1a; import base64 import streamlit as stdef sidebar_bg(side_bg):side_bg_ext pngst.markdown(f"""<style>[data-testid"stSidebar"] > div:first-child {{background: url(data:im…

Express框架使用全流程

1.目的和使用场景 对于像我这样不常使用 Node.js 进行开发的人来说&#xff0c;每次开始一个新项目都意味着从头开始设置环境&#xff0c;这个过程相当繁琐。因此&#xff0c;我决定自己构建一个开箱即用的项目脚手架。我的目标是创建一个简单易用的基础框架&#xff0c;能让我…

【REST2SQL】07 GO 操作 Mysql 数据库

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 MySQL是一个关系型数据库管理系统&#xf…

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

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

Linux网络文件共享服务

目录 一.文件存储类型 1.直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 2.存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff08;可以使用空间&#xff0c;管理也是你来管理&#xff09; 3.网络附加存储&#xff1a;Network-…

windows server 2019 云服务器看不见硬盘的解决方案

刚拿的windows server 服务器看不见硬盘&#xff0c;这是因为没有初始化数据盘的原因。 解决方案如下&#xff1a; 单击“服务器管理器”仪表盘。 弹出“服务器管理器”窗口&#xff0c;如图1所示。 “服务器管理器”页面右上方选择“工具 > 计算机管理”。 弹出“计算机管…

一键批量转换,视频格式转换工具

从电影、电视剧到短视频&#xff0c;视频格式的多样性给我们的生活带来了丰富多彩的体验。然而&#xff0c;你是否曾遇到过这样的困境&#xff1a;当你从网上下载了一些视频&#xff0c;却发现格式不兼容&#xff0c;无法在你的设备上播放&#xff1f;没事&#xff0c;【视频剪…

内存泄漏检测方式

一 、 日志记录 通过宏定义重载了 malloc 和 free 函数&#xff0c;以在分配和释放内存的时候记录一些信息&#xff0c;包括文件名和行号&#xff0c;并将这些信息写入到相应的文件中。然后在 main 函数中演示了使用这些宏进行内存分配和释放。 _malloc 函数&#xff1a; 在分配…

Linux 下查找头文件和库的顺序

Linux 下查找头文件和库的顺序 C语言 — 动态库的两种使用方式说明_动态库的两种调用方式-CSDN博客 linux动态链接库的加载顺序_动态链接库顺序-CSDN博客 几个链接选项 -I 指定头文件搜索目录-L 指定静态库文件搜索目录-Wl,-R&#xff08;或-Wl,-rpath&#xff09; 指定动态库…

​LeetCode解法汇总83. 删除排序链表中的重复元素

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给定一个已排序的链表的头 head &#xf…