10秒画一个流程图，不看后悔一辈子

2022-05-28 本文已影响0人开源指北

哈喽，大家好，我是指北君。

指北君最近在画一些流程图的时候突发感想，你说像MD语法这样能不能搞一个流程图呢？
于是指北君在GitHub搜索了一番，发现了mermaid-js项目，它通过一些MD类似的语法就能绘制各种图表，一起来看看吧！

首先给大家介绍一下该项目提供的在线编辑器，这个在线编辑器一共给我们提供了三个部分，左上是编辑窗口
左下是操作按钮，能够把绘制后的图形导出为各种格式，右边是渲染后的图形。

接下来，我们就用在线编辑器来操作一番，看看使用起来效果如何。

一些常见的图形基本都支持，同时可以发现形状和标签还是有一些关联的。通过一些简单的语法就能绘制出
一个个不同的形状，可谓是让绘图变得极致简单。

通过一些基本的图形我们就能够绘制出一个流程图了，流程图的绘制也是充分体现了什么叫做方便快捷。大家一起看下面这个图。

可以看到这个项目绘制流程图的强大了吧，简单几行符号就能绘制一个流程图，当然了该项目不仅仅能用来绘制流程图，我们接着往下看。

时序图也是在项目开发中经常被绘制，用来表示交互的流程，或者对象之间的调用关系等，我们这就看下使用是否方便。

看到这里我真的惊呆了，如果是你画一个这样的时序图需要多久，对于指北君这种洁癖癌来说，
光是调整样式可能就要花费五到十分钟，这个语法写下来也就是四五分钟搞定。
而这个项目看下来和写代码一样的格式，指北君觉得更加适合程序员来进行绘图，整个标签写下来形如流水。

这个类图看起来就更像代码语法了，完全符合程序员的习惯。

只能绘图只能满足一小部分人的需求，然后指北君发现了更加强大的功能，第三方集成，这样我们就能把这种功能迁移到我们自己经常使用的系统了，
赶快看下有没有支持你使用的系统吧。

当然了，不用多想这种项目肯定会通过JS把相关语法在HTML进行渲染，这样我们就能随心的修改样式了。

指北君在这里只是简单的介绍了一些该项目的皮毛，如果你感兴趣可以自己去探索哦，
该项目对于不想动手画各种图表的各位客官来说可以去了解下该项目。

关注开源指北公众号，后台回复mermaid获取资源。

这里是开源指北，立志做最好的开源分享平台，分享有趣实用的开源项目。
同时也欢迎加入开源指北交流群，群里你可以摸鱼、划水、吐槽、咨询，还有简历模板、各种技术面试资料等100G的资源等着你领取哦。快来一起来聊一聊吧！

以上就是本次推荐的全部内容，我是指北君，感谢各位的观看。