一张图片能说出千言万语，但到目前为止，在GitHub上的标记文件中包含图片和图表的唯一方法是嵌入一张图片。最近，我们增加了对嵌入SVG的支持，但有时你想让你的图表与你的文档保持最新，并像创建ASCII艺术一样简单，但要漂亮得多。
Mermaid是一个基于JavaScript的图表绘制工具，它采用了Markdown风格的文本定义，并在浏览器中动态创建图表。由Knut Sveidqvist维护，它支持软件项目的一系列不同的常见图表类型，包括流程图、UML、Git图、用户旅程图，甚至可怕的甘特图。
通过与Knut以及CommonMark更广泛的社区合作，我们推出了一项更改，允许您使用Mermaid语法创建内联图，例如：
当我们遇到标记为mermaid的代码块时，我们会生成一个iframe，它采用原始mermaid语法并将其传递给mermaid。js，将代码转换为本地浏览器中的图表。
我们通过GitHub的HTML管道和我们的内部文件呈现服务Viewscreen两个阶段来实现这一点。
首先，我们在HTML管道中添加了一个过滤器，用于查找带有美人鱼语言名称的原始预标记，并用一个渐进工作的模板替换它，这样，在非JavaScript环境（如屏幕阅读器或API请求）中请求嵌入美人鱼内容的客户端将看到原始标记代码。
接下来，假设内容是在支持JavaScript的环境中查看的，我们向页面中注入一个iframe，将src属性指向Viewscreen服务。这有几个优点：
它将库卸载到外部服务，从而使我们需要从Rails提供服务的JavaScript负载更小。
异步呈现图表有助于消除在将已编译的ERB视图发送到客户端之前呈现多个图表的潜在开销。
用户提供的内容被锁定在iframe中，在加载图表的GitHub页面上造成破坏的可能性较小。
这里是一个视觉呈现的路径，你的美人鱼风味的降价需要成为一个完全呈现美人鱼图表。（这是图表的美人鱼代码。）
最终的结果是快速、易于编辑，并且基于矢量的图表就在您需要它们的文档中。
Mermaid在开发人员中越来越受欢迎，并且拥有一个由维护人员Knut Sveidqvist领导的丰富的贡献者社区。我们非常感谢Knut为GitHub上的每个人提供此功能的支持。如果你想了解更多关于美人鱼语法的信息，请访问美人鱼网站或查看Knut的第一本美人鱼官方书籍。