再不用怕 Markdown 中的繪圖了，GitHub 官方支持 Mermaid 圖表繪制工具
開發(fā)人員已能夠在 GitHub 中使用 Mermaid 圖表工具。
Mermaid 作為圖表繪制工具越來越多的受到開發(fā)人員的歡迎。它基于 Javascript ，通過解析類 Markdown 的文本語法來實現(xiàn)圖表的創(chuàng)建和動態(tài)修改，可以使用這個工具來進行包括流程圖，時序圖等圖表的繪制?？梢詫⑵淇醋鍪?Markdown 的一個插件。
截至目前，用戶想要在 GitHub 上的 Markdown 文件中包含圖片 / 圖表，唯一的做法是通過嵌入圖像來實現(xiàn)。目前 Mermaid 由 Knut Sveidqvist 進行維護。
新的一年，GitHub 開發(fā)者關(guān)系總監(jiān) Martin Woodward 在官方博客表示，從現(xiàn)在開始，用戶可以通過 GitHub 體驗到一項原生功能 —— 支持基于 JavaScript 的 Mermaid 圖表和流程圖生成工具。
現(xiàn)在用戶通過使用 Mermaid 語法就可以創(chuàng)建內(nèi)聯(lián)圖，例如：
上面的原始代碼塊在渲染后，在 Markdown 中顯示如圖：
當(dāng)代碼遇到標(biāo)記為 mermaid 的代碼塊時，會生成一個 iframe，iframe 采用原始 Mermaid 語法并傳遞給 Mermaid.js，然后將代碼轉(zhuǎn)換為本地瀏覽器中的圖表。實現(xiàn)這一過程需要如下兩個階段：
- GitHub 的 HTML pipeline；
- 內(nèi)部文件渲染服務(wù)。
首先，用戶向 HTML pipeline 中添加了一個過濾器，該過濾器通過查找具有 mermaid 語言特征的原始 pre 標(biāo)簽，并將其替換為漸進式工作的模板，這樣，在非 JavaScript 環(huán)境中請求嵌入 Mermaid 內(nèi)容的客戶將看到原始的 Markdown 代碼。
接下來，假設(shè)用戶是在支持 JavaScript 的環(huán)境中查看內(nèi)容，此時會將 iframe 添加到頁面，將 src 屬性指向 Viewscreen 服務(wù)。這樣做具有以下優(yōu)點：
- 將庫 offload 到外部服務(wù)時，可以減少 JavaScript 有效負荷；
- 異步渲染圖表有助于消除開銷；
- 用戶提供的內(nèi)容被鎖定在 iframe 中，這樣不會在加載圖表的 GitHub 頁面上造成破壞。
Mermaid pipeline
下面是 Mermaid pipeline 可視化路徑圖：用戶可以得到一個快速的、易于編輯的和基于矢量的圖，它會出現(xiàn)在文檔中需要的地方。
想了解更多有關(guān) Mermaid 語法的信息，請參考：
http://mermaid-js.github.io/mermaid/#/
參考鏈接：
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
來源：機器之心
開源前哨日常分享熱門、有趣和實用的開源項目。參與維護 10萬+ Star 的開源技術(shù)資源庫，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。
