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