PlanUML guide

头像
xialeistudio
    阅读 6 分钟
    中文
    3

    Introduction

    unified modeling language (English: Unified Modeling Language, abbreviation UML) is the third-generation non-patent modeling and specification language . UML is an open method used to describe, visualize, construct and write an object-oriented, software-intensive system product under development.

    There are many softwares for writing UML, but they are basically visual and need to be written manually. This article mainly introduces the text-based UML writing tool-PlantUML.

    installation

    PlantUML has the following dependencies:

    1. graphviz
    2. jdk
    3. Jetbrains IDE plugin (optional, recommended in this article)

    Install graphviz

    This article uses Homebrew install graphviz , and the terminal executes the following command to install graphviz .

    brew install graphviz

    Check the version information after installation.

    dot -v

    The output is as follows:

    dot - graphviz version 2.47.0 (20210316.0004)
libdir = "/usr/local/Cellar/graphviz/2.47.0/lib/graphviz"
Activated plugin library: libgvplugin_dot_layout.6.dylib
Using layout: dot:dot_layout
Activated plugin library: libgvplugin_core.6.dylib
Using render: dot:core
Using device: dot:dot:core
The plugin configuration file:
    /usr/local/Cellar/graphviz/2.47.0/lib/graphviz/config6
        was successfully loaded.
    render    :  cairo dot dot_json fig gd json json0 map mp pic pov ps quartz svg tk visio vml vrml xdot xdot_json
    layout    :  circo dot fdp neato nop nop1 nop2 osage patchwork sfdp twopi
    textlayout    :  textlayout
    device    :  bmp canon cgimage cmap cmapx cmapx_np dot dot_json eps exr fig gd gd2 gif gv icns ico imap imap_np ismap jp2 jpe jpeg jpg json json0 mp pct pdf pic pict plain plain-ext png pov ps ps2 psd sgi svg svgz tga tif tiff tk vdx vml vmlz vrml wbmp webp xdot xdot1.2 xdot1.4 xdot_json
    loadimage    :  (lib) bmp eps gd gd2 gif jpe jpeg jpg pdf png ps svg webp xbm

    jdk

    This article uses Homebrew install openjdk . The terminal executes the following command to install openjdk .

    brew install openjdk

    Check the version information after installation.

    java -version

    The output is as follows:

    openjdk version "11.0.10" 2021-01-19
OpenJDK Runtime Environment (build 11.0.10+9)
OpenJDK 64-Bit Server VM (build 11.0.10+9, mixed mode)

    Jetbrains IDE plugin installation

    This article takes Goland as an example.

    1. Open IDE settings, open the Plugins window, search for PlantUML integration
    2. Restart the IDE after installation

    3. Open IDE settings, search for plantuml , make sure Remote rendering is closed

      image-20210604154007098

    PlantUML syntax

    Take the most commonly used sequence diagrams, class diagrams, flowcharts, and component diagrams as examples.

    Timing diagram

    Get Started

    1. IDE creates a new empty project, after opening the project, right click to create a new file

      image-20210604152912197

    2. Choose Sequence

      image-20210604152935751

    3. PlantUML menu item description

      image-20210604155009752

    4. Take WeChat webpage authorization as an example to compile a sequence diagram.

      @startuml
'https://plantuml.com/sequence-diagram

'启用自动编号
autonumber
'生命线自动激活
autoactivate on

actor 用户

用户 -> 应用服务器: 获取用户信息
应用服务器 -> 微信服务器: 跳转授权链接:(appid,scope,callback)
微信服务器 -> 用户: 请求用户授权
return 允许授权
return 返回授权code
应用服务器 -> 微信服务器: 获取用户access_token(appid,secret,code)
return 返回access_token+openid
应用服务器 -> 微信服务器: 获取用户信息(openid,access_token)
return 用户信息
return 用户信息

@enduml

    5. Rendering effect

      image-20210604153910674

    Grammar description

    Mark statement
    @startuml和@enduml是PlantUML的开始结束标记，无需更改。
autonumber 打开启动编号，也就是每个步骤之前都有数字编号，打开之后整个流程更加清晰
autoactivate on 打开生命线自动激活，需要配合`return`使用
actor 用户 声明`用户`的类型是actor(行为人)
    Timing statement
    • Use -> to declare a sequence operation, and a message can be appended after :
    • Use return to return the message to the caller
    Declare participants

    Participants are rectangular by default, and the actual type cannot be seen. In actual applications, there will be participants in databases, message queues, etc. Use the following keywords to change the legend of the participants.

    actor 用户
database 数据库
queue 消息队列

    image-20210604154840162

    Class Diagram

    Class diagram is a very important type in UML, which can provide us with detailed OOP design before actual coding.

    Get Started

    1. IDE creates a new empty project, after opening the project, right click to create a new file

      image-20210604152912197

    2. Choose Class

      image-20210604155301322

    3. Take an upload class as an example to write a class diagram

      @startuml
