Markdown 里 mermaid 流程图(flowchart)教程

作者： Jintao
日期：2021-7-12
简介: 未完待续

前言：

• 本篇文章来自我自己的笔记，可能会不是很全，如需想了解更过的话可以去mermaid 的官网查看了解 https://mermaid-js.github.io/mermaid/#/flowchart

1.0 流程图的方向 TD LR BT RL

graph TD/LR

流程图的方向可以有很多种， 一般最常用的是从上到下[Top->Down], 或者是从左到右[Left to right], 也可以实现反过来布局;
TD LR BT RL

• 从上往下 [Top to Down]

A

B

C

D

graph TD;
	A-->B;
	A-->C;
	B-->D;
	C-->D;

---

• 从左到右[Left to right]

A

B

C

D

graph LR;
	A-->B;
	A-->C;
	B-->D;
	C-->D;

---

• 从下往上[Down->Top]

A

B

C

D

graph BT;
	A-->B;
	A-->C;
	B-->D;
	C-->D;

---

• 从右往左[Right->Left]

A

B

C

D

graph BT;
	A-->B;
	A-->C;
	B-->D;
	C-->D;

---

2.0 节点 id[name]

在下图中， 什么一个变量作为一个节点的名称，格式为 Node_A[Node A], 左边表示Node_A变量名，右边中括号里表示在这个节点要显示的内容

Node A

Node B

graph LR
	Node_A[Node A];
	Node_B[Node B];
    Node_A --> Node_B;

2.1 节点的边框 ( ) [( )] [[ ]] [()] (()) > ] { } {{ }} [/ /] [\ ] [\ /] [/ ]

节点的边框可以有12中不同的形式，一下我会一一列举他们的形式。在之前的案例中都是以中括号的形式来展示的，而中括号所表示的则是正方形的图案，因此结果会展示尖角的长方形的图案

2.1.1 节点的边框 ( )

Node A

Node B

graph LR
	Node_A[Node A];
	Node_B[Node B];
    Node_A --> Node_B;

2.1.2 节点的边框 [( )]

2.1.3 节点的边框 [[ ]]

2.1.4 节点的边框 [()]

2.1.5 节点的边框 > ]

2.1.6 节点的边框 { }

2.1.7 节点的边框 {{ }}

2.1.8 节点的边框 [/ /]

2.1.9 节点的边框 [\ ]

2.1.10 节点的边框 [\ /]

2.1.11 节点的边框 [/ ]

2.1.12 节点的边框 ( )