乐趣区

关于前端:什么神仙操作用代码能画这样的图

jiezi

大家好，我是车辙。不晓得同学们画流程图或者时序图个别用的什么软件？Visio 还是 Process On 或者语雀？

因为公司起因，在很多状况下，我个别用语雀画流程图或者思维导图。不过凡事也有例外，对于比较简单的图，也能够用代码画。什么，代码也能用来画图？是的，而且还不会比你本人画的差呢！接下来，我会用以下几个方面来解说下代码画图。

为什么要用代码画图

  1. 不须要繁琐的软件，你只有会应用 Markdown 即可。而且当初市面上的写作软件根本都反对 Markdown。
  2. 相比于应用鼠标拖拽，这种画图形式十分的简略。你不用再去思考排版对齐问题，它能帮你主动调整，节约不少工夫。
  3. 相比于 ProcessOn 等免费软件，用代码画图完全免费。
  4. 组内协同时，不必思考对方和你用的是不是同一个软件，你能够间接把代码拷给你的共事，或者建设起画图的 Git 库，提交就能够。

如何应用代码画图

先前咱们提到过，只须要用反对 Markdown 的软件即可。其实咱们用的是叫做 Mermaid 的工具，它是一个基于 javascript 的图表绘制工具，能够通过 Markdown 来进行展示，如果你对 Markdown 很相熟，学习它会非常简单。

If you are familiar with Markdown you should have no problem learning Mermaid’s Syntax

用 Mermaid 画流程图

什么是流程图

通过图形来对某个特定业务或场景的整体的流程走向进行规范化的梳理和绘制，从而使相干方可能通过最为直观的图形形式来明确晓得整个流程的详情以及每个流程的前后关系，让咱们可能更加疾速不便地理解特定场景、业务的流程关系的一种图形。

最根本流程图

首先咱们来画最根本的流程图

graph LR  
    A(开始) --> B[A 出门游玩] --> C((回家))
graph LR  
    A(开始) --> B[A 出门游玩] --> D((回家))

从下面能够看出存在 A、B、C 三个节点，每个节点中都是一个步骤。其中 括号 () 示意开始动作，中括号 [] 示意两头的步骤，双括号 (()) 示意完结。

加判断条件

流程图中除了最根本的，还存在判断条件，那该怎么写呢？

graph LR  
    A(开始) --> B[A 出门] --> C{"天会不会下雨？"}
    C{"天会不会下雨？"}-->| 会 | D((回家))
    C{"天会不会下雨？"}-->| 不会 | E[持续]
graph LR  
    A(开始) --> B[A 出门] --> C{"天会不会下雨？"}
    C{"天会不会下雨？"}-->| 会 | D((回家))
    C{"天会不会下雨？"}-->| 不会 | E[持续]

你能够应用 大括号 {} 用于示意判断条件，在节点 C 后通过 || 示意判断条件即可。

对 C 节点的文案加引号是因为？号是特殊字符，不加会报错

布局形式

另外 graph LR示意这个图将会以从左到右布局。如果你想从右到左布局，能够应用RL

graph RL  
    A(开始) --> B[A 出门游玩] --> C((回家))
graph RL  
    A(开始) --> B[A 出门游玩] --> D((回家))

如果想从上到下，能够以 TB(Top、Bottom) 布局

graph TB  
    A(开始) --> B[A 出门游玩] --> C((回家))
graph TB  
    A(开始) --> B[A 出门游玩] --> D((回家))

箭头形态

如果感觉这个箭头太难看了，能够应用虚线箭头-.->，想让箭头变长，两头加个点即可=-..->

graph LR  
    A(开始) -.-> B[A 出门游玩] -...-> D((回家))

如果心愿用其余的箭头，能够使箭头加粗 ==> 或者不带箭头 ---

graph LR  
    A(开始) ==> B[A 出门游玩] --- D((回家))

另外：为节点取名为 ABC 其实是不太适合的。因为节点很多时容易产生混同，不不便后续应用和浏览，倡议起有意义的名字。

额定的骚操作

除了这些，还有些其余的骚操作，比方节点增加超链接和文案。

graph LR  
    A(开始) -- 123 --> B[A 出门游玩] --- D((回家))
    click B "https://www.baidu.com" _blank
