流程图语法Mermaid教程

在使用Markdown来编写博客的过程中，尤其是需要更醒目的逻辑说明时，就需要使用流程图。
既然CSDN官方推荐Mermaid作为流程图语法，那我也针对Mermaid来做一期教程。

在学习之前，先总结一下流程图的需求：

节点设置
方向设置
连线设置
子图设置
节点绑定事件

其次，需要解释一下Mermaid语法在Markdown语法中的插入方法
CSDN给出了两种插入方式，分别是graph和flowchart:
在这里插入图片描述

即使用这个方法：

```mermaid

graph  流程图方向
	流程图节点
	
删除这六个字```

或

```mermaid

flowchart  流程图方向
	流程图节点
	
删除这六个字```

因为Mermaid语法代码片的限制，代码一旦写出就会变成流程图，所以在拷贝代码时需要把删除这六个字删掉。

一般来说flowchart要比graph更智能一些，但相应的，graph比flowchart更容易编写，更适合简单的流程图。
本文着重介绍graph，一些graph无法实现的功能再考虑flowchart。

那么开始教程。

流程图语法Mermaid教程

一、节点设置
- 1、普通节点
- 2、带ID的节点
- 3、不同形状的节点
- - 带圆角的节点
  - 椭圆形状的节点
  - 子程序形状中的节点
  - 圆柱形节点
  - 一个圆形的节点
  - 形状不对称的节点
  - 节点（菱形）
  - 六边形节点
  - 平行四边形
  - 平行四边形镜像
  - 正梯形
  - 倒梯形
- 4、高度自定义的节点
二、方向设置
- 1、从上到下
- 2、自上而下
- 3、从下到上
- 4、从右到左
- 5、从左到右
三、连线设置
- 1、连线类型
- - 带箭头的连线
  - 没有箭头的连线
  - 带文本的连线
  - 带箭头和文本的连线
  - 虚线连线
  - 带文本的虚线连线
  - 加粗连线
  - 带文本的粗连线
  - 多节点连线
- 2、箭头类型(flowchart)
- - 普通箭头
  - 双向箭头
  - 圆边箭头
  - 双向圆边箭头
  - 交叉箭头
  - 双向交叉箭头
- 3、长度类型
四、子图设置
- 1、三区域举例
- 2、两区域与飞点举例
- 3、三区域互联举例
- 4、区域嵌套
五、节点绑定事件

一、节点设置

1、普通节点

只需要输入节点内容即可，此时节点内容就是ID

注意：ID无法包含空格、回车等一些特殊符号

```mermaid

graph
	第一个节点
	
删除这六个字```

2、带ID的节点

使用中括号[ ]将内容括起来

```mermaid

graph
	节点ID[第一个节点]
	
删除这六个字```

```mermaid

graph
	节点ID[第一个节点<br>来个回车]
	
删除这六个字```

3、不同形状的节点

带圆角的节点

```mermaid

graph
    id1(This is the text in the box)
	
删除这六个字```

椭圆形状的节点

```mermaid

graph
    id1([This is the text in the box])
	
删除这六个字```

子程序形状中的节点

```mermaid

graph
    id1[[This is the text in the box]]
	
删除这六个字```

圆柱形节点

```mermaid

graph
    id1[(Database)]
	
删除这六个字```

一个圆形的节点

```mermaid

graph
    id1((第一个节点))
	
删除这六个字```

形状不对称的节点

```mermaid

graph
    id1>This is the text in the box]
	
删除这六个字```

节点（菱形）

```mermaid

graph
    id1{This is the text in the box}
	
删除这六个字```

六边形节点

```mermaid

graph
    id1{{This is the text in the box}}
	
删除这六个字```

平行四边形

```mermaid

graph
    id1[/This is the text in the box/]
	
删除这六个字```

平行四边形镜像

```mermaid

graph
    id1[\This is the text in the box\]
	
删除这六个字```

正梯形

```mermaid

graph
    A[/Christmas\]
	
删除这六个字```

倒梯形

```mermaid

graph
    B[\Go shopping/]
	
删除这六个字```

4、高度自定义的节点

各种各样的花里胡哨的，这里不做解释了

```mermaid

graph
    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
	
删除这六个字```

二、方向设置

代码	方向
TB	从上到下
TD	自上而下/与自上而下相同
BT	从下到上
RL	右到左
LR	左到右

1、从上到下

```mermaid

graph TB
    第一个节点 --> 第二个节点
	
删除这六个字```

2、自上而下

```mermaid

graph TD
    第一个节点 --> 第二个节点
	
删除这六个字```

3、从下到上

```mermaid

graph BT
    第一个节点 --> 第二个节点
	
删除这六个字```

