Github 什么時(shí)候支持畫流程圖了？？

昨晚在逛 Github 時(shí)，看到了一個(gè)沒見過的東西

本以為這是張圖，但我鼠標(biāo)移過右上角的圖標(biāo)時(shí)竟然發(fā)現(xiàn)可以點(diǎn)擊，woc，這個(gè)不是圖片啊，竟然是個(gè)流程圖，Github 支持流程圖語法了？？？咱就是說這一整個(gè)大驚喜住，Github 的 Markdown 竟然支持畫流程圖了！！

以前 Github 的 README.md 里的流程圖都是這樣的??

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

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

不過就在這周一，Github 竟支持畫流程圖了！！這也是與一個(gè)開源庫 Mermaid^[1] 的維護(hù)者 Knut Sveidqvist^[2] 合作后做出的改動(dòng)，Mermaid 很多人應(yīng)該都不陌生了，一個(gè)在 Github 狂攬 43.5k star 的開源庫，專門支持了在 Markdown 畫流程圖，很多嘗試過做一個(gè)屬于自己的 Markdown 編輯器的小伙伴應(yīng)該都用過這個(gè)，據(jù)我所知，CSDN 的 Markdown 編輯器、掘金的 Markdown 編輯器 都用了這個(gè)庫

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

tql，此時(shí)我只想說，以后在 Github 上我哪還需要去用別的軟件畫圖啊，費(fèi)盡心思地構(gòu)思如何畫圖，注重邏輯的同時(shí)還要注重美觀（以前寫文章的時(shí)候，畫圖真的浪費(fèi)了很多時(shí)間，沒辦法我有強(qiáng)迫癥，會(huì)經(jīng)常調(diào)整圖的布局）

話不多說，我馬不停蹄地去 Github 嘗鮮了這個(gè)功能

來看一個(gè)最基本的流程圖的語法：

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

在 Github 中的表現(xiàn)是這樣的：

舒服~ 還有預(yù)覽功能，可以復(fù)制每個(gè)節(jié)點(diǎn)上的文本，這不比純圖片的流程圖香多了么？

更多的 mermaid 語法在這里不就展開講了，大家可以去 mermaid 官網(wǎng)^[3] 查看更多詳細(xì)的語法，愛寫作的小伙伴一定用得到~

最后發(fā)現(xiàn)一個(gè)小彩蛋，我在 Github 里輸入完流程圖的原始語法代碼后點(diǎn)擊 Preview 預(yù)覽，這個(gè)流程圖的渲染還有個(gè) Loading 過程，打開 devtool 一看，這一個(gè)流程圖竟然就是一個(gè) iframe

這是什么操作？翻閱了 Github 官方的博客，這么做主要是為了：

1. 減輕 JavaScript 對(duì)服務(wù)器的壓力
2. 減少圖表過多時(shí)，將編譯好的 Markdown 數(shù)據(jù)發(fā)送到客戶端的數(shù)據(jù)開銷
3. 用Iframe就可以使得流程圖的加載不會(huì)對(duì) Github 造成任何的影響

還在等啥呢？還不去你的 Github 上試試？奧不不不，點(diǎn)個(gè) 贊 和 在看 再走吧~

參考資料