PlantUML 是一个很强大的工具，用于绘制UML、时序图等各种图，记录该工具的使用方法
这是一篇最后编辑于 6 年前 的文章，其内容可能与目前实际情况差异较大，请注意甄别
PlantUML 笔记
PlantUML 安装后可以使用plantuml来运行相关的工具
在现在的博客中，支持将 PlantUML 渲染到网页中
时序图
通常而言，时序图用于计算机网络，描述各种协议过程
@startuml header Page Header footer Page %page% of %lastpage% autonumber actor Alice #red Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response note left a note can also be defined on several lines end note autonumber 15 Alice -[#blue]\ Bob: Another authentication Request Alice /-[#green]- Bob: another authentication Response Alice ->o Alice: <font color="red"><b>Self</b></font> @enduml
AliceAliceBobBob1Authentication Request2Authentication Responsea notecan also be definedon several lines15Another authentication Request16another authentication Response17SelfPage HeaderPage %page% of %lastpage%
用例图
用例图用于描述各种类、实体之间的关系
@startuml User << Alice >> User -> (Start) User --> (Use the application) : A small label :Main Admin: ---> (Use the application) : This is\nyet another\nlabel @enduml
User«Alice»StartUse the applicationMain AdminA small labelThis isyet anotherlabel
类图
用例图用于描述各种类、实体之间的关系
@startuml
class Foo1 {
You can use
several lines
..
as you want
and group
==
things together.
__
You can have as many groups
as you want
--
End of class
}
class User {
.. Simple Getter ..
+ getName()
+ getAddress()
.. Some setter ..
+ setName()
__ private data __
int age
-- encrypted --
String password
}
@enduml
Foo1You can useseveral linesas you wantand groupthings together.You can have as many groupsas you wantEnd of classUsergetName()getAddress()Simple GettersetName()Some setterint ageprivate dataString passwordencrypted
活动图
活动图用于描述逻辑流程
@startuml (*) --> "check input" If "input is verbose" then --> [Yes] "turn on verbosity" --> "run command" else --> "run command" Endif -->(*) @enduml
check inputturn on verbosityrun commandinput is verboseYes
组件图
组件图可以描述各个模块之间的关系
@startuml
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
Some GroupOther GroupsMySqlThis is my folderFooHTTPFirst ComponentAnother ComponentFTPSecond ComponentExample 1Folder 3Frame 4
状态图
状态图用于描述程序所处的各种状态，用于描述程序逻辑
@startuml
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
NotShootingIdleConfiguringNewValueSelectionNewValuePreviewState1State2EvNewValueEvNewValueRejectedEvNewValueSavedEvConfigEvConfig
对象图
对象图是实例化后的类图，描述有实例化的成员变量的值
@startuml
object user {
name = "Dummy"
id = 123
}
@enduml
username = "Dummy"id = 123
部署图
部署图用于描述项目的各服务之间的关系
@startuml cloud cloud1 cloud cloud2 cloud cloud3 cloud cloud4 cloud cloud5 cloud1 -0- cloud2 cloud1 -0)- cloud3 cloud1 -(0- cloud4 cloud1 -(0)- cloud5 @enduml
cloud1cloud2cloud3cloud4cloud5
定时图
定时图用来描述时间状态
@startuml robust "DNS Resolver" as DNS robust "Web Browser" as WB concise "Web User" as WU @0 WU is Idle WB is Idle DNS is Idle @+100 WU -> WB : URL WU is Waiting WB is Processing @+200 WB is Waiting WB -> DNS@+50 : Resolve URL @+100 DNS is Processing @+300 DNS is Idle @enduml
DNS ResolverIdleProcessingWeb BrowserIdleProcessingWaitingWeb UserIdleWaiting0100300400700URLResolve URL
网络图
网络图可以描述网络的拓扑关系
@startuml
nwdiag {
network Sample_front {
address = "192.168.10.0/24"
color = "red"
// define group
group web {
web01 [address = ".1", shape = "node"]
web02 [address = ".2"]
}
}
network Sample_back {
address = "192.168.20.0/24"
web01 [address = ".1"]
web02 [address = ".2"]
db01 [address = ".101", shape = database ]
db02 [address = ".102"]
// define network using defined nodes
group db {
db01;
db02;
}
}
}
@enduml
Salt
Salt用于辅助设计GUI界面
@startuml
salt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@enduml
Just plain textThis is my buttonUnchecked radioChecked radioUnchecked boxChecked boxEnter text hereThis is a droplist
架构图
架构图用于描述系统架构
@startuml archimate #Technology "VPN Server" as vpnServerA <<technology-device>> rectangle GO #lightgreen rectangle STOP #red rectangle WAIT #orange @enduml
VPN ServerGOSTOPWAIT
甘特图
甘特图可以描述用于描述日期进度安排
@startgantt [Prototype design] lasts 10 days [Code prototype] lasts 10 days [Write tests] lasts 5 days [Code prototype] starts at [Prototype design]'s end [Write tests] starts at [Code prototype]'s start @endgantt
No @startuml found
思维导图
@startmindmap * root node ** some first level node ***_ second level node ***_ another second level node ***_ foo ***_ bar ***_ foobar ** another first level node @endmindmap
No @startuml found
职务图
描述职务架构
@startwbs + New Job ++ Decide on Job Requirements +++ Identity gaps +++ Review JDs ++++ Sign-Up for courses ++++ Volunteer ++++ Reading ++- Checklist +++- Responsibilities +++- Location ++ CV Upload Done +++ CV Updated ++++ Spelling & Grammar ++++ Check dates ---- Skills +++ Recruitment sites chosen @endwbs
No @startuml found