Markdown之流程圖技术頭條網

### 流程圖

一段流程圖語法以 “``` 開頭，以 “``` 結尾

graph XX（XX表示流程圖類型）,分橫向和豎向兩大類

```
graph LR
節點1(節點1名稱)-->節點2(節2點名稱)
節點1(節點1哈哈)
```

如上其中：

> graph表示這是一個流程圖

> LR表示流程圖類型

> 節點1和節點2表示流程圖中的節點Id,每個節點Id唯一的且對應各自的對外顯示的名稱，如果不顯式指定節點名稱默認顯示節點Id。同一節點Id的多個定義為最後一行定義的生效

```
graph LR
節點1(節點1名稱1)-->節點2(節2點名稱)
節點1(節點1名稱2)
節點1{節點1名稱3}
```

> -->表示節點的流程線

#### 流程圖類型

> 豎向分位上（graph TB）和下（graph BT）

```
graph TB
節點1-->節點2
```
```
graph BT
節點1-->節點2
```

> 橫向分位左（graph RL）和右（graph LR）

```
graph LR
節點1-->節點2
```
```
graph RL
節點1-->節點2
```

TB - top bottom（自上而下）
BT - bottom top（自下而上）
RL - right left（從右到左）
LR - left right（從左到右）
TD - 與TB相同（自上而下）

```
graph TD
節點1-->節點2
```

#### 流程圖框線

> []:直角四邊形，處理框

```
graph LR
節點1[處理1]-->節點2[處理2]
```

> ():圓角四邊形，起止框

```
graph LR
節點1(開始)-->節點2(結束) 

```

> (()):圓形，連接點

```
graph LR
節點1((連接1))-->節點2((連接2))
```

> {}:稜形，判斷框

```
graph LR
節點1{判斷1}-->節點2{判斷2}
```

> >]:折角

```
graph LR
節點1>描述1]-->節點2>描述2]
```

#### 流程線

> ---:無流向實線和-.-:虛線

```
graph LR
節點1---節點2
節點1-.-節點2
```

> ==>:無流向粗線

```
graph LR
節點1===節點2
節點1===|流程|節點2
節點1==流程===節點2
```

> ---||或 -- ---:無流向實線添加文本

> -.->||或 -. -.->:無流向虛線添加文本

``` 

graph LR
節點1---|流程1|節點2
節點1--流程2---節點2
節點1-.-|流程3|節點2
節點1-.流程4-.-節點2
```

> -->:流向實線和-.->:流向虛線

```
graph LR
節點1-->節點2
節點1-.->節點2
```

> ===:流向粗線

```
graph LR
節點1==>節點2
節點1==流程==>節點2
節點1==>|流程|節點2
```

> -->||或 -- --?:流向實線添加文本

> -.->||或 -. -.->:流向虛線添加文本

```
graph LR
節點1-->|流程1|節點2
節點1--流程2-->節點2
節點1-.->|流程3|節點2
節點1-.流程4-.->節點2
```

> 如果文本中包含特殊字符，需要使用雙引號

```
graph LR
節點1["節點1 名稱"]-->節點2["節點2 名稱"]
節點1["節點1 名稱"]-->節點3["這是 (節點3)#9829;"]
```

#### 子圖

```
graph LR
子圖1節點1[A1]-->子圖2節點2[子圖2節點2]
子圖3節點1[A1]-->子圖1節點2[子圖2節點2]
subgraph 子圖1
子圖1節點1[子圖1節點1]-->子圖1節點2[子圖1節點2] 

end
subgraph 子圖2
子圖2節點1[子圖2節點1]-->子圖2節點2[子圖2節點2]
end
subgraph 子圖3
子圖3節點1[子圖3節點1]-->子圖3節點2[子圖3節點2]
end
```

### 交互功能

增加事件

> click nodeId callback

``` 

graph LR
節點1-->節點2
click 節點1 callback "提示框"
click 節點2 "http://www.github.com" "github地址"
```

增加樣式

```
graph LR
節點1(開始)-->節點2(結束)
style 節點1 fill:#f9f,stroke:#333,stroke-width:4px
style 節點2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```