Github 什麼時候支援畫流程圖了？？

大家好，我是 零一 ，昨晚在逛 Github 時，看到了一個沒見過的東西

本以為這是張圖，但我滑鼠移過右上角的圖示時竟然發現可以點選，woc，這個不是圖片啊，竟然是個流程圖，Github 支援流程圖語法了？？？咱就是說這一整個大驚喜住，Github 的 Markdown 竟然 支援畫流程圖 了！！

以前 Github 的 README.md 裡的流程圖都是這樣的:point_down:

沒錯，這就是一張圖片！咱們的流程圖都是用其它工具（推薦一個常用的畫流程圖工具：https://app.diagrams.net/）畫好再截圖放到 Github 裡的

萬一萬一哪一天我需要修改流程圖，我不可能重畫一張，我得保留著上次畫的流程圖的原始檔，然後在那上面修改，再截圖上傳到 Github 上，這這這太麻煩了，誰讓 Github 之前不支援畫流程圖呢！

不過就在這週一，Github 竟支援畫流程圖了！！這也是與一個開源庫 Mermaid ^[1] 的維護者 Knut Sveidqvist ^[2] 合作後做出的改動，Mermaid 很多人應該都不陌生了，一個在 Github 狂攬 43.5k star 的開源庫，專門支援了在 Markdown 畫流程圖，很多嘗試過做一個屬於自己的 Markdown 編輯器的小夥伴應該都用過這個，據我所知， CSDN 的 Markdown 編輯器 、 掘金的 Markdown 編輯器 都用了這個庫

Mermaid 支援了很多很多不同的圖表型別，例如 流程圖 、 甘特圖 、 UML 、 餅圖 等等

tql，此時我只想說，以後在 Github 上我哪還需要去用別的軟體畫圖啊，費盡心思地構思如何畫圖，注重邏輯的同時還要注重美觀（以前寫文章的時候，畫圖真的浪費了很多時間，沒辦法我有強迫症，會經常調整圖的佈局）

話不多說，我馬不停蹄地去 Github 嚐鮮了這個功能

來看一個最基本的流程圖的語法：

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```

在 Github 中的表現是這樣的：

舒服~ 還有預覽功能，可以複製每個節點上的文字，這不比純圖片的流程圖香多了麼？

更多的 mermaid 語法在這裡不就展開講了，大家可以去 mermaid 官網 ^[3] 檢視更多詳細的語法，愛寫作的小夥伴一定用得到~

最後發現一個小彩蛋，我在 Github 裡輸入完流程圖的原始語法程式碼後點擊 Preview 預覽，這個流程圖的渲染還有個 Loading 過程，開啟 devtool 一看，這一個流程圖竟然就是一個 iframe

這是什麼操作？翻閱了 Github 官方的部落格，這麼做主要是為了：

1. 減輕 JavaScript 對伺服器的壓力

2. 減少圖表過多時，將編譯好的 Markdown 資料傳送到客戶端的資料開銷

3. 用Iframe就可以使得流程圖的載入不會對 Github 造成任何的影響

還在等啥呢？還不去你的 Github 上試試？奧不不不，點個 贊 和 在看 再走吧~

參考資料