PlantUML工具使用和常用语法

发表于 | 分类于 ， ， | 阅读次数:

安装java环境

安装Graphviz

graphviz 是个开源的图片渲染库，可将 PlantUML 脚本转换为图片。

两种安装方式：
1、终端执行brew install graphviz
2、官网下载安装（推荐）

webstorm安装plantUML插件

jetbrains系列IDE基本都行

  1. 打开IntelliJ IDEA，选择菜单File->Settings
  2. 选择Plugins项，在中间的搜索输入框输入“plantuml”，会提示本地插件库中没有该插件。选择“Search in repositories”
  3. 选中PlantUML integration plugin，然后选择安装。
  4. 重启IDE，让PlantUML插件生效。
  5. 验证PlantUML插件安装成功:file->new->UML *

hexo支持PlantUML

安装插件

npm install hexo-tag-plantuml --save

语法

1
2
3
{% plantuml %}
    Bob->Alice : hello
{% endplantuml %}

示例

1
2
3
4
5
6
7
8
{% plantuml %}
start
:配置Java环境; 
:下载pantuml.jar;
:编写描述文件; 
:执行; 
stop
{% endplantuml %}

效果如下

PlantULM 快速入门

时序图

  1. 效果图

  2. 源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    @startuml

    title 时序图

    == 鉴权阶段 ==

    Alice -> Bob: 请求
    Bob -> Alice: 应答

    == 数据上传 ==

    Alice -> Bob: 上传数据
    note left: 这是显示在左边的备注

    Bob --> Canny: 转交数据
    ... 不超过 5 秒钟 ...
    Canny --> Bob: 状态返回
    note right: 这是显示在右边的备注

    Bob -> Alice: 状态返回

    == 状态显示 ==

    Alice -> Alice: 给自己发消息

    @enduml

  3. 语法

使用 title 来指定标题
‘->’ 和 ‘–>’ 来指示线条的形式
在每个时序后面加冒号 : 来添加注释
使用 note 来显示备注，备注可以指定显示在左边或右边
使用 == xxx == 来分隔时序图
使用 … 来表示延迟省略号
节点可以给自己发送消息，方法是发送方和接收方使用同一个主体即可

用例图

  1. 效果图

  2. 源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @startuml

    left to right direction
    actor 消费者
    actor 销售员
    rectangle 买单 {
    消费者 -- (买单)
    (买单) .> (付款) : include
    (帮助) .> (买单) : extends
    (买单) -- 销售员
    }

    @enduml

  3. 语法

  • 用例图
    • 用例图是指由参与者（Actor）、用例（Use Case）以及它们之间的关系构成的用于描述系统功能的静态视图
    • 百度百科上有简易的入门资料，其中用例之间的关系 (include, extends) 是关键
  • 使用 actor 来定义参与者
  • 使用括号 (xxx) 来表示用例，用例用椭圆形表达
  • 使用不同的线条表达不同的关系。包括参与者与用例的关系，用例与用例的关系

流程图

  1. 效果图

  2. 源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    @startuml

    start
    :"步骤1处理";
    :"步骤2处理";
    if ("条件1判断") then (true)
        :条件1成立时执行的动作;
        if ("分支条件2判断") then (no)
            :"条件2不成立时执行的动作";
        else
            if ("条件3判断") then (yes)
                :"条件3成立时的动作";
            else (no)
                :"条件3不成立时的动作";
            endif
        endif
        :"顺序步骤3处理";
    endif

    if ("条件4判断") then (yes)
    :"条件4成立的动作";
    else
        if ("条件5判断") then (yes)
            :"条件5成立时的动作";
        else (no)
            :"条件5不成立时的动作";
        endif
    endif
    stop
    @enduml

  3. 语法

  • 使用 start 来表示流程开始，使用 stop 来表示流程结束
  • 顺序流程使用冒号和分号 :xxx; 来表示
  • 条件语句使用 if (“condition 1”) then (true/yes/false/no) 来表示
  • 条件语句可以嵌套

组件图

我们经常使用组件图来画部署视图，或者用来画系统的拓扑结构图。

  1. 效果图

  2. 源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    @startuml

    package "组件1" {
        ["组件1.1"] - ["组件1.2"]
        ["组件1.2"] -> ["组件2.1"]
    }

    node "组件2" {
        ["组件2.1"] - ["组件2.2"]
        ["组件2.2"] --> [负载均衡服务器]
    }

    cloud {
        [负载均衡服务器] -> [逻辑服务器1]
        [负载均衡服务器] -> [逻辑服务器2]
        [负载均衡服务器] -> [逻辑服务器3]
    }

    database "MySql" {
        folder "This is my folder" {
            [Folder 3]
        }

        frame "Foo" {
            [Frame 4]
        }
    }

    [逻辑服务器1] --> [Folder 3]
    [逻辑服务器2] --> [Frame 4]
    [逻辑服务器3] --> [Frame 4]

    @enduml

  3. 语法

  • 使用方括号 [xxx] 来表示组件
  • 可以把几个组件合并成一个包，可以使用的关键字为 package, node, folder, frame, cloud, database。不同的关键字图形不一样。
  • 可以在包内部用不同的箭头表达同一个包的组件之间的关系
  • 可以在包内部直接表达到另外一个包内部的组件的交互关系
  • 可以在流程图外部直接表达包之间或包的组件之间的交互关系

状态图

我们一般使用状态图来画状态机

  1. 效果图

  2. 源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    {% plantuml %}
    @startuml

    scale 640 width

    [*] --> NotShooting

    state NotShooting {
        [*] --> Idle
        Idle --> Processing: SignalEvent
        Processing --> Idle: Finish
        Idle --> Configuring : EvConfig
        Configuring --> Idle : EvConfig
    }

    state Configuring {
        [*] --> NewValueSelection
        NewValueSelection --> NewValuePreview : EvNewValue
        NewValuePreview --> NewValueSelection : EvNewValueRejected
        NewValuePreview --> NewValueSelection : EvNewValueSaved
        state NewValuePreview {
            State1 -> State2
        }
    }

    @enduml

  3. 语法

  • 使用 [*] 来表示状态的起点
  • 使用 state 来定义子状态图
  • 状态图可以嵌套
  • 使用 scale 命令来指定生成的图片的尺寸

总结

不需要去记这些标记，在需要的时候去使用它，通过不断地使用来熟悉不同的图的语法。可以下载 PlanUML 官方文档 作为参考，遇到问题的时候翻一翻，这样很快就可以学会使用 PlantUML 高效地画图。

参考