再不必怕 Markdown 中的绘图了，GitHub 官网反对 Mermaid 图表绘制工具

开发人员已可能在 GitHub 中应用 Mermaid 图表工具。

Mermaid 作为图表绘制工具越来越多的受到开发人员的欢送。它基于 Javascript，通过解析类 Markdown 的文本语法来实现图表的创立和动静批改，能够应用这个工具来进行包含流程图，时序图等图表的绘制。能够将其看做是 Markdown 的一个插件。

截至目前，用户想要在 GitHub 上的 Markdown 文件中蕴含图片 / 图表，惟一的做法是通过嵌入图像来实现。目前 Mermaid 由 Knut Sveidqvist 进行保护。

新的一年，GitHub 开发者关系总监 Martin Woodward 在官网博客示意，从当初开始，用户能够通过 GitHub 体验到一项原生性能 —— 反对基于 JavaScript 的 Mermaid 图表和流程图生成工具。

当初用户通过应用 Mermaid 语法就能够创立内联图，例如：

下面的原始代码块在渲染后，在 Markdown 中显示如图：

当代码遇到标记为 mermaid 的代码块时，会生成一个 iframe，iframe 采纳原始 Mermaid 语法并传递给 Mermaid.js，而后将代码转换为本地浏览器中的图表。实现这一过程须要如下两个阶段：

• GitHub 的 HTML pipeline；
• 外部文件渲染服务。

首先，用户向 HTML pipeline 中增加了一个过滤器，该过滤器通过查找具备 mermaid 语言特色的原始 pre 标签，并将其替换为渐进式工作的模板，这样，在非 JavaScript 环境中申请嵌入 Mermaid 内容的客户将看到原始的 Markdown 代码。

接下来，假如用户是在反对 JavaScript 的环境中查看内容，此时会将 iframe 增加到页面，将 src 属性指向 Viewscreen 服务。这样做具备以下长处：

• 将库 offload 到内部服务时，能够缩小 JavaScript 无效负荷；
• 异步渲染图表有助于打消开销；
• 用户提供的内容被锁定在 iframe 中，这样不会在加载图表的 GitHub 页面上造成毁坏。

Mermaid pipeline

上面是 Mermaid pipeline 可视化门路图：用户能够失去一个疾速的、易于编辑的和基于矢量的图，它会呈现在文档中须要的中央。

想理解更多无关 Mermaid 语法的信息，请参考：

http://mermaid-js.github.io/m…

参考链接：

https://github.blog/2022-02-1…

起源：机器之心
开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。