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