用代码画时序图！YYDS

来源 | 捡田螺的小男孩

作者 | 捡田螺的小男孩

前言

最近通过代码来画时序图、UML 用例图，感觉很不错，所以给大家分享一下。

日常开发，一般在设计阶段，我们都需要画时序图、用例图等等。大家平时画图的时候，是用draw.io还是processOn呢？用它们画出的图，其实都挺好看的。

今天要给大家介绍一款开源的画图神器！用代码就能画图，配合IDE使用，画图高效简单，信手拈来，还挺美观的。这个神器就是PlantUML。

1. PlantUML 简介

PlantUML 是一个开源项目，可以快速编写 UML 图的工具。它可以支持编码的方式来生成图形。可以用来画时序图、UML 用例图、类图、思维导图、ER 图等等。

PlantUML 画出来的图，简洁美观，先给大家看一个用 PlantUML 画出来的登录时序图以及对应画图的代码，如下：

@startuml
title Sequence Diagram of User login
actor User as user

participant "gateway" as gateway
participant "user-core" as userCore
database "MySQL" as mysql
database "Redis" as redis

autonumber
user-> gateway:login request，param：username，password
activate gateway
gateway-> userCore:forward the login request
activate userCore
userCore-> userCore :check the login param
userCore-> mysql:query user info from mysql by username
activate mysql
mysql-> userCore:response with username and password
deactivate mysql
userCore->userCore:compare the requested password with the DB's password
userCore-> userCore: generate an unique token
userCore--> redis: save the token to redis
userCore-> gateway: response with the token
deactivate userCore
gateway-> user: login success with the token
deactivate gateway
@enduml

登录用例时序图如下：

2. PlantUML 的安装使用

PlantUML 的安装很方便的。有个插件，名字是:PlantUML Integration，大家可以去 IDE 的插件市场搜索安装即可，如下：

安装成功后，想快速体验的话，可以新建一个项目，然后新建一个 plantUML File 文件，然后把我上个小节的登录时序图那个代码复制进去，就可以看到登录时序图啦。

（如果是非时序图，希望即时展示，需要安装下Graphviz）

3. 如何用 PlantUML 画时序图

什么是时序图？

时序图（Sequence Diagram），又名序列图、循序图，是一种 UML 交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。

如何用 PlantUML 画时序图呢？

你可以先新建一个 PlantUML 文件。

然后选择 Sequence，并定义一个文件名称。

就会有默认的时序图生成啦。

我们照着登录时序图的代码，来大概说下每个关键词的意思吧。

@startuml
title Sequence Diagram of User login
actor User as user

participant "gateway" as gateway
participant "user-core" as userCore
database "MySQL" as mysql
database "Redis" as redis

autonumber
user-> gateway:login request，param：username，password
activate gateway
gateway-> userCore:forward the login request
activate userCore
userCore-> userCore :check the login param
userCore-> mysql:query user info from mysql by username
activate mysql
mysql-> userCore:response with username and password
deactivate mysql
userCore->userCore:compare the requested password with the DB's password
userCore-> userCore: generate an unique token
userCore--> redis: save the token to redis
userCore-> gateway: response with the token
deactivate userCore
gateway-> user: login success with the token
deactivate gateway
@enduml

关键词解释如下：

• title：表示该 UML 用例图的标题。
• actor：表示人形的参与者。
• as：使用 as 关键字命名参与者。你可以把它理解成定义变量一样，as 后面跟着的就是变量，声明后，我们后面就可以使用这个变量啦。
• participant：表示普通的参与者，它跟 actor 的主要区别是形状不一样。
• database：表示参与者形状是数据库。
  显示的顺序是怎么定义的：声明的参与者顺序将是（默认的）显示顺序。
• autonumber：可以给参与者添加顺序。
• ->：表示绘制两个参与者之间的信息，如果你希望是虚线，可以使用-->。
• activate和deactivate：表示参与者的生命线。

当然，PlantUML功能挺丰富的，它还可以组合消息，虽然在我的登录时序图还没体现出来。它提供了alt/else、opt、loop来组合消息，如下：

@startuml
Alice -> Bob: 认证请求

alt 登录成功

    Bob -> Alice: 认证接受

else 某种失败情况

    Bob -> Alice: 认证失败
    group 我自己的标签
    Alice -> Log : 开始记录攻击日志
        loop 1000次
            Alice -> Bob: DNS 攻击
        end
    Alice -> Log : 结束记录攻击日志
    end

else 另一种失败

   Bob -> Alice: 请重复

end
@enduml

对应的时序图如下：

4. 如何用 PlantUML 画 UML 用例图

什么是用例图？

用例图（英语：use case diagram）是用户与系统交互的最简表示形式，展现了用户和与他相关的用例之间的关系。通过用例图，人们可以获知系统不同种类的用户和用例。用例图也经常和其他图表配合使用。

如何用 PlantUML 画 UML 用例图呢？

你可以先新建一个 PlantUML 文件，然后选择 user case，并定义个文件名。

就会有默认的 UML 用例图生成啦。

我挑官网一个用例图 demo 来介绍吧。代码如下：

@startuml
left to right direction
actor Guest as g
package Professional {
  actor Chef as c
  actor "Food Critic" as fc
}
package Restaurant {
  usecase "Eat Food" as UC1
  usecase "Pay for Food" as UC2
  usecase "Drink" as UC3
  usecase "Review" as UC4
}
fc --> UC4
g --> UC1
g --> UC2
g --> UC3
@enduml

对应生成的用例图如下：

来看下每个关键词的意思：

• left to right direction：表示从左到右绘制用例图。
• actor Guest as g：定义一个人形参与者,变量别名是 g。
• package Professional：定义一个包package，名字为Professional。package可以用来对用例和角色分组。
• usecase "Eat Food" as UC1：定义一个用例，别名为UC1。
• fc --> UC4：表示角色fc和用例UC4关联起来，角色和用例之间的关系用-->来表示。

5. 如何用 plantUML 画思维导图

什么是思维导图？

英文是 The Mind Map，又名心智导图，是表达发散性思维的有效图形思维工具 ，它简单却又很高效，是一种很实用的思维工具。

写了一个简单的思维导图，代码如下：

@startmindmap
* 面试题
** 计算机网络面试题
*** TCP/IP十五连问
*** 两万字计算机面试题汇总
** MySQL面试题
** Redis面试题
** 大厂面试真题
*** 虾皮十五连问
*** 五年Oppo后端面试真题
*** 腾讯云十五连问
@endmindmap

plantUML 画思维导图，还是挺简单的，大家可以看下效果：

6. 如何用 planUML 画活动流程图

什么是活动图？

动态图（activity diagram，活动图）阐明了业务用例实现的工作流程。

我画了一个简单版的登录活动流程图：

@startuml
title Activity Diagram of User login

start
:user request login;
if (is request param null？) then (N)
  :query user info by username;
  if (is user info  null ?) then (N)
    :compare the password;
    if (Is password right?) then (Y)
      :generate a token ,and set it to redis;
      :response with login success;
    else(N)
       :response with wrong password code;
       stop
    endif
  else(Y)
    :response with error userinfo;
    stop
  endif
else(Y)
  :response with error param;
  stop
  endif
stop
@enduml

生成的流程图如下：

活动图关键解释如下：

• start：表示活动图流程的开始。
• stop：表示活动图流程的结束。
• :user request login;：表示活动流程节点为user request login，需要加:和;的哈。
• if+then+endif：表示一个完整的条件判断。

最后

本文介绍了 plantUML 画图的相关知识，有兴趣的小伙伴，可以自己动手试一试。