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

語言: CN / TW / HK

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

沒見過的東西

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

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

圖來源於wechat

沒錯,這就是一張圖片!咱們的流程圖都是用其它工具(推薦一個常用的畫流程圖工具: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餅圖 等等

Mermaid支援這麼多圖表

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 上試試?奧不不不,點個 在看 再走吧~

參考資料

[1]

Mermaid: https://github.com/mermaid-js/mermaid#readme

[2]

Knut Sveidqvist: https://github.com/knsv

[3]

mermaid 官網: https://mermaid-js.github.io/mermaid/#/