因为公司原因，在很多情况下，我一般用语雀画流程图或者思维导图。不过凡事也有例外，对于比较简单的图，也可以用代码画。什么，代码也能用来画图？是的，而且还不会比你自己画的差呢！接下来，我会用以下几个方面来讲解下代码画图。
先前我们提到过，只需要用支持Markdown的软件即可。其实我们用的是叫做Mermaid的工具，它是一个基于javascript的图表绘制工具，可以通过Markdown来进行展现，如果你对Markdown很熟悉，学习它会非常简单。
IfyouarefamiliarwithMarkdownyoushouldhavenoproblemlearningMermaid'sSyntax
什么是流程图
首先我们来画最基本的流程图
graphLRA(开始)-->B[A出门玩耍]-->C((回家))graphLRA(开始)-->B[A出门玩耍]-->D((回家))从上面可以看出存在A、B、C三个节点，每个节点中都是一个步骤。其中括号()表示开始动作，中括号[]表示中间的步骤，双括号(())表示结束。
流程图中除了最基本的，还存在判断条件，那该怎么写呢？
graphLRA(开始)-->B[A出门]-->C{"天会不会下雨？"}C{"天会不会下雨？"}-->|会|D((回家))C{"天会不会下雨？"}-->|不会|E[继续]graphLRA(开始)-->B[A出门]-->C{"天会不会下雨？"}C{"天会不会下雨？"}-->|会|D((回家))C{"天会不会下雨？"}-->|不会|E[继续]你可以使用大括号{}用于表示判断条件，在节点C后通过||表示判断条件即可。
对C节点的文案加引号是由于？号是特殊字符，不加会报错
另外graphLR表示这个图将会以从左到右布局。如果你想从右到左布局，可以使用RL
graphRLA(开始)-->B[A出门玩耍]-->C((回家))graphRLA(开始)-->B[A出门玩耍]-->D((回家))如果想从上到下，可以以TB(Top、Bottom)布局
graphTBA(开始)-->B[A出门玩耍]-->C((回家))graphTBA(开始)-->B[A出门玩耍]-->D((回家))箭头形状如果觉得这个箭头太难看了，可以使用虚线箭头-.->，想让箭头变长，中间加个点即可=-..->
graphLRA(开始)-.->B[A出门玩耍]-...->D((回家))如果希望用其他的箭头，可以使箭头加粗==>或者不带箭头---
graphLRA(开始)==>B[A出门玩耍]---D((回家))另外：为节点取名为ABC其实是不太合适的。因为节点很多时容易产生混淆，不方便后续使用和阅读，建议起有意义的名字。
除了这些，还有些其他的骚操作，比如节点添加超链接和文案。
graphLRA(开始)--123-->B[A出门玩耍]---D((回家))styleAfill:#f9f,stroke:#333,stroke-width:4pxgraphLRA(开始)--123-->B[A出门玩耍]---D((回家))styleAfill:#f9f,stroke:#333,stroke-width:4px用Mermaid画时序图什么是时序图
老规矩，先来个简单的支付宝转账。
sequenceDiagramautonumber用户->>支付宝:发起转账支付宝->>网银:发起转账网银-->>支付宝:转账成功支付宝-->>用户:转账成功sequenceDiagramautonumber用户->>支付宝:发起转账支付宝->>网银:发起转账网银-->>支付宝:转账成功支付宝-->>用户:转账成功解释下：
它同时支持它提供了alt/else、loop来进行时序图的消息组合。
sequenceDiagram用户->>支付宝:发起转账支付宝->>网银:发起转账alt转账成功网银-->>支付宝:返回转账ID支付宝-->>用户:转账成功else转账失败网银-->>支付宝:返回转账失败原因loop3次支付宝->>网银:再次进行重试endendsequenceDiagram用户->>支付宝:发起转账支付宝->>网银:发起转账alt转账成功网银-->>支付宝:返回转账ID支付宝-->>用户:转账成功else转账失败网银-->>支付宝:返回转账失败原因loop3次支付宝->>网银:再次进行重试endend可以通过alt进行条件判断，如果成功直接返回。用else表示另外的情况.通过Loop表示循环次数。另外，在循环中同样存在着alt判断，为了方便观察，我就没有把他写出来。背景色我们还可以给时序图添加背景色。
sequenceDiagramrectrgb(191,223,255)用户->>支付宝:发起转账支付宝->>网银:发起转账alt转账成功网银-->>支付宝:返回转账ID支付宝-->>用户:转账成功else转账失败网银-->>支付宝:返回转账失败原因endendsequenceDiagramrectrgb(191,223,255)用户->>支付宝:发起转账支付宝->>网银:发起转账alt转账成功网银-->>支付宝:返回转账ID支付宝-->>用户:转账成功else转账失败网银-->>支付宝:返回转账失败原因endend通过rectrgb(191,223,255)和end标签，即可完成背景色操作。
类图(Classdiagram)是显示了模型的静态结构，特别是模型中存在的类、类的内部结构以及它们与其他类的关系等
比如我们首先写一个动物类
classDiagramclass老虎{+Integerage+Stringname+run(mile)+sleep()int}classDiagramclass老虎{+Integerage+Stringname+run(mile)+sleep()int}其中age，name表示属性,run，sleep表示方法，int表示返回值的类型。而其他的符号可以表示它的可见性：
如果你是接口，可以这么写
classDiagramclassK..>classL:Dependency依赖classA--|>classB:Inheritance继承classM..|>classN:Realization实现classG-->classH:Association关联classE--oclassF:Aggregation聚合classC--*classD:Composition组合就以老虎继承动物举例：
classDiagramdirectionRLclass老虎{+Integerage+Stringname+run(mile)+sleep()int}class动物{+Integerage+Stringname+run(mile)+sleep()int}老虎--|>动物:Inheritance继承classDiagramdirectionRLclass老虎{+Integerage+Stringname+run(mile)+sleep()int}class动物{+Integerage+Stringname+run(mile)+sleep()int}老虎--|>动物:Inheritance继承用Mermaid画甘特图什么是甘特图
gantttitle甘特图基础演示dateFormatYYYY-MM-DDsection张三接口1完成:a1,2014-01-01,30d接口2完成:aftera1,20dsection车辙接口3完成:2014-01-12,12d接口3完成:24dgantttitle甘特图基础演示dateFormatYYYY-MM-DDsection张三接口1完成:a1,2014-01-01,30d接口2完成:aftera1,20dsection车辙接口3完成:2014-01-12,12d接口3完成:24d其中，section指人或者小组，每个section中都存在若干个task。例如接口1完成这个task的Id为a1,开始日期为2014-01-01，持续30d.
你也可以用字段标识它的状态，比如done表示完成，active表示活跃中
gantttitle甘特图基础演示dateFormatYYYY-MM-DDsection张三接口1完成:done,a1,2014-01-01,30d接口2完成:active,aftera1,20dsection车辙接口3完成:2014-01-12,12d接口3完成:24dgantttitle甘特图基础演示dateFormatYYYY-MM-DDsection张三接口1完成:done,a1,2014-01-01,30d接口2完成:active,aftera1,20dsection车辙接口3完成:2014-01-12,12d接口3完成:24d用Mermaid画饼状图Mermaid还可以用来画饼状图，这不比用Python生成简单？
pietitle颜值占比"车辙":37"吴彦祖":36"马老师":27pietitle颜值占比"车辙":37"吴彦祖":36"马老师":27代码画图的缺点和低代码类似，代码画图最大的问题只能画出相对简单的图，一旦业务复杂，用代码操作，往往会变的很不好画。
我是车辙，掘金小册《SkyWalking》作者，一名常被HR调侃为XX杨洋的互联网打工人。