Markdown中使用mermaid畫流程圖

Markown語法簡單，用來寫文檔是個不錯的選擇。

但是Markdown 語法並不直接支持畫圖，當然方法還是有的。

本人用的Markdown編輯器為vscode，在里面直接安裝mermaid插件即可使用。

　　最近在學習使用攜程開源框架Apollo，就以該框架的一些流程圖介紹mermaid的使用：先看幾個例子

1.基礎模型

```mermaid
graph LR;
　　Portal-->|發布/更新配置|Apollo配置中心;
　　Apollo配置中心-->|實時推送|App;
　　App-->|實時查詢|Apollo配置中心;
```

效果圖如下：

 

2.結構模型

```mermaid
graph TB
　　client-->|2 findConfigServices|LoadBalancer;
　　LoadBalancer-->|3 findService|metaServer;
　　metaServer-->Eureka;
　　client-->|4 access via ip:port/client load balance/error retry|ConfigService;
　　ConfigService-->|1 register/cancel|Eureka;
　　ConfigService-->|read/write|ConfigDB;
```

效果圖如下：

3. 模塊依賴圖

```mermaid
graph LR;
　　client---core;
　　client---common;
　　core---common;
　　common---portal;
　　common---Biz;
　　Biz---ConfigService;
　　Biz---AdminService;
```

效果圖如下：

 

 總結：

graph  TB（top--botom 上下排列）

graph BT  (botom--top)

graph  LR（left--right 左右排列）

graph  RL (right--left)

-->    在流程圖中顯示——>

---    在流程圖中顯示——

 再來個簡單例子：

```mermaid
graph LR;
　　A-->|A指向B|B;
　　B---|B與C相連|C;
```

 

增加一種序列圖畫法：官方例子

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John:hello John
    loop healthcheck
        John-->>John:fight against
    end
    Note right of John:rational
    
    John->>Alice:great!
    John->>Bob:how about you
    Bob->>John:good!

```

 

 注意：如果vscode顯示不出來這個圖，可能是預覽插件沒裝。把mermaid的插件多裝幾個沒影響

 

 

參考： https://mermaidjs.github.io/#/

https://cloud.tencent.com/developer/article/1334691