mermaid

最新推荐文章于 2023-08-09 22:33:00 发布

Bananices

最新推荐文章于 2023-08-09 22:33:00 发布

阅读量1.3k

点赞数 3

分类专栏： markdown 文章标签： markdown javascript 流程图

本文链接：https://blog.csdn.net/qq_50484317/article/details/129335956

版权

markdown 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用Mermaid在博客中添加流程图

什么是Mermaid？

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

流程图

在mermaid中可以使用graph和flowchart来绘制流程图,但使用flowchart绘制流程图时候性能更高,详情Flowcharts Syntax | Mermaid:

所有的流程图都由节点、几何形状和边、箭头或线组成。mermaid定义了这些节点和边的生成和交互方式。

它还可以容纳不同的箭头类型、多方向箭头以及与子图

一个基本的结点如下

code:

graph LR
 id

(id表示在结点box中显示的内容)

也可以设置与id不同的文本,格式为id[text],此时结点的内容为text的内容而不是id

graph LR
	id1[text]

1. 流程图的方向

mermaid可以通过方向参数规定流程图的方向,给出五个参数来声明流程图的方向

声明	说明
TB	从上到下
TD	自上而下
BT	从下到上
RL	从右到左
LR	从左到右

eg:

graph TB
 Start-->Stop

graph TD
 Start-->Stop

graph BT
 Start-->Stop

graph RL
 Start-->Stop

graph LR
 Start-->Stop

2. 结点的形状

结点的定义为id[text]，在mermaid中,结点的形状也是可以修改的,提供以下格式

形式	说明
id[text]	矩形结点
id(text)	圆角矩形结点
id([text])	椭圆结点
id[[text]]	子程序结点
id[(text)]	数据库结点
id((text))	圆形结点
id>text]	不对称结点
id{text}	菱形结点
id{{text}}	六边形结点
id[/text/]	平行四边形结点
id[\text\]	平行四边形结点(反方向)
id[\text/]	梯形结点
id[/text\]	梯形结点(反方向)
id(((text)))	双圆结点(8.14版本不支持该形状)

eg:

graph TD
	id1[一般结点]
	id2(圆角矩形结点)
	id3([椭圆节点])
	id4[[子程序结点]]
	id5[(数据库结点)]

graph TD
	id6((圆形结点))
	id7>不对称结点]
	id8{菱形结点}
	id9{{六边形结点}}
	id10[/平行四边形结点/]

graph TD
	id11[\平行四边形结点\]
	id12[\梯形结点/]
	id13[/梯形结点\]

3. 结点之间的链接

节点可以用链路/边连接。在mermaid中,可以使用不同类型的线链接结点,也可以在线上附加文字说明。

线的类型

声明	说明
–>	实线箭头
—	实线
– text — or -->\|text\|	附带文本的线
-.-	虚线
-.->	虚线箭头
-. text .->	附带文本的虚线箭头
==>	粗实线箭头
== text ==>	附带文本的粗实线箭头
~ ~ ~	隐藏线

eg:

实线箭头：

graph LR
	A --> B

实线：

graph LR
	A --- B

附带文本的线:

graph LR
	A-->|说明|B
	C--说明-->D

虚线和带文本虚线：

graph LR
	A -.- B
	C-.-|说明|D

虚线箭头和带文本的虚线箭头：

graph LR
	A -.-> B
	C -.->|说明|D

粗实线箭头和带文本的粗实线箭头:

graph LR
	A ==> B
	C ==>|说明|D

多个结点的连接

多个结点的连接如果是单向的,则直接将连接符放在节点后即可，如

graph LR
	A --> B --> C
	D -->|说明1| E -->|说明2| F

当需要连接的节点为多个时,可以使用&符号将结点连接，使用&符时,需要在符号和元素之间添加空格

graph LR
	A-->B & C
	D-->D & E-->F

其中,A-->B & C等价于A-->B A-->C

graph TB
	A & B --> C & D
	//等价于
	//A --> C
	//A --> D
	//B --> C
	//B --> D

新的线的类型

提供了新的线类型如下，新的线类型只有表的声明为flowchart时正常显示

形式	说明
–o	右端圆点线
–x	右端x线
o–o	双向圆点线
x–x	双向x线
<–>	双箭头

flowchart LR
    A --o B
    C --x D
		E o--o F
		G x--x H
		I <--> J

线的长度

一般情况下,线的长度是根据流程图排列方向自动调整的，在mermaid中可以通过增加-号来使线更长

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

长度	1	2	3
默认线	`---`	`----`	`-----`
默认箭头	`-->`	`--->`	`---->`
粗实线	`===`	`====`	`=====`
带箭头粗实线	`==>`	`===>`	`====>`
虚线	`-.-`	`-..-`	`-...-`
带箭头虚线	`-.->`	`-..->`	`-...->`

4. 特殊符号

如果想在结点中显示更复杂的内容,可以使用双引号把字符串包裹起来

graph LR
    id1["This is the (text) in the box"]

如果想在结点中显示特殊字符,可以使用#字符对符号进行转义输出

graph LR
        A["额外的引号:#quot;"] --> B["一个爱心:#9829;"]

5. 子图

在mermaid中,可以使用subgraph关键字为流程图添加子图，子图从subgraph开始,从end结束

子图的定义

使用flowchart时会流程图会自动调整子图的大小

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

flowchart TD 
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

子图的ID和连接

子图和结点一样,也可以添加id

graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

同样的，图和图之间也可以连接

图的连接只有使用 flowchart 关键字时才可用

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

子图的方向

子图的方向也是可以控制的，使用direction语句来控制子图的方向

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

6. 样式和类样式

在mermaid中可以为结点添加样式

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

也可以和HTML一样为结点添加类,并定义类样式

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

7.对fontawesome的基本支持

mermaid增加了一些fontawesome的图标,可以使用fa声明使用,需要注意的是,在结点中使用特殊符号需要把文本用双引号包裹

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)