GitHub 的 Markdown 透過 Mermaid 支援各種流程圖

前幾天 GitHub 宣佈他們站上的 Markdown 透過 Mermaid 支援流程圖:「Include diagrams in your Markdown files with Mermaid」。

翻了一下 GitLab 也有 Mermaid 支援:「GitLab Flavored Markdown」,所以這個部份兩邊的系統可以通了...

寫 API 文件時也蠻常用到的東西,之前是在 GitLab 上面弄了 PlantUML 的支援,找時間來分析...

用 mermaid 畫流程圖...

mermaid 這個專案畫出來的圖還蠻順眼,雖然與 DOT graph 的語法不太一樣,不過還是很簡單,看一下介紹就會用了。

cdnjs 上有 hosting,把 code 放到 div 裡面,設定 class="mermaid",然後直接 script 掛進來就可以了。不過最近 CloudFlare 的速度一直很不順,在意的人可以考慮自己 hosting 一份。

簡單的像是這樣:

比較複雜點的: