首页 > 其他分享 >10秒画一个流程图,你上你也行

10秒画一个流程图,你上你也行

时间:2023-08-27 17:35:02浏览次数:35  
标签:10 流程图 项目 一个 语法 编辑器 绘制 指北君

10秒画一个流程图,你上你也行_时序图

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

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

在线编辑器

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


绘制图表

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

支持常见的形状

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

流程图

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

10秒画一个流程图,你上你也行_在线编辑器_02

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

时序图

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

10秒画一个流程图,你上你也行_时序图_03

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

类图

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

第三方集成

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

10秒画一个流程图,你上你也行_navicat_04

HTML渲染

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

10秒画一个流程图,你上你也行_时序图_05

指北君有话说

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

关注公众号 [程序员了不起]回复[eee113] 即可获取navicat绿版


标签:10,流程图,项目,一个,语法,编辑器,绘制,指北君
From: https://blog.51cto.com/u_16231677/7253727

相关文章

  • OpenGL入门——第一个三角形
    一、渲染管线在OpenGL中,任何事物都在3D空间中,而屏幕和窗口却是2D像素数组,所以由OpenGL的图形渲染管线将3D坐标转为2D坐标。图形渲染管线主要分为2个部分:第一部分将3D坐标转为2D坐标,第二部分把2D坐标转为实际的颜色像素。注意:2D坐标和像素也是不同的,2D坐标精确表示一个点在2D空......
  • 太多网工对NAT还存在这4种误解!你是其中一个吗?
    NAT是解决公网地址不够用大家最熟悉的网络技术之一,而NAT最依赖的是NATtranslation表项,至于NAT的概念和背景这里不再解释,网络上有很多关于此的类似介绍,自己搜索即可。下面主要是针对大家对NAT的一些误解进行分析。1 误解一:inside和outside大家常规的理解可能认为inside就是指私网;o......
  • 第一个非空值
    问题:如何返回每行中第一个非空值。如果表中数据连续,且都是数值,可以使用以下公式:=SUMIF(A2:F2,"",B2)在A2:F2这个区域内,满足条件为空的,是A2、B2和C2,如果直接对这三个单元格进行求和,结果是0,但如果把求和区域向右错位,那么待求和的就是B2、C2和D2三个单元格,其结果正好是第一个......
  • python代码模拟一个工厂的库存管理软件
    下面是一个简单的工厂库存管理软件的Python代码示例:importjson#初始化库存数据inventory={"products":[{"id":1,"name":"Product1","quantity":10},{"id":2,"name":"Product2"......
  • Windows 10, version 22H2 (updated Aug 2023) 中文版、英文版下载
    Windows10,version22H2(updatedAug2023)中文版、英文版下载Windows1022H2企业版arm64x64请访问原文链接:https://sysin.org/blog/windows-10/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgWindows10更新历史记录Windows10,version22H2,alledit......
  • vue项目打包之后, 生成一个可修改IP地址的文件
     在做项目的时候遇到了一个问题,就是把项目部署到不同的服务器上,但不能每次修改IP的时候就打包一次,这就增加了前端的工作量,经过百度,发现有一些方法是可以的,亲测可用。具体操作是,1,在static文件夹下面建立一个config.js文件, 1234567(function (){ ......
  • Windows 10 on ARM, version 22H2 (updated Aug 2023) ARM64 AArch64 中文版、英文版
    Windows10onARM,version22H2(updatedAug2023)ARM64AArch64中文版、英文版下载基于ARM的Windows10请访问原文链接:https://sysin.org/blog/windows-10-arm/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org基于ARM的Windows10起初,Windows10(与Win......
  • ArcMap用一个面要素擦除另一个面要素的部分
      本文介绍在ArcMap软件中,基于擦除(“Erase”)工具,对矢量面要素的部分区域加以剔除的操作。  假如我们已知这样一个研究区域,其包括了陆地与水体两个部分。  与此同时,我已经基于MNDWI,以0.20为阈值提取出了上述研究区域内部及其周边区域的水体,也就是下图中的蓝色部分。在这里......
  • 使用Apache IoTDB进行IoT相关开发的架构设计与功能实现(10)
    所有参数的详细说明见表3-5。表3-5线性填充参数列表参数名称(不区分大小写)解释路径,前缀路径查询路径;必填项T查询时间戳(只能指定一个);必填项data_type填充方法使用的数据类型。可选值为int32、int64、浮点型、双精度型、布尔值、文本;可选字段before_range,after_range表示线性方......
  • flutter中通过遍历一个数组,给每个元素添加一个开关按钮怎么写
    要通过遍历一个数组给每个元素添加一个开关按钮,你可以使用ListView.builder来构建一个包含开关按钮的列表。下面是一个示例,展示了如何遍历一个数组并为每个元素添加一个开关按钮:List<bool>switchValues=List.generate(5,(index)=>false);ListView.builder(itemCount:sw......