Markdown 流程图绘制详解

这篇具有很好参考价值的文章主要介绍了Markdown 流程图绘制详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

一、前言

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

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

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

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

二、基本语法

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

```mermaid
flowchart 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)的流程方向

2.2 定义元素

元素类型 代表意义 形状
start 开始 圆角矩形
end 结束/完成 圆角矩形
operation 流程操作 普通矩形
subroutine 预定子流程 双边线矩形
condition 条件判断 菱形
inputoutput 输入输出 平行四边形

三、连接线的种类

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

3.1 连接线的形状

线的形状
Markdown 流程图绘制详解,小北笔记,流程图,笔记,经验分享箭头形状
Markdown 流程图绘制详解,小北笔记,流程图,笔记,经验分享双向箭头
Markdown 流程图绘制详解,小北笔记,流程图,笔记,经验分享语法示例

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

效果如下:

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

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

3.2 新箭头类型

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

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

多方向箭头:

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

3.3 带文字连接线

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

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

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

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

3.4 连接线样式

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

语法示例

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


**节点样式** 可以为节点定义指定的样式,例如更粗的边框或不同的背景色:
```mermaid
flowchart 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
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
```

效果如下:

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

节点样式 可以为节点定义指定的样式,例如更粗的边框或不同的背景色:

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

3.5 交互语法

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

语法示例

**跳转链接交换** 超链接在同一浏览器选项卡/窗口中打开。可以通过在 click 定义中添加链接目标来更改此设置 (支持 _self,_blank,_parent 和 _top):
```mermaid
flowchart 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. 多个连接关系:
  1. 多个节点连接:
  1. 简洁的依赖关系声明:

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

基本语法等价表示

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

语法示例

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

效果如下:

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

3.7 视图分组

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

**子图**
```mermaid 
flowchart 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
```

​​效果如下​​
子图

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

子图的方向
在多个流程图中,您可以使用方向语句来设置子图将呈现的方向,就像下面的例子所示:

3.8 使用场景及实例

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

多组合流程

语法示例

```mermaid
flowchat
	st=>start: Start :>https://amwiki.xf09.net[blank]
	e=>end: End :>https://amwiki.xf09.net[blank]
	op1=>operation: My Operation
	op2=>operation: Stuff
	sub1=>subroutine: My Subroutine
	cond=>condition: Yes or No? :>https://amwiki.xf09.net[blank]
	c2=>condition: Good idea
	io=>inputoutput: catch something...

	st->op1(right)->cond
	cond(yes, right)->c2
	cond(no)->sub1(left)->op1
	c2(yes)->io->e
	c2(no)->op2->e
```

闰年判断逻辑

语法示例

```mermaid
flowchat
	st=>start: Start
	i=>inputoutput: 输入年份n
	cond1=>condition: n能否被4整除?
	cond2=>condition: n能否被100整除?
	cond3=>condition: n能否被400整除?
	o1=>inputoutput: 输出非闰年
	o2=>inputoutput: 输出非闰年
	o3=>inputoutput: 输出闰年
	o4=>inputoutput: 输出闰年
e=>end
	st->i->cond1
	cond1(no)->o1->e
	cond1(yes)->cond2
	cond2(no)->o3->e
	cond2(yes)->cond3
	cond3(yes)->o2->e
	cond3(no)->o4->e
```

冒泡排序流程图

语法示例

```mermaid 
flowchart 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--> 结束
```

效果如下​​

四、节点的形状

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

语法示例

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

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

效果如下:

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

4.1. 形状图形表

Markdown 流程图绘制详解,小北笔记,流程图,笔记,经验分享

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
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

效果如下:

5.2 转义字符

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

语法示例

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

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

效果如下:

五. 总结

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

Markdown 流程图绘制详解,小北笔记,流程图,笔记,经验分享

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

无论是哪个阶段,坚持努力都是成功的关键。不要停下脚步,继续前行,即使前路崎岖,也请保持乐观和勇气。相信自己的能力,你所追求的目标定会在不久的将来实现。加油!文章来源地址https://www.toymoban.com/news/detail-794536.html

