¡Dibuja diagramas de tiempo con código! Muy guay

prefacio

Hola a todos, soy un niño pequeño que recoge caracoles .

Recientemente, utilicé código para dibujar diagramas de secuencia y diagramas de casos de uso UML . Me siento muy bien, así que los compartiré con ustedes.

En el desarrollo diario, generalmente en la etapa de diseño, todos necesitamos dibujar diagramas de secuencia, diagramas de casos de uso , etc. Cuando normalmente haces un dibujo, ¿lo usas draw.ioo processOnlo haces? Las imágenes dibujadas con ellos son bastante bonitas. ¡Pero, hoy, el hermano Tianluo presenta un artefacto de dibujo de código abierto! Puede dibujar imágenes con código y usar con IDE, el dibujo es eficiente y simple, fácil de hacer y bastante hermoso. Esta magia es PlantUML.

• dirección de github , da una estrella, gracias

• Número público: niño recogiendo caracoles

1. Introducción a PlantUML

PlantUML es un proyecto de código abierto, una herramienta para escribir rápidamente diagramas UML. Puede admitir la forma de codificación para generar gráficos. Se puede utilizar para dibujar diagramas de secuencia, diagramas de casos de uso UML, diagramas de clases, mapas mentales, diagramas ER , etc.

El diagrama dibujado por PlantUML es simple y hermoso. Permítanme mostrarles primero, un diagrama de secuencia de inicio de sesión dibujado por PlantUML y el código correspondiente al dibujo, de la siguiente manera:

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

El diagrama de secuencia de casos de uso de inicio de sesión es el siguiente:

2. Instalación y uso de PlantUML

La instalación de PlantUML es muy conveniente. Hay un complemento, el nombre es: PlantUML Integration, puede ir al mercado de complementos del IDE, buscar e instalar, de la siguiente manera:

Después de que la instalación sea exitosa, si desea experimentar la experiencia general rápidamente, puede crear un nuevo proyecto, luego crear un nuevo archivo plantUML File y luego copiar el código del diagrama de secuencia de inicio de sesión en mi última sección, y puede ver el diagrama de secuencia de inicio de sesión.

3. Cómo dibujar un diagrama de secuencia con PlantUML

¿Qué es un diagrama de tiempos ?

时序图（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用例图生成啦

Permítanme elegir una demostración del diagrama de casos de uso del sitio web oficial para presentar, el código es el siguiente:

@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

El correspondiente diagrama de caso de uso generado es el siguiente:

Echa un vistazo al significado de cada palabra clave:

• left to right direction: Indica que el diagrama de casos de uso se dibuja de izquierda a derecha
• actor Guest as g: Defina un participante humanoide, el alias de la variable es g.
• package Professional: define un paquete packagellamado Professional. packageque se puede usar para agrupar casos de uso y roles.
• usecase "Eat Food" as UC1: Defina un caso de uso, alias como UC1.
• fc --> UC4: Indica que roles fcy casos de uso UC4están asociados.La relación entre roles y casos de uso se -->utiliza para representar.

5. Cómo dibujar un mapa mental con plantUML

¿Qué es un mapa mental?

El inglés es The Mind Map, también conocido como Mind Map, que es una herramienta de pensamiento gráfico eficaz para expresar el pensamiento divergente. Es simple pero eficaz y eficiente. Es una herramienta de pensamiento práctica.

Escribí un mapa mental simple, el código es el siguiente:

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

PlantUML dibuja un mapa mental, es bastante simple, puedes ver el efecto

6. Cómo dibujar un diagrama de flujo de actividades con planUML

¿Qué es un diagrama de actividades?

Un diagrama de actividad (diagrama de actividad) es un flujo de trabajo que ilustra la realización de un caso de uso comercial.

Dibujé una versión simple del diagrama de flujo de actividad de inicio de sesión:

@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

El diagrama de flujo generado es el siguiente:

La explicación clave del diagrama de actividades es la siguiente:

• startIndica el inicio de un proceso de diagrama de actividad.
• stopIndica el final del proceso del diagrama de actividades.
• :user request login;: Indica que el nodo de proceso de actividad es el user request loginque se debe :agregar ;.
• if+then+endifIndica un juicio condicional completo.

Al final

Este artículo presenta el dibujo de plantUML. Los amigos interesados ​​pueden pasar al sitio web oficial para aprender.

Si este artículo te es de ayuda o esclarecedor, puedes estar atento a mi cuenta pública (el niño que recoge caracoles), tu apoyo es la mayor motivación para que yo persista en escribir. Solicite tres enlaces con un solo clic: me gusta, reenviar y mirar.