4、从右到左

```mermaid

graph RL
    第一个节点 --> 第二个节点
	
删除这六个字```

5、从左到右

```mermaid

graph LR
    第一个节点 --> 第二个节点
	
删除这六个字```

三、连线设置

1、连线类型

带箭头的连线

```mermaid

graph LR
    A-->B
	
删除这六个字```

没有箭头的连线

```mermaid

graph LR
    A --- B
	
删除这六个字```

带文本的连线

```mermaid

graph LR
    A-- This is the text! ---B
	
删除这六个字```

或者

```mermaid

graph LR
    A---|This is the text|B
	
删除这六个字```

带箭头和文本的连线

```mermaid

graph LR
    A-->|text|B
	
删除这六个字```

或者

```mermaid

graph LR
    A-- text -->B
	
删除这六个字```

虚线连线

```mermaid

graph LR
   A-.->B;
	
删除这六个字```

带文本的虚线连线

```mermaid

graph LR
   A-. text .-> B
	
删除这六个字```

加粗连线

```mermaid

graph LR
   A ==> B
	
删除这六个字```

带文本的粗连线

```mermaid

graph LR
   A == text ==> B
	
删除这六个字```

多节点连线

可以在同一行中声明多个连线

```mermaid

graph LR
   A -- text --> B -- text2 --> C
	
删除这六个字```

也可以换行写

```mermaid

graph LR
   A 
   -- text --> B 
   -- text2 --> C
	
删除这六个字```

还可以在同一行中声明多个节点连线

```mermaid

graph LR
   a --> b & c--> d
	
删除这六个字```

玩的花一点

```mermaid

graph LR
    A & B--> C & D
	
删除这六个字```

如果使用基本语法描述同一个图，则需要四行。

```mermaid

graph LR
    A --> C
    A --> D
    B --> C
    B --> D
	
删除这六个字```

2、箭头类型(flowchart)

由于graph好像无法修改箭头类型，我们这里用flowchart代替

普通箭头

```mermaid

flowchart LR
    A-->B
	
删除这六个字```

双向箭头

```mermaid

flowchart LR
    A<-->B
	
删除这六个字```

圆边箭头

```mermaid

flowchart LR
    A --o B
	
删除这六个字```

双向圆边箭头

```mermaid

flowchart LR
    A o--o B
	
删除这六个字```

交叉箭头

```mermaid

flowchart LR
    A --x B
	
删除这六个字```

双向交叉箭头

```mermaid

flowchart LR
    A x--x B
	
删除这六个字```

3、长度类型

长度	1	2	3
无箭头	—	----	-----
普通箭头	–>	—>	---->
加粗	===	====	=====
加粗粗带箭头	==>	===>	====>
虚线	-.-	-…- (两个点)	-…-
带箭头的虚线	-.->	-…->	-…->

四、子图设置

子图其实就是设区域，主要使用方法如下：
title可以随便设

subgraph title
    节点代码
end

1、三区域举例

```mermaid

graph
    graph
	 c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
	
删除这六个字```

但个人觉得graph没有flowchart智能

```mermaid

flowchart
    graph
	 c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
	
删除这六个字```

2、两区域与飞点举例

先看graph版本

```mermaid

graph
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
	
删除这六个字```

再看flowchart版本

```mermaid

flowchart
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
	
删除这六个字```

此处倒没什么区别

3、三区域互联举例

graph版本好像无法区域互联。

试试flowchart版本

```mermaid

flowchart 
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
	
删除这六个字```

4、区域嵌套

graph版本只能区域嵌套，无法区域互联。

```mermaid

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
	
删除这六个字```

再看flowchart版本

```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

	
删除这六个字```

五、节点绑定事件

可以将单击事件绑定到节点，单击可以打开链接。

默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过向点击定义添加链接目标来更改此设置（支持 _self、_blank、_parent 和 _top）：
先试试graph ：

```mermaid

graph LR
    self-->blank
    blank-->parent
    parent-->top
    top-->打酱油
    click self "https://yubing.blog.csdn.net/" _self
    click blank "https://yubing.blog.csdn.net/" _blank
    click parent href "https://yubing.blog.csdn.net/" _parent
    click top href "https://yubing.blog.csdn.net/" _top
	
删除这六个字```

再试试flowchart:

```mermaid

flowchart LR
    self-->blank
    blank-->parent
    parent-->top
    top-->打酱油
    click self "https://yubing.blog.csdn.net/" _self
    click blank "https://yubing.blog.csdn.net/" _blank
    click parent href "https://yubing.blog.csdn.net/" _parent
    click top href "https://yubing.blog.csdn.net/" _top
	
删除这六个字```