到了这里,关于Markdown 流程图绘制详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端绘制流程图、泳道图

    使用logicFlow插件绘制。 原生HTML页面也可以,vue或react前端框架也可以,官网有详细安装方法,本文章后面也会详细说明。 官网链接: logicFlow官网地址 前端绘制泳道图结合流程图,达到如下效果 当然如果仅仅只是长成这样,想必大家用canvas或者svg画图都能解决一大半。 还需要

    2024年01月24日
    浏览(54)
  • Mermaid安装及绘制流程图

    默认的 Hexo 安装包括一个 MarkDown 渲染器插件,该插件使用 hexo-renderer-marked ,而 hexo-renderer-markdown-it 是一款用于 Markdown 解析和渲染的插件,用于替换 Hexo 默认自带的 Markdown 渲染器,提供了更丰富的 Markdown 解析和渲染,替换命令如下: Mermaid 是一个支持 MarkDown 的流行的 js 图标

    2024年02月04日
    浏览(40)
  • 如何在 XMind 中绘制流程图

    XMind 是专业强大的思维导图软件,由于其结构没有任何限制,很多朋友特别喜欢用它来绘制流程图。禁不住大家的多次询问,今天 XMind 酱就将这简单的流程图绘图方法分享给大家。 在 XMind 中,绘制流程图的主角是「自由主题」和「联系」。它们可以打破思维导图的限制,让

    2024年02月10日
    浏览(46)
  • 优秀的流程图应该怎样绘制呢?

    优秀的流程图应该怎么绘制呢? 本文将带大家学习优秀流程图的绘制要点和技巧,以及讲解流程图与UML活动图、BPMN图之间的关系和区别。 1、认识流程图流程图简单讲就是用图描述流程,这种流程可以是一种有先后顺序的操作组成,可以是系统的输入到输出的整个环节的描述

    2024年02月06日
    浏览(56)
  • 论文的技术路线流程图如何绘制?

      本文介绍基于 Visio 软件绘制 技术路线图 、 流程图 、 工作步骤图 等的方法。   首先打开 Visio 。我们可以直接选择“ 基本框图 ”进行绘制。   也可以选用一些模板。   本次我们就以“流程图”为例来绘制。   因为要绘制论文的技术路线图,因此各种形状简

    2024年02月05日
    浏览(41)
  • 推荐两款开源的绘制流程图软件

            目前流程图绘制软件非常多,包括本机安装的、web端的都有,如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的开源免费的流程图绘制软件。 目录 一句话导读 一、draw.io 二、Meta2d.js ​1.为什么使用 2.开发文档 官网:draw.io (drawio.com) 开源

    2024年02月10日
    浏览(52)
  • Vue使用AntV X6绘制流程图(组态呈现)

    先上几个网址 AntV | 蚂蚁数据可视化 AntV X6 图编辑引擎 AntV X6文档 AntV X6 API AntV X6图表示例 上面是一些用到的网址,先说下我项目中的需求,就是要自己绘制出一个我们想要的图,组态化呈现出来,然后这个图中会有很多节点,每个节点都会有自己的状态 ,状态会实时改变,

    2024年02月06日
    浏览(63)
  • Springboot +Flowable,通过代码绘制流程图并设置高亮

    通过代码绘制一张流程图,并设置成高亮。 首先先来看一下绘制出来的效果图,截图如下: 已经执行的节点和连线用红色标记出来,大致上就是这么一个效果。 将一个流程图绘制成图片,相关的 API 在 flowable 中其实都是有提供的,流程图片的绘制,是根据流程的定义来绘制

    2024年02月02日
    浏览(45)
  • BPMNJS插件使用及汉化(Activiti绘制流程图插件)

    BPMNJS插件运行最重要的就是需要安装nodejs插件,这 一定要安装和测试好 。 主要是使用npm命令 1.1.1、下载nodejs 下载地址:https://nodejs.org/en  1.1.2、安装nodejs,傻瓜式安装 安装之后在安装目录下创建node_cache和node_global两个目录 如果目录已经存在可以不创建 node_cache:作为缓存路

    2024年02月14日
    浏览(38)
  • Selenium 学习(0.17)——软件测试之流程图绘制方法

            病假5天,出去野20天,成功错过了慕课网上的期末考试。         害,都怪玩乐太开心了……         反正咱又不指着全靠这个行当来吃饭,错过也就错过了,立的Flag能抢救一下还是要抢救一下吧。【这个其实早都会画了,而且基本也正确,既然是学习,还

    2024年02月03日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包