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;
```