GitHub現在於Markdown檔案中支援圖表工具Mermaid語法,可讓用戶方便地在文件中,以文字的方式定義並繪製各種圖表,包括流程圖、UML和甘特圖等。

圖表是說明概念的好用工具,而過去用戶要在GitHub的Markdown檔案中加入圖表的唯一做法,便是嵌入圖片,但是這樣的方式並不方便,用戶有時候會希望圖表能夠像是ASCII藝術一樣,隨著文件更新同步,因此GitHub決定在Markdown檔案中支援Mermaid圖表工具。

Mermaid是一個JavaScript圖形和圖表工具,供用戶採用Markdown文字定義內容,並在瀏覽器中動態的創建圖表,其支援各種常見圖表類型,包括流程圖、UML、Git圖、使用者旅程圖,甚至是複雜的甘特圖。

在GitHub中,當Markdown檔案中存在Mermaid程式碼區塊時,GitHub會生成一個iframe,並將Mermaid語法傳遞給Mermaid.js,該函式庫會在本地端瀏覽器中,將程式碼轉換成為圖表。

這項渲染圖表的過程主要分為兩個階段,分別是GitHub的HTML工作管線,以及GitHub內部檔案渲染服務Viewscreen。GitHub在HTML工作管線新增過濾器,以尋找帶有Mermaid語言標籤的程式碼區塊,並將其替換成為模板,方便客戶端在非JavaScript環境中請求帶有嵌入Mermaid內容,能夠看到原始的Markdown程式碼。

接下來,當用戶要在JavaScript環境中查看Mermaid內容,GitHub便會將iframe注入到頁面中,並將scr屬性指向Viewscreen服務。這樣的做法帶來幾項好處,官方提到,首先,由於函式庫卸載到外部服務,因此從Rails服務而來的JavaScript內容便會更少,且非同步渲染圖表也能夠減少不必要的渲染成本,而且用戶的內容被鎖定在iframe中,也就不太可能在載入圖表時惡搞GitHub的頁面。經過這些程序,Mermaid語法最終轉換成檔案中的向量圖表。


熱門新聞

Advertisement