graph LR  
    A(开始) -- 123 --> B[A 出门游玩] --- D((回家))
    click B "https://www.baidu.com" _blank

最绝的是你能够往节点中增加 css

graph LR  
    A(开始) -- 123 --> B[A 出门游玩] --- D((回家))
    style A fill:#f9f,stroke:#333,stroke-width:4px
graph LR  
    A(开始) -- 123 --> B[A 出门游玩] --- D((回家))
    style A fill:#f9f,stroke:#333,stroke-width:4px

用 Mermaid 画时序图

什么是时序图

时序图, 它通过形容对象之间发送音讯的工夫程序显示多个对象之间的动静合作。它能够示意用例的行为程序，当执行一个用例行为时，其中的每条音讯对应一个类操作或状态机中引起转换的触发事件。举个例子就是微信的网页受权流程。

最根本时序图

老规矩，先来个简略的支付宝转账。

sequenceDiagram
autonumber
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
网银 -->> 支付宝 : 转账胜利
支付宝 -->> 用户 : 转账胜利
sequenceDiagram
autonumber
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
网银 -->> 支付宝 : 转账胜利
支付宝 -->> 用户 : 转账胜利

解释下：

  1. 能够应用譬如 ” 用户 ”、” 服务端 ” 来示意一个泳道。
  2. 能够应用 ->>示意箭头，而 -->> 示意同步返回。
  3. 通过autonumber 开启执行序号展现。

音讯组合

它同时反对它提供了 alt/else、loop 来进行时序图的音讯组合。

sequenceDiagram
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
alt  转账胜利
        网银 -->> 支付宝 : 返回转账 ID
        支付宝 -->> 用户 : 转账胜利
else 转账失败
    网银 -->> 支付宝 : 返回转账失败起因
    loop 3 次 
    支付宝 ->> 网银: 再次进行重试
    end
end
sequenceDiagram
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
alt  转账胜利
        网银 -->> 支付宝 : 返回转账 ID
        支付宝 -->> 用户 : 转账胜利
else 转账失败
    网银 -->> 支付宝 : 返回转账失败起因
    loop 3 次 
    支付宝 ->> 网银: 再次进行重试
    end
end
  1. 能够通过alt 进行条件判断，如果胜利间接返回。
  2. 用 else 示意另外的状况.
  3. 通过 Loop 示意循环次数。另外，在循环中同样存在着 alt 判断，为了不便察看，我就没有把他写进去。

背景色

咱们还能够给时序图增加背景色。

sequenceDiagram
rect rgb(191, 223, 255)
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
alt  转账胜利
        网银 -->> 支付宝 : 返回转账 ID
        支付宝 -->> 用户 : 转账胜利
else 转账失败
    网银 -->> 支付宝 : 返回转账失败起因
end
end
sequenceDiagram

rect rgb(191, 223, 255)
用户 ->> 支付宝 : 发动转账
支付宝 ->> 网银 : 发动转账
alt  转账胜利
        网银 -->> 支付宝 : 返回转账 ID
        支付宝 -->> 用户 : 转账胜利
else 转账失败
    网银 -->> 支付宝 : 返回转账失败起因
end
end

通过 rect rgb(191, 223, 255) 和 end标签，即可实现背景色操作。

微信网页受权时序图

最初，咱们看下用 Mermaid 画微信网页受权登录的时序图。

sequenceDiagram
  用户 ->> 浏览器端: 申请登录
  浏览器端 ->> 服务端:  申请构建受权链接
  服务端 -->> 服务端:  生成受权链接
  服务端 -->> 浏览器端:  返回受权链接
  浏览器端 ->> 微信端:  申请网页受权
  微信端 ->> 微信端:  用户是否批准受权
  微信端 ->> 浏览器端:  重定向到 Redirect 地址
  浏览器端 ->> 浏览器端:  获取 Code
  浏览器端 ->> 服务端: code 
  服务端 ->> 微信端:  通过 Code 申请获取 AccessToken
  微信端 -->> 服务端: 返回 AccessToken
  服务端 ->> 微信端:  通过 AccessToken 申请获取用户信息
  微信端 -->> 服务端: 返回用户信息
  服务端 ->> 服务端: 登录
  服务端 -->> 浏览器端: 登录胜利，返回用户信息

用 Mermaid 画类图

什么是类图

