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