大家好，我是Rut。不知道同学们画流程图或者时序图一般用什么软件？VisioorProcessOn还是语雀？由于公司原因，很多时候我一般都是用语雀来画流程图或者思维导图。然而，凡事都有例外。对于比较简单的图片，也可以使用代码来绘制。什么，代码也可以用来画图？是的，而且不比你自己画的差！接下来我将从以下几个方面来讲解代码绘制。为什么要用代码来画图？你不需要繁琐的软件，你只需要知道如何使用Markdown。而且现在市面上的写作软件基本都支持Markdown。与使用鼠标拖放相比，这种绘图方法非常简单。您再也不用考虑排版对齐问题，它会自动为您调整，节省大量时间。与ProcessOn等付费软件相比，代码绘图是完全免费的。在小组内协作时，您无需考虑对方是否使用与您相同的软件。可以直接copy代码给同事，或者建个Git库画图，提交。之前我们提到过如何使用代码画图，你只需要使用支持Markdown的软件即可。其实我们用的是一个叫Mermaid的工具，它是一个基于javascript的图表绘制工具，可以通过Markdown来展示。如果你熟悉Markdown，学习起来会非常简单。如果你熟悉Markdown学习Mermaid的语法应该没问题用Mermaid画流程图什么是流程图用图形来标准化，画出具体业务或场景的整体流程方向，让相关方可以通过最直观的图形化方式，清楚地了解整个流程的概况和每个流程的上下文，是一种图形，可以让我们更快速、更方便地了解具体场景和业务的流程关系。最基本的流程图首先画出最基本的流程图graphLRA(start)-->B[A出去玩]-->C((回家))graphLRA(start)-->B[A出去玩]-->D((回家))从上面可以看出有A、B、C三个节点，每个节点都是一个步骤。括号（）表示一个动作的开始，方括号[]表示中间步骤，双括号（（））表示结束。添加判断条件除了最基本的，流程图中还有判断条件，那么应该怎么写呢？graphLRA(start)-->B[Agoingout]-->C{"Willitrain?"}C{"Willitrain?"}-->|will|D((Gohome))C{"Willitrain?"}-->|No|E[continue]graphLRA(start)-->B[Agoout]-->C{"WillitWillitrain?"}C{"Willitrain?"}-->|Yes|D((回家))C{"Willitrain?"}-->|No|E[Continue]可以用大括号{}表示判断条件，用||节点C之后表示判断条件。C节点的副本加引号的原因是什么？数字是一个特殊字符，如果不加，布局方式会报错。此外，graphLR意味着该图将从左到右排列。如果想从右往左布局，可以用RLgraphRLA(start)-->B[A出去玩]-->C((gohome))graphRLA(start)-->B[A出去玩]-->D((gohome))如果想从上到下走，可以用TB(Top,Bottom)布局图TBA(start)-->B[Ago出去玩]-->C((gohome))graphTBA(start)-->B[A出去玩]-->D((gohome))箭头形状如果你觉得这个箭头太丑，可以用虚线箭头-.->让箭头变长，中间加个点就行=-..->graphLRA(Start)-.->B[A出去玩]-...->D((Gohome))如果你想使用其他箭头，你可以将箭头设为粗体==>或不带箭头---graphLRA(start)==>B[Agoingouttoplay]---D((goinghome))另外：节点ABC的命名其实不太对。因为很多节点容易混淆，不方便后面使用和阅读，所以建议起个有意义的名字。额外的show操作除了这些，还有其他的show操作，比如给节点添加超链接、文案等。graphLRA(start)--123-->B[Aouttoplay]---D((gohome))clickB"https://www.baidu.com"_blankgraphLRA(start)--123-->B[A出去玩]---D((gohome))点击B"https://www.baidu.com"_blank最好的是节点可以加cssgraphLRA(start)--123-->B[A出去玩]---D((回家))styleAfill:#f9f,stroke:#333,stroke-width:4pxgraphLRA(start)--123-->B[A出去玩]---D((gohome))styleAfill:#f9f,stroke:#333,stroke-width:4px用Mermaid画时序图是什么时序图？它描述了对象之间的关系发送消息的时间顺序显示了多个对象之间的动态协作。它可以表示用例的行为序列。当一个用例行为被执行时，每条消息对应一个类操作或一个触发事件，引起状态机的转换。一个例子就是微信的网页授权流程。最基本的时序图还是老规矩，我们先从一个简单的支付宝转账开始。sequenceDiagramautonumberuser->>Alipay：发起转账Alipay->>网银：发起转账网银-->>Alipay：转账成功Alipay-->>User：转账成功sequenceDiagramautonumberuser->>Alipay：发起转账Alipay->>网银：发起转账网银-->>支付宝：转账成功支付宝-->>用户：转账成功说明：例如，“用户”和“服务器”可以表示一条车道。您可以使用->>表示箭头，使用-->>表示同步返回。通过autonumber启用执行序号显示。同时支持消息组合。提供alt/else和loop进行时序图的消息组合。sequenceDiagram用户->>支付宝：发起转账支付宝->>网银：发起转账alt转账成功网银-->>支付宝：返回转账ID支付宝-->>用户：转账成功else转账失败网银-->>Alipay:returnReasonfortransferfailureloop3timesAlipay->>网银:RetryagainendendsequenceDiagramuser->>Alipay:InitiatetransferAlipay->>网银:InitiatetransferaltTransfersuccessful网银-->>Alipay:返回转账IDAlipay-->>User:transfersuccessfulelsetransferfailed网银-->>Alipay:returnthereasonfortransferfailureloop3timesAlipay->>网银:retryagainendend可以通过alt判断，如果成功直接返回。用else表示其他情况。Loop代表循环次数。另外循环中也存在alt判断，为了观察方便，我没有写出来。背景色我们还可以为时序图添加背景色。sequenceDiagramrectrgb(191,223,255)用户->>支付宝：发起转账支付宝->>网银：发起转账alt转账成功网银-->>支付宝：返回转账ID支付宝-->>用户：转账成功elsetransferfailed网银-->>Alipay:returnthereasonoftransferfailureendendsequenceDiagramrectrgb(191,223,255)user->>Alipay:initiatetransferAlipay->>网银：initialtransferalttransfersuccessful网银-->>Alipay:返回转账IDAlipay-->>user:transfersuccessfulelsetransferfailed网银-->>Alipay:返回转账失败原因endend通过rectrgb(191,223,255)和endtag完成后台颜色操作。微信网页授权登录时序图最后我们来看一下美人鱼画的微信网页授权登录时序图。sequenceDiagramUser->>Browser:请求登录Browser->>Server:请求建立授权链接Server-->>Server:生成授权链接Server-->>Browser:返回授权链接浏览Server->>微信：请求网页授权微信->>微信：用户是否同意授权微信->>浏览器：重定向到重定向地址浏览器->>浏览器：获取代码浏览服务器->>服务器：代码服务器->>微信:通过代码微信请求AccessToken-->>Server:返回AccessTokenServer->>WeChat:通过AccessToken微信请求用户信息->>Server:返回用户信息Server->>Server:登录服务器-->>浏览器：登录成功，返回用户信息用美人鱼画类图什么是类图？展示了模型的静态结构，特别是最基本的类图，如模型中存在的类，类的内部结构，以及它们与其他类的关系。比如我们先写一个动物类classDiagramclasstiger{+Integerage+Stringname+run(mile)+sleep()int}classDiagramclassTiger{+Integerage+Stringname+run(mile)+sleep()int}其中age、name代表属性，run、sleep代表方法，int代表返回值类型。而其他符号可以表明它的可见性：+Public-Private#Protected~Package/Internalinterfaceandenumeration如果你是一个接口，你可以这样写classDiagramclassanimal{<
