六虎

这是啥操作，用代码能画这样的图

这是啥操作，用代码能画这样的图

作者：

蓝色微笑ing

在

大家好，我是车辙。不知道同学们画流程图或许时序图一般用的什么软件？Visio 仍是 Process On 或许语雀？

由于公司原因，在很多状况下，我一般用语雀画流程图或许思想导图。不过凡事也有破例，对于比较简略的图，也能够用代码画。什么，代码也能用来画图？是的，并且还不会比你自己画的差呢！接下来，我会用以下几个方面来讲解下代码画图。

这是啥操作，用代码能画这样的图

为什么要用代码画图

  1. 不需要繁琐的软件，你只要会运用 Markdown 即可。并且现在市面上的Markdown软件像Typora、语雀等根本都支撑代码画图。
  2. 相比于运用鼠标拖拽，这种画图办法非常的简略。你不必再去考虑排版对齐问题，它能帮你主动调整，节约不少时刻。
  3. 相比于ProcessOn等收费软件，用代码画图完全免费。
  4. 组内协一起，不必考虑对方和你用的是不是同一个软件，你能够直接把代码拷给你的搭档，或许建立起画图的Git库，提交就能够。

怎么运用代码画图

先前咱们提到过，只需要用支撑Markdown的软件即可。其实咱们用的是叫做Mermaid的工具，它是一个基于javascript的图表制作工具，能够经过Markdown来进行展现，假如你对Markdown很熟悉，学习它会非常简略。

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

用 Mermaid 画流程图

什么是流程图

经过图形来对某个特定事务或场景的整体的流程走向进行规范化的梳理和制作，从而使相关方能够经过最为直观的图形办法来清晰知道整个流程的概况以及每个流程的前后联系，让咱们能够愈加快速便利地了解特定场景、事务的流程联系的一种图形。

最根本流程图

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

graphLR
A(开端) --> B[A出门游玩] --> C((回家))

graphLR
A(开端) --> B[A出门游玩] --> D((回家))

从上面能够看出存在A、B、C三个节点，每个节点中都是一个过程。其间括号()表明开端动作，中括号[]表明中间的过程，双括号(())表明结束。

加判别条件

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

graphLR
A(开端) --> B[A出门] --> C{"天会不会下雨？"}
    C{"天会不会下雨？"}-->|会| D((回家))
    C{"天会不会下雨？"}-->|不会| E[继续]

graphLR
A(开端) --> B[A出门] --> C{"天会不会下雨？"}
    C{"天会不会下雨？"}-->|会| D((回家))
    C{"天会不会下雨？"}-->|不会| E[继续]

你能够运用大括号{}用于表明判别条件，在节点C后经过||表明判别条件即可。

对C节点的案牍加引号是由于？号是特殊字符，不加会报错

布局办法

别的 graphLR表明这个图将会以从左到右布局。假如你想从右到左布局，能够运用RL

graphRL
A(开端) --> B[A出门游玩] --> C((回家))

graphRL
A(开端) --> B[A出门游玩] --> D((回家))

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

graphTB
A(开端) --> B[A出门游玩] --> C((回家))

graphTB
A(开端) --> B[A出门游玩] --> D((回家))

箭头形状

假如觉得这个箭头太难看了，能够运用虚线箭头-.->，想让箭头变长，中间加个点即可=-..->

graphLR
A(开端) -.-> B[A出门游玩] -...-> D((回家))

假如期望用其他的箭头，能够使箭头加粗 ==> 或许不带箭头 ---

graphLR
A(开端) ==> B[A出门游玩] --- D((回家))

别的：为节点取名为 ABC 其实是不太适宜的。由于节点很多时简略产生混淆，不便利后续运用和阅读，主张起有意义的姓名。

额外的骚操作

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

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

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

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

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

graphLR
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还能支撑更多类型的图，当然这些内容就需要大家去官网查看了。官网地址

假如这篇文章对您有所协助，能够重视我的大众号《车辙的编程学习圈》，也能够在我的博客网站扫码重视 我的博客网站。

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

更多文章