markdown高级语法之流程图_mermaid 双向箭头代码实现

流程图本质上是一段代码块的内容被指定了mermaid语言，从而被解释执行并绘制，所以整体markdown语法指定的是代码块，在基础语法我们知道，代码块就是三个```，并且后面可以指定语言，例：
```mermaid
流程图代码
```
1.那么流程图代码怎么写？
首先，它的第一行代码要从graph开始，表示下面的代码是mermaid编码，然后空格，接下来要表示流程图的方向，如下表所示：

```mermaid
graph LR
A–>B
B–>C
```
注意：此处的A，B，C 是节点标识，不是节点内容，没有节点内容，默认就是节点标识，哪么节点内容在哪？往后看。
效果如下：

首先，我们发现，上面的每个节点都是方块，哪么我们可不可以来改变节点的形状呢？答案是肯定的。如：[]表示方块(矩形)。()表示它是圆角矩形。{}表示菱形。例如：
```mermaid
graph LR
A[我是A]–>B(我是B)
B–>C{条件a}
```
效果如下：

这是我们用发现想[],(),{}里面有东西，哪这个东西就是节点内容
那么走到这一条线过去我们会了，要是要有分支又该怎么办呢？如上图走到条件a的时候，假设a=3，那么它有两个分支，一个分支就是a=3，成立，另一个分支a=2，不成立，哪它肯定走的是a=3这条路，哪这种情况我们要怎么表示呢？
如果要表示a=2，哪就用两个||来把它包裹住，即|a=2|，同理，a=3，表示法就是|a=3|，现在我们来看效果图，代码如下：
```mermaid
graph LR
A[我是A]–>B(我是B)
B–>C{条件a}
C–>|a=2|D(结果1)
C–>|a=3|E(结果2)
```
效果如下：

扩展各种奇形怪状：

1.    ```mermaid                            
             graph LR
             A([我是A])
       ```
1
2
3
4

2.    ```mermaid                            
             graph LR
             B[[我是B]]
         ```
1
2
3
4

3.    ```mermaid                            
             graph LR
             A[(database)]
         ```
1
2
3
4

4.    ```mermaid                            
             graph LR
             A((circle))
         ```
1
2
3
4

5.    ```mermaid                            
             graph LR
             A>我是小嘴巴]
         ```
1
2
3
4

6.    ```mermaid                            
             graph LR
             A{{我是两头尖}}
         ```
1
2
3
4

7.    ```mermaid                            
             graph LR
             A[/我是平行四边形/]
         ```
1
2
3
4

注意:[\我是平行四边形\]是反平行四边形

8.    ```mermaid                            
             graph LR
             A[/我是梯形\\]
         ```
1
2
3
4

9.    ```mermaid                            
             graph LR
             A[\我是倒梯形/]
         ```
1
2
3
4

细节：

• 我们表示实线箭头是–>
• 不想有箭头就用三个横线，—
• 线上加文本: --文本–,例子
  代码如下：
  ```mermaid
  graph LR
  A[我是A]–我夹在a和b之间—B(我是B)
  ```
  效果如下：

注意：连接"我夹在a和b之间"的左边是两个短横线，右边是三个短横线。这种表示方法跟上面双竖向夹杂的文字的效果是一样的。

• 我们表示点线箭头是-.->
  要是想加文本：就是-. 文本 .->
• 我们表示粗线箭头是：==>
  要是想加文本：就是==文本 ==>
• 我们表示双箭头是：
  ```mermaid
  flowchart LR
  A <–> B
  ```
  效果如下：

思考题：
怎么表示环绕？

       ```mermaid                            
             graph LR
             a-->b & c -->d
       ```
1
2
3
4

效果如下: