Github 什么时候支持画流程图了??

前端宇宙

共 1548字,需浏览 4分钟

 ·

2022-02-27 01:19

昨晚在逛 Github 时,看到了一个没见过的东西

没见过的东西

本以为这是张图,但我鼠标移过右上角的图标时竟然发现可以点击,woc,这个不是图片啊,竟然是个流程图,Github 支持流程图语法了???咱就是说这一整个大惊喜住,Github 的 Markdown 竟然支持画流程图了!!

以前 Github 的 README.md 里的流程图都是这样的👇

图来源于wechat

没错,这就是一张图片!咱们的流程图都是用其它工具(推荐一个常用的画流程图工具:https://app.diagrams.net/)画好再截图放到 Github 里的

万一万一哪一天我需要修改流程图,我不可能重画一张,我得保留着上次画的流程图的源文件,然后在那上面修改,再截图上传到 Github 上,这这这太麻烦了,谁让 Github 之前不支持画流程图呢!

不过就在这周一,Github 竟支持画流程图了!!这也是与一个开源库 Mermaid[1] 的维护者 Knut Sveidqvist[2] 合作后做出的改动,Mermaid 很多人应该都不陌生了,一个在 Github 狂揽 43.5k star 的开源库,专门支持了在 Markdown 画流程图,很多尝试过做一个属于自己的 Markdown 编辑器的小伙伴应该都用过这个,据我所知,CSDN 的 Markdown 编辑器掘金的 Markdown 编辑器 都用了这个库

Mermaid 支持了很多很多不同的图表类型,例如流程图甘特图UML饼图 等等

Mermaid支持这么多图表

tql,此时我只想说,以后在 Github 上我哪还需要去用别的软件画图啊,费尽心思地构思如何画图,注重逻辑的同时还要注重美观(以前写文章的时候,画图真的浪费了很多时间,没办法我有强迫症,会经常调整图的布局)

话不多说,我马不停蹄地去 Github 尝鲜了这个功能

来看一个最基本的流程图的语法:

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```

在 Github 中的表现是这样的:

舒服~ 还有预览功能,可以复制每个节点上的文本,这不比纯图片的流程图香多了么?

更多的 mermaid 语法在这里不就展开讲了,大家可以去 mermaid 官网[3] 查看更多详细的语法,爱写作的小伙伴一定用得到~

最后发现一个小彩蛋,我在 Github 里输入完流程图的原始语法代码后点击 Preview 预览,这个流程图的渲染还有个 Loading 过程,打开 devtool 一看,这一个流程图竟然就是一个 iframe

这是什么操作?翻阅了 Github 官方的博客,这么做主要是为了:

  1. 减轻 JavaScript 对服务器的压力
  2. 减少图表过多时,将编译好的 Markdown 数据发送到客户端的数据开销
  3. 用Iframe就可以使得流程图的加载不会对 Github 造成任何的影响

还在等啥呢?还不去你的 Github 上试试?奥不不不,点个 在看 再走吧~

参考资料

[1]

Mermaid: https://github.com/mermaid-js/mermaid#readme

[2]

Knut Sveidqvist: https://github.com/knsv

[3]

mermaid 官网: https://mermaid-js.github.io/mermaid/#/

浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报