Mermaid:用 Markdown 语法来实现绘制各种图

看球不费电
发布于 2023-5-12 11:58
浏览
0收藏

作为开发人员,日常工作中难免会遇到一些需要画图的时候,特别是在写一些接口文档的时候,画一些流程图或者时序图是很重要的。

那么小伙伴们平常都是通过什么软件来画图的呢?

了不起最近发现一个很不错的开源项目 ​​Mermaid​​​,可以让大家通过 ​​markdown​​ 语法来进行画图,使用起来非常丝滑。

下面我们通过下面的几个例子来学习一下如何使用​​Mermaid​​。

时序图

假设我们现在要设计一个用户登录的功能,用户在前端页面上输入账号和密码,前端调用后端的接口,后端再通过查询数据进行数据校验,然后返回登录成功还是失败。这里整个系统我们分为用户,前端,后端,数据库四个角色。

用户:输入账号和密码

前端:发起登录请求

后端:查询数据库并验证账号合法性

数据库:存储账号信息

整个的时序图的效果如下,我们先看效果再来分析如何实现

Mermaid:用 Markdown 语法来实现绘制各种图-鸿蒙开发者社区

sequenceDiagram
    actor User
    participant F as 前端
    participant E as 后端
    participant M as 数据库
    User ->> F: 账号/密码
    Note left of User: 用户输入账号和密码
    loop 定时刷新
   F ->> E: 假设这里用个刷新功能请求
   E -->> F: 返回刷新结果
  end
    F -->> E: 请求后端接口
    Note right of F:发送请求
    E ->> M: 进行数据库查询
    M ->> + E: 返回用户信息
    E -->> E: 校验账号密码是否正确
    E -->> - F: 返回校验结果
    F -->> User: 提示用户登录成功或者失败

上面的时序图完整的代码如上所示,仔细看一下我们就可以基本上猜到什么字符大概是什么意思,了不起这里简单解释一下

​sequenceDiagram​​:是一个关键字,代表我们当前要绘制的是一个时序图;

​actor​​:创建一个用户角色;

​participant​​:表示系统的参与者,这里我们定义了前端,后端,数据库三个参与者;

​->>​​​ 和​​ -->>​​​:一个是实线一个是虚线,表示从某个角色或者参与者到另一个角色或者参与者,如果符号前后是同一个角色或者参与者,则表示自己指向自己。如果只要连线,不想要箭头的话,就用这种​​ ->​​​ 和 ​​-->​​​。简单来说就是一个 ​​-​​​ 表示实现,两个 ​​--​​ 表示虚线,一个箭头表示没有箭头,两个箭头表示一个箭头。

​Note ... of ...​​:表示在某个角色或者参与者的左边或者右边添加一个备注;

​loop ... end..​​:表示一个循环;

怎么样看上去是不是很简单的样子,保证大家三分钟就能学会,快实操起来吧。

甘特图

除了时序图,还有一种比较常见的就是甘特图,虽然这种图开发人员一般很少会用到,但是对于一些项目管理或者有明显的时间节点要求的项目,还是经常会用到的。

Mermaid:用 Markdown 语法来实现绘制各种图-鸿蒙开发者社区

上面的甘特图代码如下所示

gantt
    title 会员体系项目
    dateFormat  YYYY-MM-DD
    section 需求
    输出PRD文档:a1, 2023-05-09, 3d
    PRD评审:a2, after a1  , 1d
    UED评审:after a2  , 1d
    section 开发
    技术方案设计:a3,2023-05-14,3d
    技术方案评审:a4,after a3,1d
    技术开发:a5,after a4,10d
    section 测试
    用例评审:a6,after a5,1d
    测试:after a6,5d

这里甘特图的效果还是可以的,而且画起来十分方便,没有复杂的逻辑和曲线以及箭头之类的,顺序时间线往下写就行了。只要定义好各自的任务就可以按照时间线往下写了。

​gantt​​:甘特图的关键字;

​title​​:定义一个项目名称;

​dataFormat​​:定义号日期的格式;

​section​​​:每个 ​​section​​ 可以表示一个角色分组,可以具体到某个人都是可以的;

​section​​ 下面的每一行就是各个任务和起始时间以及需要的时长,可以定义指定开始时间,可以依赖上一个任务相对时间。

甘特图的绘制还是十分简单的,基本上就是定义一个个任务的逻辑,只要设置好开始时间和时长就可以了,看起来和写起来很简洁和方便。

流程图

除了上面的时序图和甘特图之外,我们常用的还会有流程图,还是参考我们上面登录的例子,这次我们用流程图来实现。

Mermaid:用 Markdown 语法来实现绘制各种图-鸿蒙开发者社区

graph TB
    User(用户) --> F[输入账号密码]
    F --前端请求后端接口---> C[后端逻辑]
    C ==> D{校验账号密码}
    D -.yes.-> E((登录成功))
    D -.no.-> F
    E --> Finish(进入首页)

上面的例子的代码如下,简单说明下

​graph TB​​​:表示流程图的方向,​​TB/TD​​​ 表示从上到下,​​BT​​​ 表示从下到上,​​RL​​​ 表示从右到左,​​LR​​ 表示从左到右;

​()​​:圆括号表示起止框;

​[]​​:中括号表示处理逻辑

​--前端请求后端接口--->​​​:表示包含文字和箭头的实线,如果不要箭头就去掉​​>​​ 就好;

​==>​​​:表示线条加粗,如果不加粗用 ​​-->​​ 即可;

​{}​​:表示逻辑判断;

​-.yes.->​​:表示虚线有箭头;

简单的流程图差不多就是上面这样,不过说实话,流程图的效果没有时序图和甘特图的效果好,感觉流程图画起来有点复杂和丑了,不过也还是可以用的。

总结

除了上面的几种图形之外 mermaid 还支持类图,状态图,ER 图等等,在官方提供的站点上,我们可以进行体验,地址是这个:​​https://mermaid.live​​,感兴趣的小伙伴可以去体验一下。


文章转载自公众号:  Java极客技术

标签
已于2023-5-12 11:58:29修改
收藏
回复
举报
回复
    相关推荐