绘图工具-PlantUML

ftswsfb

已于 2023-01-28 14:51:08 修改

阅读量8k

点赞数

文章标签： uml

于 2022-07-24 11:46:10 首次发布

本文链接：https://blog.csdn.net/ftswsfb/article/details/124262317

版权

基础知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

PlantUML是一款开源的UML图绘制工具，支持通过文本来生成图形，使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。

官网链接：https://plantuml.com/zh/

VSCode插件安装：EXTENSIONS搜索"PlantUML",选择安装。

文件后缀名默认为.puml，通过快捷键Alt+D，可以预览PlantUML文件。
jetbrains插件安装：File->Settings->Plugins，搜索"PlantUML",选择安装。

文件后缀名默认为.puml，可以通过图标选择预览方式。

一、UML图形

1、用例图UseCase

https://plantuml.com/use-case-diagram

@startuml
'https://plantuml.com/use-case-diagram

:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
A note can also
be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml

在这里插入图片描述

2、组件图Component

https://plantuml.com/component-diagram

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

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}


database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}

[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

在这里插入图片描述

3、类图Class

https://plantuml.com/class-diagram

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

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList
Collection <|-- AbstractCollection

Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList

class ArrayList {
Object[] elementData
size()
}

enum TimeUnit {
DAYS
HOURS
MINUTES
}

@enduml

在这里插入图片描述

4、对象图Object

https://plantuml.com/object-diagram

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

object London
object Washington
object Berlin
object NewYork

map CapitalCity {
 UK *-> London
 USA *--> Washington
 Germany *---> Berlin
}

NewYork --> CapitalCity::USA
@enduml

在这里插入图片描述

5、状态图State

https://plantuml.com/state-diagram

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

scale 350 width
[*] --> NotShooting

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

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

  state NewValuePreview {
     State1 -> State2
  }

}
@enduml

在这里插入图片描述

6、活动图Activity

https://plantuml.com/activity-diagram-beta

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

start
:ClickServlet.handleRequest();
:new page;
if (Page.onSecurityCheck) then (true)
  :Page.onInit();
  if (isForward?) then (no)
    :Process controls;
    if (continue processing?) then (no)
      stop
    endif

    if (isPost?) then (yes)
      :Page.onPost();
    else (no)
      :Page.onGet();
    endif
    :Page.onRender();
  endif
else (false)
endif

if (do redirect?) then (yes)
  :redirect process;
else
  if (do forward?) then (yes)
    :Forward request;
  else (no)
    :Render page template;
  endif
endif

stop

@enduml

在这里插入图片描述

7、序列图Sequence

https://plantuml.com/sequence-diagram

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

autonumber

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

在这里插入图片描述

8、部署图Deployment

https://plantuml.com/deployment-diagram

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

actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
interface interface
label label
node node
package package
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml

在这里插入图片描述

9、时序图Timing

https://plantuml.com/zh/timing-diagram

@startuml
'https://plantuml.com/zh/timing-diagram

clock   "Clock_0"   as C0 with period 50
clock   "Clock_1"   as C1 with period 50 pulse 15 offset 10
binary  "Binary"  as B
concise "Concise" as C
robust  "Robust"  as R

@0
C is Idle
R is Idle

@100
B is high
C is Waiting
R is Processing

@300
R is Waiting
@enduml

在这里插入图片描述

二、非UML图形

1、思维导图

https://plantuml.com/mindmap-diagram

@startmindmap
* root node
** some first level node
*** second level node
*** another second level node
** another first level node
--[#FFBBCC] root node
---[#FFFF00] some first level node
---- second level node
---- another second level node
---[#00FFFF] another first level node
@endmindmap

在这里插入图片描述

2、json数据图

https://plantuml.com/json

@startjson
{
    "firstName": "John",
    "lastName": "Smith",
    "isAlive": false,
    "age": 27,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021-3100"
    },
    "phoneNumbers": [
        {
            "type": "home",
            "number": "212 555-1234"
        },
        {
            "type": "office",
            "number": "646 555-4567"
        }
    ],
    "children": [
    ],
    "spouse": null
}
@endjson

在这里插入图片描述