美文网首页
10秒画一个流程图,不看后悔一辈子

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

作者: 开源指北 | 来源:发表于2022-05-28 11:09 被阅读0次

哈喽,大家好,我是指北君

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

在线编辑器

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

绘制图表

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

支持常见的形状

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


流程图

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


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

时序图

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


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

类图

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


第三方集成

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


HTML渲染

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


指北君有话说

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

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

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

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

相关文章

  • 超搞笑拳皇(不看后悔一辈子)

    超搞笑拳皇(不看后悔一辈子)

  • 找女朋友的标准

    找女朋友的标准 ,男人不看后悔一辈子 找女朋友的标准,男人不看后悔一辈子!!! 注意!!但凡看完此帖不回者不但这辈...

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

    哈喽,大家好,我是指北君。 指北君最近在画一些流程图的时候突发感想,你说像MD语法这样能不能搞一个流程图呢?于是指...

  • 绘制流程图该使用什么工具

    画流程图该用什么工具画,现在画流程图有专门的流程图软件,只需要在电脑上安装个流程图软件,就能轻易的画各种类型的流程...

  • 怎么画流程图,用什么软件画比较好

    怎么画流程图,使用什么软件画流程图,只需要在电脑上安装一款流程图制作软件就能画流程图了,具体是如何绘制的,下面就给...

  • 产品经理之流程图表达业务逻辑

    文章大纲 一、 为什么要画流程图二、流程图基础知识三、 流程图介绍与实战四、参考文章 一、 为什么要画流程图   ...

  • 流程图你可得好好画

    前言 产品工作里画流程图的重要性不用多说,流程图一般在写需求文档、画原型前不可缺少的一步。 一个完整、清晰的流程图...

  • 在简书上用Markdown画流程图

    作为一个程序员,经常需要画流程图。而用Markdown画流程图,省心省力,后面需要调整的话也更方便。但是,目前简书...

  • 画流程图该用什么软件比较好画

    画流程图应该用什么软件画?现在有很多的软件都能绘制流程图。比如:平面设计软件,办公软件,这类软件都能绘制流程图的,...

  • 画程序流程图的高效绘制方法

    程序流程图是我们经常需要画的的,但是不同的人画流程图的方法也不是一样的。工作中我们在画程序流程图的时候就需要掌握高...

网友评论

      本文标题:10秒画一个流程图,不看后悔一辈子

      本文链接:https://www.haomeiwen.com/subject/efssprtx.html