GitHub原生支援在Markdown檔案以Mermaid語法編輯圖表

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語法最終轉換成檔案中的向量圖表。