大家好，我是车辙。不晓得同学们画流程图或者时序图个别用的什么软件？Visio 还是 Process On 或者语雀？
因为公司起因，在很多状况下，我个别用语雀画流程图或者思维导图。不过凡事也有例外，对于比较简单的图，也能够用代码画。什么，代码也能用来画图？是的，而且还不会比你本人画的差呢！接下来，我会用以下几个方面来解说下代码画图。
为什么要用代码画图
- 不须要繁琐的软件，你只有会应用 Markdown 即可。而且当初市面上的写作软件根本都反对 Markdown。
- 相比于应用鼠标拖拽，这种画图形式十分的简略。你不用再去思考排版对齐问题，它能帮你主动调整，节约不少工夫。
- 相比于
ProcessOn等免费软件，用代码画图完全免费。 - 组内协同时，不必思考对方和你用的是不是同一个软件，你能够间接把代码拷给你的共事，或者建设起画图的
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出门游玩] --> D((回家))从下面能够看出存在A、B、C三个节点，每个节点中都是一个步骤。其中括号()示意开始动作，中括号[]示意两头的步骤，双括号(())示意完结。
加判断条件
流程图中除了最根本的，还存在判断条件，那该怎么写呢？
graph LR A(开始) --> B[A出门] --> C{"天会不会下雨？"} C{"天会不会下雨？"}-->|会| D((回家)) C{"天会不会下雨？"}-->|不会| E[持续]你能够应用大括号{}用于示意判断条件，在节点C后通过||示意判断条件即可。
对C节点的文案加引号是因为？号是特殊字符，不加会报错
布局形式
另外 graph LR示意这个图将会以从左到右布局。如果你想从右到左布局，能够应用RL
graph RL A(开始) --> B[A出门游玩] --> D((回家))如果想从上到下，能够以TB(Top、Bottom)布局
graph TB A(开始) --> B[A出门游玩] --> D((回家))箭头形态
如果感觉这个箭头太难看了，能够应用虚线箭头-.->，想让箭头变长，两头加个点即可=-..->
如果心愿用其余的箭头，能够使箭头加粗 ==> 或者不带箭头 ---
另外：为节点取名为 ABC 其实是不太适合的。因为节点很多时容易产生混同，不不便后续应用和浏览，倡议起有意义的名字。
额定的骚操作
除了这些，还有些其余的骚操作，比方节点增加超链接和文案。
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用Mermaid 画时序图
什么是时序图
时序图,它通过形容对象之间发送音讯的工夫程序显示多个对象之间的动静合作。它能够示意用例的行为程序，当执行一个用例行为时，其中的每条音讯对应一个类操作或状态机中引起转换的触发事件。举个例子就是微信的网页受权流程。
最根本时序图
老规矩，先来个简略的支付宝转账。
sequenceDiagramautonumber用户 ->> 支付宝 : 发动转账支付宝 ->> 网银 : 发动转账网银 -->> 支付宝 : 转账胜利支付宝 -->> 用户 : 转账胜利解释下：
- 能够应用譬如"用户"、"服务端"来示意一个泳道。
- 能够应用
->>示意箭头，而-->>示意同步返回。 - 通过
autonumber开启执行序号展现。
音讯组合
它同时反对它提供了alt/else、loop来进行时序图的音讯组合。
sequenceDiagram用户 ->> 支付宝 : 发动转账支付宝 ->> 网银 : 发动转账alt 转账胜利 网银 -->> 支付宝 : 返回转账ID 支付宝 -->> 用户 : 转账胜利else 转账失败 网银 -->> 支付宝 : 返回转账失败起因 loop 3次 支付宝 ->> 网银: 再次进行重试 endend- 能够通过
alt进行条件判断，如果胜利间接返回。 - 用
else示意另外的状况. - 通过
Loop示意循环次数。另外，在循环中同样存在着alt判断，为了不便察看，我就没有把他写进去。
背景色
咱们还能够给时序图增加背景色。
sequenceDiagramrect rgb(191, 223, 255)用户 ->> 支付宝 : 发动转账支付宝 ->> 网银 : 发动转账alt 转账胜利 网银 -->> 支付宝 : 返回转账ID 支付宝 -->> 用户 : 转账胜利else 转账失败 网银 -->> 支付宝 : 返回转账失败起因endend通过 rect rgb(191, 223, 255) 和 end标签，即可实现背景色操作。
微信网页受权时序图
最初，咱们看下用Mermaid画微信网页受权登录的时序图。
用Mermaid 画类图
什么是类图
类图(Class diagram)是显示了模型的动态构造，特地是模型中存在的类、类的内部结构以及它们与其余类的关系等
最根本类图
比方咱们首先写一个动物类
classDiagram class 老虎{ +Integer age +String name +run(mile) +sleep() int }其中 age，name 示意属性,run，sleep示意办法，int 示意返回值的类型。而其余的符号能够示意它的可见性：
+Public-Private#Protected~Package/Internal
接口和枚举
如果你是接口，能够这么写
classDiagramclass 动物{ <<interface>> run()}如果是枚举，能够这么写
classDiagramclass Color{ <<enumeration>> RED BLUE GREEN WHITE BLACK}类之间的关系
类之间都会存在某种关系，比如说继承，实现等。在mermaid中别离用这些标识各种关系。
就以老虎继承动物举例：
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其中，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用Mermaid 画饼状图
Mermaid 还能够用来画饼状图，这不比用Python生成简略？
pie title 颜值占比 "车辙" : 37 "吴彦祖" : 36 "马老师" : 27代码画图的毛病
和低代码相似，代码画图最大的问题只能画出绝对简略的图，一旦业务简单，用代码操作，往往会变的很不好画。
总结
本文介绍了如何应用Mermaid进行画图，除了上述的内容外，Mermaid还能反对更多类型的图，当然这些内容就须要大家去官网查看了。官网地址
如果这篇文章对您有所帮忙，能够关注我的公众号《车辙的编程学习圈》，也能够在我的博客网站扫码关注 我的博客网站，外面还有 几十G 的视频材料、电子书能够收费支付。
我是车辙，掘金小册《SkyWalking》作者，一名常被HR调侃为XX杨洋的互联网打工人。