Draw timing diagrams with code! so cool

foreword

Hello everyone, I'm a little boy who picks up snails .

Recently, I have used code to draw sequence diagrams and UML use case diagrams . I feel very good, so I will share them with you.

In daily development, generally in the design stage, we all need to draw sequence diagrams, use case diagrams , etc. When you usually draw a picture, do you use draw.ioit or processOndo it? The pictures drawn with them are actually quite nice. But, today, Brother Tianluo introduces an open source, drawing artifact! You can draw pictures with code, and use with IDE, drawing is efficient and simple, easy to do, and quite beautiful. This magic is PlantUML.

• github address , give a star, thank you

• Public number: little boy picking up snails

1. Introduction to PlantUML

PlantUML is an open source project, a tool to quickly write UML diagrams. It can support encoding way to generate graphics. It can be used to draw sequence diagrams, UML use case diagrams, class diagrams, mind maps, ER diagrams , etc.

The diagram drawn by PlantUML is simple and beautiful. Let me show you first, a login sequence diagram drawn by PlantUML, and the code corresponding to the drawing, as follows:

/**
 * 关注公众号：键捡田螺的小男孩
 */
@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

The login use case sequence diagram is as follows:

2. Installation and use of PlantUML

The installation of PlantUML is very convenient. There is a plug-in, the name is: PlantUML Integration, you can go to the IDE's plug-in market, search and install, as follows:

After the installation is successful, if you want to experience the general experience quickly. You can create a new project, then create a new plantUML File file, and then copy the code of the login sequence diagram in my last section, and you can see the login sequence diagram.

3. How to draw a sequence diagram with PlantUML

What is a timing diagram ?

时序图（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,并定义个文件名

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

Let me pick a use case diagram demo from the official website to introduce, the code is as follows:

@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

The corresponding generated use case diagram is as follows:

Take a look at the meaning of each keyword:

• left to right direction: Indicates that the use case diagram is drawn from left to right
• actor Guest as g: Define a humanoid participant, the variable alias is g.
• package Professional: Defines a package packagenamed Professional. packagethat can be used to group use cases and roles.
• usecase "Eat Food" as UC1: Define a use case, aliased as UC1.
• fc --> UC4: Indicates that roles fcand use cases UC4are associated. The relationship between roles and use cases is -->used to represent.

5. How to draw mind map with plantUML

What is a mind map?

English is The Mind Map, also known as Mind Map, which is an effective graphical thinking tool for expressing divergent thinking. It is simple but effective and efficient. It is a practical thinking tool.

Wrote a simple mind map, the code is as follows:

@startmindmap
* 公众号：捡田螺的小男孩，干货面试题
** 计算机网络面试题
*** TCP/IP十五连问
*** 两万字计算机面试题汇总
** MySQL面试题
** Redis面试题
** 大厂面试真题
*** 虾皮十五连问
*** 五年Oppo后端面试真题
*** 腾讯云十五连问
@endmindmap

PlantUML draws a mind map, it is quite simple, you can see the effect

6. How to draw an activity flow chart with planUML

What is an activity diagram?

An activity diagram (activity diagram) is a workflow that illustrates the realization of a business use case.

I drew a simple version of the login activity flow chart:

@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

The generated flow chart is as follows:

The key explanation of the activity diagram is as follows:

• startIndicates the start of an activity diagram process
• stopIndicates the end of the activity diagram process
• :user request login;: Indicates that the activity process node is the one user request loginthat needs to be :added ;.
• if+then+endifIndicates a complete conditional judgment

at last

This article introduces the drawing of plantUML. Interested friends can move to the official website to learn.

If this article is helpful or enlightening to you, you can pay attention to my public account (the little boy who picks up snails). Your support is the biggest motivation for me to keep on writing. Ask for one-click three links: like, forward, and watch.