再不用怕Markdown中的绘图了,GitHub官方支持Mermaid图表绘制工具

简介: 开发人员已能够在 GitHub 中使用 Mermaid 图表工具。

Mermaid 作为图表绘制工具越来越多的受到开发人员的欢迎。它基于 Javascript ,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改,可以使用这个工具来进行包括流程图,时序图等图表的绘制。可以将其看做是 Markdown 的一个插件。

image.png


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

image.pngimage.gif

Knut Sveidqvist

新的一年,GitHub 开发者关系总监 Martin Woodward 在官方博客表示,从现在开始,用户可以通过 GitHub 体验到一项原生功能 —— 支持基于 JavaScript 的 Mermaid 图表和流程图生成工具。

现在用户通过使用 Mermaid 语法就可以创建内联图,例如:

image.gif

image.png

上面的原始代码块在渲染后,在 Markdown 中显示如图:

image.png


Mermaid 如何工作?

当代码遇到标记为 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 可视化路径图:用户可以得到一个快速的、易于编辑的和基于矢量的图,它会出现在文档中需要的地方。

image.png


想了解更多有关 Mermaid 语法的信息,请参考:http://mermaid-js.github.io/mermaid/#/

参考链接:https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

相关文章
|
6月前
|
网络协议 Linux Android开发
解决GitHub无法访问的问题:手动修改hosts文件与使用SwitchHosts工具
解决GitHub无法访问的问题:手动修改hosts文件与使用SwitchHosts工具
445 1
|
6月前
|
Web App开发 前端开发 数据库
推荐GitHub上开源的一款独立开发者出海技术栈和工具合集
推荐GitHub上开源的一款独立开发者出海技术栈和工具合集
239 0
|
6月前
|
Android开发
我用过的笔记 Markdown Wiki 工具
我用过的笔记 Markdown Wiki 工具
GitHub置顶46k星的互联网大厂Java工程师进阶题,腾讯官方首秀!
大家好,最近有不少小伙伴在后台留言,又得准备面试了,不知道从何下手! 可以肯定的是,不管我们要学习提升还是涨薪跳槽!都要先给自己设立一个小目标,然后想着自己的目标努力奋斗就是了。
|
1月前
|
数据采集 应用服务中间件 Go
开源的键鼠共享工具「GitHub 热点速览」
开源的键鼠共享工具「GitHub 热点速览」
|
6月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
4月前
|
人工智能 分布式计算 BI
透视开源生态,OSGraph——GitHub全域数据图谱的智能洞察工具
【7月更文挑战第5天】透视开源生态,OSGraph——GitHub全域数据图谱的智能洞察工具
透视开源生态,OSGraph——GitHub全域数据图谱的智能洞察工具
|
3月前
|
开发者 存储 API
Xamarin 开发者的社区资源概览:从官方文档到GitHub示例,全面探索提升开发技能与解决问题的多元化渠道与实用工具
【8月更文挑战第31天】Xamarin 开发者社区资源概览旨在提升开发效率与解决问题,涵盖官方文档、社区论坛、GitHub 项目等。官方文档详尽,涵盖 Xamarin.Forms 使用、性能优化等;社区论坛供交流心得;GitHub 提供示例代码。此外,第三方博客、视频教程及 Xamarin University 等资源也丰富多样,适合各阶段开发者学习与提升。通过综合利用这些资源,开发者可不断进步,应对技术挑战。
50 0
|
4月前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
6月前
|
XML 搜索推荐 开发工具
全面指南:技术写作与编辑工具 Markdown、Git 研究工具
在技术写作领域,“工具”是指技术写作者用于创建、管理和发布高质量技术文档的各种软件和应用程序。这包括文字处理器、桌面出版应用程序、XML 编辑器、内容管理系统等等。一些技术写作者常用的工具示例包括 Microsoft Word、WPS、Typora、Notion、印象笔记、GitHub、飞书云文档 和 VSCode 等。这些工具通过允许文档版本控制、启用协作、提供用于一致格式设置的模板、提供管理大量内容的功能,甚至提供将文档翻译成多种语言的功能,从而提高了生产力。工具的选择取决于技术写作者或其工作的组织的具体需求和工作流程。
468 4
下一篇
无影云桌面