绘图工具-PlantUML

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 notenote "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-diagrampackage "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-diagramabstract class AbstractList
abstract AbstractCollection
interface List
interface CollectionList <|-- AbstractList
Collection <|-- AbstractCollectionCollection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayListclass ArrayList {
Object[] elementData
size()
}enum TimeUnit {
DAYS
HOURS
MINUTES
}@enduml

4、对象图Object

https://plantuml.com/object-diagram

@startuml
'https://plantuml.com/object-diagramobject London
object Washington
object Berlin
object NewYorkmap CapitalCity {UK *-> LondonUSA *--> WashingtonGermany *---> Berlin
}NewYork --> CapitalCity::USA
@enduml

5、状态图State

https://plantuml.com/state-diagram

@startuml
'https://plantuml.com/state-diagramscale 350 width
[*] --> NotShootingstate NotShooting {[*] --> IdleIdle --> Configuring : EvConfigConfiguring --> Idle : EvConfig
}state Configuring {[*] --> NewValueSelectionNewValueSelection --> NewValuePreview : EvNewValueNewValuePreview --> NewValueSelection : EvNewValueRejectedNewValuePreview --> NewValueSelection : EvNewValueSavedstate NewValuePreview {State1 -> State2}}
@enduml

6、活动图Activity

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

@startuml
'https://plantuml.com/activity-diagram-betastart
:ClickServlet.handleRequest();
:new page;
if (Page.onSecurityCheck) then (true):Page.onInit();if (isForward?) then (no):Process controls;if (continue processing?) then (no)stopendifif (isPost?) then (yes):Page.onPost();else (no):Page.onGet();endif:Page.onRender();endif
else (false)
endifif (do redirect?) then (yes):redirect process;
elseif (do forward?) then (yes):Forward request;else (no):Render page template;endif
endifstop@enduml

7、序列图Sequence

https://plantuml.com/sequence-diagram

@startuml
'https://plantuml.com/sequence-diagramautonumberAlice -> Bob: Authentication Request
Bob --> Alice: Authentication ResponseAlice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

8、部署图Deployment

https://plantuml.com/deployment-diagram

@startuml
'https://plantuml.com/deployment-diagramactor 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-diagramclock   "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

三、C4模型

官网链接：https://c4model.com/
中文翻译：https://www.infoq.cn/article/C4-architecture-model
英文原文：https://www.infoq.com/articles/C4-architecture-model/

PlantUML标准C4模型库：https://github.com/plantuml-stdlib/C4-PlantUML
所谓C4指的是Context, Containers, Components, Code，指代不同Level的架构图。