'https://plantuml.com/class-diagram

namespace com.ddhigh.uploader {
    interface Uploader {
        + String Upload(String filename) Throws IOException
    }

    namespace qiniu {
        class QiniuUploader implements Uploader {
            - client: qiniu.Client
            --
            + String Upload(String filename) Throws IOException
        }
        QiniuUploader *-- qiniu.Client
    }

    package aliyun {
        class AliyunUploader implements Uploader {
            - client: aliyun.Client
            --
            + String Upload(String filename) Throws IOException
        }
        AliyunUploader *-- aliyun.Client
    }

    class UploaderFacade {
        - uploaders: List<Uploader>
        --
        + List<String> Upload(String filename) Throws IOException
    }
    UploaderFacade o-- Uploader
}

@enduml

    4. Rendering effect

      image-20210604155821009

    Grammar description
    package

    It is recommended to use the namespace keyword to declare the package. The class name in the package declared by package namespace only requires the unique namespace

    class/interface

    There is almost no difference from the actual programming language, such as the java syntax used in the above example.

    Visibility

    PlantUML supports 3 types of visibility:

    • - Private level private
    • # Protection level protected
    • + Public level public
    Element relationship

    PlantUML mainly has the following three relationships:

    1. Extension: Contains implements and extends
    2. Aggregation: Use o-- , on the left contains on the right
    3. Combinations: use *-- , left dependent the right

    The difference between combination and aggregation: (take the figure above as an example)

    1. Combination: QiniuUploader must rely on Client to provide upload function, and the combination is generally one-to-one.
    2. Aggregation: UploadFacade can rely on multiple Uploader instances or 0 instances (but no files will be uploaded at this time). Aggregation is generally one-to-many.

    flow chart

    When sorting out complex business logic, making good use of flowcharts can help us sort out more clearly, and also facilitate our communication with other personnel (non-developers basically cannot understand the code).

    Get Started

    1. IDE creates a new empty project, after opening the project, right click to create a new file

      image-20210604152912197

    2. Create a new Activity type 060b9f2ac8b527

      image-20210604160929588

    3. Let’s use a authorization to obtain the user’s openid and insert it into the database, and then query the user’s friends for message push scenarios.

      @startuml
'https://plantuml.com/activity-diagram-beta

start
:使用code,appid,secret请求微信服务器获取access_token和openid;
:使用access_token和openid请求微信服务器获取用户信息;
:查询数据库openid是否存在;
if (数据库查询失败?) then (是)
stop
elseif (用户已存在?) then (是)
:更新用户信息;
else (否)
:新建用户并绑定openid;
endif

:获取用户好友列表;
while(好友列表遍历完成?) is (否)
:推送消息给好友;
endwhile(是)
stop

@enduml

    4. Rendering effect

      image-20210604161522881

    Grammar description

    • Start and end: use start and stop
    • Processing statement: Use : and ; wrap the process
    • Condition judgment: Use if , elseif , else , endif , then
    • Loop statement: Use while , is , endwhile write

    Component diagram

    At this stage, componentized MVVM frameworks are popular, and the representative ones are Vue , React and Angular . We can use component diagrams to draw component relationships, which is simple and easy to understand.

    Get Started

    1. IDE creates a new empty project, after opening the project, right click to create a new file

      image-20210604152912197

    2. Choose Component

      image-20210604162020830

    3. Take the WeChat homepage chat list as an example to draw a component relationship diagram

      @startuml
'https://plantuml.com/component-diagram

package widgets {
    [SearchBar] --> [Text]
    [SearchBar] --> [Icon]
    [NavigationBar] --> [Text]
    [NavigationBar] --> [Icon]
    
    [ListView] --> [ListItem]
    [ListItem] --> [Image]
    [ListItem] --> [Text]
}

package routes {
    [Home] --> [NavigationBar]
    [Home] --> [SearchBar]
    [Home] --> [ListView]
}


@enduml

    4. Rendering effect

      image-20210604162521451

      The dependencies are as follows:

      • Home page: navigation bar, search box, list
      • Navigation bar: text, icon
      • Search box: text, icon
      • List: list item
      • List items: text, pictures
    Grammar description
    • package declares the package, the components in the same package are of similar status
    • [component name] declares the component, component name is unique in a single file
    • --> declares the dependency, on the left depends on on the right

    img

    (Finish)

    uml
    xialeistudio
    21.5k 声望5k 粉丝
    « 上一篇
    Golang程序设计——函数
    下一篇 »
    理解MySQL InnoDB 中的 MVCC机制

    引用和评论

    推荐阅读
    头像
    基于llama3和langchain使用RAG搭建你的私有知识库！

    xialeistudio赞 4阅读 7k

    0 条评论
    得票最新