0%

## 配置环境

• Node v12.18
• Hexo v4.2.1
• Mermaid(hexo-filter-mermaid-diagrams) v1.0.5

## 流程图

### 基础Graph

graph 需要有声明

#### 流程图方向

TB/TD top to bottom
BT bottom to top
LR left to right
RL right to left
##### 1. 示例 TD
```  graph TD;
Start --> Stop```
##### 2. 示例 LR
```  graph LR;
Start --> Stop```

#### 节点/图形

##### 默认
```graph LR;
id;```
##### 带文本的Node
```graph LR;
id1[This is the text in the box];```
##### 圆角Node
```graph LR;
id1(This is the text in the box);```
##### 体育场式圆角Node
```graph LR;
id1([This is the text in the box]);```
##### 子程序Node
```graph LR;
id1[[This is the text in the box]];```
##### 圆柱Node
```graph LR;
id1[(This is the text in the box)];```
##### 圆Node
```graph LR;
id1((This is the text in the box));```
##### 不对称Node (现在只有这一种形式)
```graph LR;
id1>This is the text in the box];```
##### 菱形Node
```graph LR;
id1{This is the text in the box};```

##### 平行四边形Node
```graph LR;
id1[/This is the text in the box/];```
##### 梯形Node
```graph LR;
id1[/This is the text in the box\];
id2[\This is the text in the box/];```

#### 线的长度

Length 1 2 3
Normal —- —— ——-
Normal with arrow —> —-> ——>
Thick === ==== =====
Thick with arrow ==> ===> ====>
Dotted -.- -..- -…-
Dotted with arrow -.-> -..-> -…->

#### 线的类型

—- 普通线段
—> 带箭头
=== 粗线
==> 粗线带箭头
-.- 虚线
-.-> 虚线带箭头
##### 普通箭头
```graph LR
A-->B```
##### 直接连线
```graph LR
A --- B```
##### 带文字的连线
```graph LR
A-- This is the text! ---B
C---|This is the text|D```
##### 带文字带箭头的连线
```graph LR
A -- text --> B
C -->| text |D```
##### 虚线
```graph LR;
A-.-B;
C-.->D;
E-.text.-> F
H-.->|text|G```
##### 厚线
```graph LR;
A===B;
C==>D;
E==text==> F
H==>|text|G```
##### 串联
```graph LR
A -- text --> B -- text2 --> C
a --> b & c--> d```
```graph TB
A & B--> C & D```
```graph TB
A --> C
A --> D
B --> C
B --> D```

#### 特殊字符

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

#### 子图

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

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

#### 注释

```graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C```

### 最后给个例子

```graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]```

```graph TD
A[Hard edge];
B(Round edge);
C{Decision};
D[Result one];
E[Result two];