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