GitHub原生支持在Markdown文件以Mermaid语法编辑图表

码农 • 2023年8月25日 15:50 • 投稿

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语法最终转换成档案中的矢量图表。