类图 (Class diagram) 是显示了模型的动态构造，特地是模型中存在的类、类的内部结构以及它们与其余类的关系等

最根本类图

比方咱们首先写一个动物类

classDiagram
    class 老虎{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}
classDiagram
    class 老虎{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}

其中 age，name 示意属性,run，sleep示意办法，int 示意返回值的类型。而其余的符号能够示意它的可见性：

  • + Public
  • - Private
  • # Protected
  • ~ Package/Internal

接口和枚举

如果你是接口，能够这么写

classDiagram
class 动物{
    <<interface>>
    run()}
classDiagram
class 动物{
    <<interface>>
    run()}

如果是枚举，能够这么写

classDiagram
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}
classDiagram
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

类之间的关系

类之间都会存在某种关系，比如说继承，实现等。在 mermaid 中别离用这些标识各种关系。

classDiagram
classK ..> classL : Dependency 依赖
classA --|> classB : Inheritance 继承
classM ..|> classN : Realization 实现
classG --> classH : Association 关联
classE --o classF : Aggregation 聚合
classC --* classD : Composition 组合

就以老虎继承动物举例：

classDiagram
    direction RL
    class 老虎{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}
    class 动物{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}
    老虎 --|> 动物 : Inheritance 继承
classDiagram
    direction RL
    class 老虎{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}
    class 动物{
        +Integer age
        +String name
        
        +run(mile)
        +sleep() int}
    老虎 --|> 动物 : Inheritance 继承

用 Mermaid 画甘特图

什么是甘特图

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示我的项目、进度和其余工夫相干的零碎停顿的外在关系随着工夫停顿的状况。

最根本甘特图

gantt
    title 甘特图根底演示
    dateFormat  YYYY-MM-DD
    section 张三
    接口 1 实现       : a1, 2014-01-01, 30d
    接口 2 实现       : after a1  , 20d
    
    section 车辙
    接口 3 实现      :2014-01-12  , 12d
    接口 3 实现      : 24d
gantt
    title 甘特图根底演示
    dateFormat  YYYY-MM-DD
    section 张三
    接口 1 实现       : a1, 2014-01-01, 30d
    接口 2 实现       : after a1  , 20d
    
    section 车辙
    接口 3 实现      :2014-01-12  , 12d
    接口 3 实现      : 24d

其中，section指人或者小组，每个 section 中都存在若干个 task。
例如 接口 1 实现 这个task 的Id 为a1, 开始日期为2014-01-01，继续30d.

增加标识状态

你也能够用字段标识它的状态，比方 done 示意实现，active示意沉闷中

gantt
    title 甘特图根底演示
    dateFormat  YYYY-MM-DD
    section 张三
    接口 1 实现       : done,a1, 2014-01-01, 30d
    接口 2 实现       : active,after a1  , 20d
    
    section 车辙
    接口 3 实现      :2014-01-12  , 12d
    接口 3 实现      : 24d
gantt
    title 甘特图根底演示
    dateFormat  YYYY-MM-DD
    section 张三
    接口 1 实现       : done,a1, 2014-01-01, 30d
    接口 2 实现       : active,after a1  , 20d
    
    section 车辙
    接口 3 实现      :2014-01-12  , 12d
    接口 3 实现      : 24d

用 Mermaid 画饼状图

Mermaid 还能够用来画饼状图，这不比用 Python 生成简略？

pie title 颜值占比
    "车辙" : 37
    "吴彦祖" : 36
    "马老师" : 27
pie title 颜值占比
    "车辙" : 37
    "吴彦祖" : 36
    "马老师" : 27

代码画图的毛病

和低代码相似，代码画图最大的问题只能画出绝对简略的图，一旦业务简单，用代码操作，往往会变的很不好画。

总结

本文介绍了如何应用 Mermaid 进行画图，除了上述的内容外，Mermaid还能反对更多类型的图，当然这些内容就须要大家去官网查看了。官网地址

如果这篇文章对您有所帮忙，能够关注我的公众号《车辙的编程学习圈》，也能够在我的博客网站扫码关注 我的博客网站，外面还有 几十 G 的视频材料、电子书能够收费支付。

我是车辙，掘金小册《SkyWalking》作者，一名常被 HR 调侃为 XX 杨洋的互联网打工人。

退出移动版