Zeichne Zeitdiagramme mit Code! so cool

Vorwort

Hallo zusammen, ich bin ein kleiner Junge, der Schnecken aufsammelt .

Kürzlich habe ich Code verwendet, um Sequenzdiagramme und UML-Anwendungsfalldiagramme zu zeichnen . Ich fühle mich sehr gut, also werde ich sie mit Ihnen teilen.

In der täglichen Entwicklung, im Allgemeinen in der Designphase, müssen wir alle Sequenzdiagramme, Anwendungsfalldiagramme usw. zeichnen. Wenn Sie normalerweise ein Bild zeichnen, verwenden Sie draw.ioes oder processOntun Sie es? Die damit gemalten Bilder sind eigentlich ganz nett. Aber heute stellt Bruder Tianluo ein Open-Source-Zeichnungsartefakt vor! Sie können Bilder mit Code zeichnen und mit IDE verwenden, das Zeichnen ist effizient und einfach, einfach zu machen und sehr schön. Diese Magie ist PlantUML.

Github-Adresse , gib einen Stern, danke
Öffentliche Nummer: kleiner Junge sammelt Schnecken auf

1. Einführung in PlantUML

PlantUML ist ein Open-Source-Projekt, ein Tool zum schnellen Schreiben von UML-Diagrammen. Es kann die Kodierung unterstützen, um Grafiken zu generieren. Es kann verwendet werden, um Sequenzdiagramme, UML-Anwendungsfalldiagramme, Klassendiagramme, Mindmaps, ER-Diagramme usw. zu zeichnen.

Das von PlantUML gezeichnete Diagramm ist einfach und schön.Lassen Sie mich Ihnen zuerst ein von PlantUML gezeichnetes Anmeldesequenzdiagramm und den der Zeichnung entsprechenden Code wie folgt zeigen:

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

Das Sequenzdiagramm für den Anmelde-Anwendungsfall sieht wie folgt aus:

2. Installation und Nutzung von PlantUML

Die Installation von PlantUML ist sehr komfortabel, es gibt ein Plug-in, der Name lautet: PlantUML Integration, Sie können den Plug-in-Markt der IDE wie folgt suchen und installieren:

Wenn Sie nach erfolgreicher Installation die allgemeine Erfahrung schnell erleben möchten, können Sie ein neues Projekt erstellen, dann eine neue plantUML-Datei erstellen und dann den Code des Anmeldesequenzdiagramms in meinem letzten Abschnitt kopieren, und Sie können sehen das Login-Sequenzdiagramm.

3. Wie man mit PlantUML ein Sequenzdiagramm zeichnet

Was ist ein Zeitdiagramm ?

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

Lassen Sie mich eine Anwendungsfalldiagramm-Demo von der offiziellen Website auswählen, um sie vorzustellen. Der Code lautet wie folgt:

@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

Das entsprechende generierte Anwendungsfalldiagramm sieht wie folgt aus:

Werfen Sie einen Blick auf die Bedeutung der einzelnen Schlüsselwörter:

left to right direction: Gibt an, dass das Anwendungsfalldiagramm von links nach rechts gezeichnet wird
actor Guest as g: Definieren Sie einen humanoiden Teilnehmer, der Variablenalias ist g.
package Professional: Definiert ein Paket packagenamens Professional. package, das zum Gruppieren von Anwendungsfällen und Rollen verwendet werden kann.
usecase "Eat Food" as UC1: Definieren Sie einen Anwendungsfall mit dem Alias UC1.
fc --> UC4: Gibt an, dass Rollen fcund Anwendungsfälle UC4zugeordnet sind. Die Beziehung zwischen Rollen und Anwendungsfällen wird -->zur Darstellung verwendet.

5. Wie man mit plantUML eine Mindmap zeichnet

Was ist eine Mindmap?

Englisch ist The Mind Map, auch bekannt als Mind Map, ein effektives grafisches Denkwerkzeug, um abweichendes Denken auszudrücken. Es ist einfach, aber effektiv und effizient. Es ist ein praktisches Denkwerkzeug.

Schrieb eine einfache Mindmap, der Code ist wie folgt:

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

PlantUML zeichnet eine Mindmap, es ist ganz einfach, man sieht den Effekt

6. Wie man mit planUML ein Aktivitätsflussdiagramm zeichnet

Was ist ein Aktivitätsdiagramm?

Ein Aktivitätsdiagramm (Aktivitätsdiagramm) ist ein Workflow, der die Realisierung eines Business Use Cases veranschaulicht.

Ich habe eine einfache Version des Flussdiagramms der Anmeldeaktivität gezeichnet:

@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

Das generierte Flussdiagramm sieht wie folgt aus:

Die wichtigste Erklärung des Aktivitätsdiagramms lautet wie folgt:

startZeigt den Start eines Aktivitätsdiagrammprozesses an
stopZeigt das Ende des Aktivitätsdiagrammprozesses an
:user request login;: Gibt an, dass der Aktivitätsprozessknoten derjenige ist user request login, der :hinzugefügt werden muss ;.
if+then+endifZeigt ein vollständiges bedingtes Urteil an

zu guter Letzt

Dieser Artikel stellt das Zeichnen von plantUML vor. Interessierte Freunde können auf die offizielle Website wechseln, um zu lernen.

Wenn dieser Artikel für Sie hilfreich oder aufschlussreich ist, können Sie auf mein öffentliches Konto (Der kleine Junge, der Schnecken aufsammelt) achten.Ihre Unterstützung ist die größte Motivation für mich, weiter zu schreiben. Fragen Sie nach drei Links mit einem Klick: „Gefällt mir“, „Weiterleiten“ und „Ansehen“.