markdown畫流程圖-mermaid工具

mermaid是一款開源的畫流程圖、甘特圖、時序圖工具，她提供了一種類似markdown的語法來創建各種圖。

安裝插件

若使用vscode，可直接安裝插件：Markdown Preview Mermaid Support

配置，設置繪圖風格

ctrl+shift+p打開命令面板，Open Mermaid Config ，設置繪圖風格

//設置mermaid繪圖的風格
//一共有三個主題：
// mermaid.css
// mermaid.dark.css
// mermaid.forest.css
Mermaid_Theme={
  theme:mermaid.forest.css
}

 demo

#### 流程圖方向
* TB 從上到下
* BT 從下到上
* RL 從右到左
* LR 從左到右
* TD 同TB

##### 示例
>>從上到下
```mermaid
graph TD
 A --> B
```

>> 從左到右
```mermaid
graph LR
    A --> B
```

基本圖形

```mermaid
graph TD
    id[帶文本的矩形]
    id4(帶文本的圓角矩形)
    id3>帶文本的不對稱的矩形]
    id1{帶文本的菱形}
    id2((帶文本的圓形))
```

 

節點之間的連接

A --> B A帶箭頭指向B
A --- B A不帶箭頭指向B
A -.- B A用虛線指向B
A -.-> B A用帶箭頭的虛線指向B
A ==> B A用加粗的箭頭指向B
A -- 描述 --- B A不帶箭頭指向B並在中間加上文字描述
A -- 描述 --> B A帶箭頭指向B並在中間加上文字描述
A -. 描述 .-> B A用帶箭頭的虛線指向B並在中間加上文字描述
A == 描述 ==> B A用加粗的箭頭指向B並在中間加上文字描述

子流程圖

 格式

subgraph title
    graph definition
end

示例

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

自定義樣式

```mermaid
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
```

demo

繪制一個流程圖,找出 A、 B、 C 三個數中最大的一個數。

```mermaid
graph LR
    start[開始] --> input[輸入A,B,C]
    input --> conditionA{A是否大於B}
    conditionA -- YES --> conditionC{A是否大於C}
    conditionA -- NO --> conditionB{B是否大於C}
    conditionC -- YES --> printA[輸出A]
    conditionC -- NO --> printC[輸出C]
    conditionB -- YES --> printB[輸出B]
    conditionB -- NO --> printC[輸出C]
    printA --> stop[結束]
    printC --> stop
    printB --> stop
```

 

 

參考地址：

https://www.jianshu.com/p/b421cc723da5

https://blog.csdn.net/liuxiao723846/article/details/83544588