mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
691 lines
11 KiB
Markdown
691 lines
11 KiB
Markdown
---
|
|
title: PlantUML
|
|
icon: arcticons:uml-class-editor
|
|
createTime: 2025/03/01 15:02:08
|
|
permalink: /guide/chart/plantuml/
|
|
---
|
|
|
|
## 概述
|
|
|
|
主题支持在 文章中 嵌入由 [PlantUML](https://plantuml.com/) 。
|
|
|
|
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
|
|
|
## 配置
|
|
|
|
主题默认不启用该功能。
|
|
|
|
在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
plantuml: true, // [!code ++]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
::: note
|
|
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/plantuml.html),
|
|
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
|
:::
|
|
|
|
## 格式
|
|
|
|
你可以插入[plantuml](https://plantuml.com/) 支持的相同内容，例如:
|
|
|
|
```md
|
|
@startuml
|
|
内容
|
|
@enduml
|
|
```
|
|
|
|
## 示例
|
|
|
|
::: demo markdown title="序列图"
|
|
|
|
```md
|
|
@startuml
|
|
Alice -> Bob: 认证请求
|
|
|
|
alt 成功情况
|
|
|
|
Bob -> Alice: 认证接受
|
|
|
|
else 某种失败情况
|
|
|
|
Bob -> Alice: 认证失败
|
|
group 我自己的标签
|
|
Alice -> Log : 开始记录攻击日志
|
|
loop 1000次
|
|
Alice -> Bob: DNS 攻击
|
|
end
|
|
Alice -> Log : 结束记录攻击日志
|
|
end
|
|
|
|
else 另一种失败
|
|
|
|
Bob -> Alice: 请重复
|
|
|
|
end
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="用例图"
|
|
|
|
```md
|
|
@startuml
|
|
: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
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="类图"
|
|
|
|
```md
|
|
@startuml
|
|
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
|
|
}
|
|
|
|
annotation SuppressWarnings
|
|
|
|
annotation Annotation {
|
|
annotation with members
|
|
String foo()
|
|
String bar()
|
|
}
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="活动图"
|
|
|
|
```md
|
|
@startuml
|
|
|
|
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
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="组件图"
|
|
|
|
```md
|
|
@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
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="状态图"
|
|
|
|
``` md
|
|
@startuml
|
|
state start1 <<start>>
|
|
state choice1 <<choice>>
|
|
state fork1 <<fork>>
|
|
state join2 <<join>>
|
|
state end3 <<end>>
|
|
|
|
[*] --> choice1 : from start\nto choice
|
|
start1 --> choice1 : from start stereo\nto choice
|
|
|
|
choice1 --> fork1 : from choice\nto fork
|
|
choice1 --> join2 : from choice\nto join
|
|
choice1 --> end3 : from choice\nto end stereo
|
|
|
|
fork1 ---> State1 : from fork\nto state
|
|
fork1 --> State2 : from fork\nto state
|
|
|
|
State2 --> join2 : from state\nto join
|
|
State1 --> [*] : from state\nto end
|
|
|
|
join2 --> [*] : from join\nto end
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="对象图"
|
|
|
|
```md
|
|
@startuml
|
|
object London
|
|
object Washington
|
|
object Berlin
|
|
object NewYork
|
|
|
|
map CapitalCity {
|
|
UK *-> London
|
|
USA*--> Washington
|
|
Germany *---> Berlin
|
|
}
|
|
|
|
NewYork --> CapitalCity::USA
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="部署图"
|
|
|
|
```md
|
|
@startuml
|
|
|
|
node node1
|
|
node node2
|
|
node node3
|
|
node node4
|
|
node node5
|
|
node1 -- node2 : label1
|
|
node1 .. node3 : label2
|
|
node1 ~~ node4 : label3
|
|
node1 == node5
|
|
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="时序图"
|
|
|
|
```md
|
|
@startuml
|
|
scale 5 as 150 pixels
|
|
|
|
clock clk with period 1
|
|
binary "启用" as en
|
|
binary "读/写" as rw
|
|
binary "数据有效" as dv
|
|
concise "数据总线" as db
|
|
concise "地址总线" as addr
|
|
|
|
@6 as :write_beg
|
|
@10 as :write_end
|
|
|
|
@15 as :read_beg
|
|
@19 as :read_end
|
|
|
|
@0
|
|
en is low
|
|
db is "0x0"
|
|
addr is "0x03f"
|
|
rw is low
|
|
dv is 0
|
|
|
|
@:write_beg-3
|
|
en is high
|
|
@:write_beg-2
|
|
db is "0xDEADBEEF"
|
|
@:write_beg-1
|
|
dv is 1
|
|
@:write_beg
|
|
rw is high
|
|
|
|
@:write_end
|
|
rw is low
|
|
dv is low
|
|
@:write_end+1
|
|
rw is low
|
|
db is "0x0"
|
|
addr is "0x23"
|
|
|
|
@12
|
|
dv is high
|
|
@13
|
|
db is "0xFFFF"
|
|
|
|
@20
|
|
en is low
|
|
dv is low
|
|
@21
|
|
db is "0x0"
|
|
|
|
highlight :write_beg to :write_end #Gold:写
|
|
highlight :read_beg to :read_end #lightBlue:读
|
|
|
|
db@:write_beg-1 <-> @:write_end : 设置时间
|
|
db@:write_beg-1 -> addr@:write_end+1 : 保持
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="正则图"
|
|
|
|
```md
|
|
@startregex
|
|
/<style(\s*lang=(['"])(.*?)\2)?\s*(?:scoped)?>([\s\S]+)<\/style>
|
|
@endregex
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="网络图"
|
|
|
|
```md
|
|
@startuml
|
|
nwdiag {
|
|
network dmz {
|
|
address = "210.x.x.x/24"
|
|
|
|
web01 [address = "210.x.x.1"];
|
|
web02 [address = "210.x.x.2"];
|
|
}
|
|
network internal {
|
|
address = "172.x.x.x/24";
|
|
|
|
web01 [address = "172.x.x.1"];
|
|
web02 [address = "172.x.x.2"];
|
|
db01;
|
|
db02;
|
|
}
|
|
}
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="图形界面"
|
|
|
|
```md
|
|
@startsalt
|
|
{+
|
|
{/ <b>通用 | 全屏 | 行为 | 保存 }
|
|
{
|
|
{ 图片打开模式: | ^智能模式^ }
|
|
[X] 缩放时平滑显示图片
|
|
[X] 图片删除确认
|
|
[ ] 显示隐藏图片
|
|
}
|
|
[关闭]
|
|
}
|
|
@endsalt
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="架构图"
|
|
|
|
```md
|
|
@startuml
|
|
skinparam rectangle<<behavior>> {
|
|
roundCorner 25
|
|
}
|
|
sprite $bProcess jar:archimate/business-process
|
|
sprite $aService jar:archimate/application-service
|
|
sprite $aComponent jar:archimate/application-component
|
|
|
|
rectangle "Handle claim" as HC <<$bProcess>><<behavior>> #Business
|
|
rectangle "Capture Information" as CI <<$bProcess>><<behavior>> #Business
|
|
rectangle "Notify\nAdditional Stakeholders" as NAS <<$bProcess>><<behavior>> #Business
|
|
rectangle "Validate" as V <<$bProcess>><<behavior>> #Business
|
|
rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
|
|
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
|
|
|
|
HC *-down- CI
|
|
HC*-down- NAS
|
|
HC *-down- V
|
|
HC*-down- I
|
|
HC *-down- P
|
|
|
|
CI -right->> NAS
|
|
NAS -right->> V
|
|
V -right->> I
|
|
I -right->> P
|
|
|
|
rectangle "Scanning" as scanning <<$aService>><<behavior>> #Application
|
|
rectangle "Customer admnistration" as customerAdministration <<$aService>><<behavior>> #Application
|
|
rectangle "Claims admnistration" as claimsAdministration <<$aService>><<behavior>> #Application
|
|
rectangle Printing <<$aService>><<behavior>> #Application
|
|
rectangle Payment <<$aService>><<behavior>> #Application
|
|
|
|
scanning -up-> CI
|
|
customerAdministration -up-> CI
|
|
claimsAdministration -up-> NAS
|
|
claimsAdministration -up-> V
|
|
claimsAdministration -up-> I
|
|
Payment -up-> P
|
|
|
|
Printing -up-> V
|
|
Printing -up-> P
|
|
|
|
rectangle "Document\nManagement\nSystem" as DMS <<$aComponent>> #Application
|
|
rectangle "General\nCRM\nSystem" as CRM <<$aComponent>> #Application
|
|
rectangle "Home & Away\nPolicy\nAdministration" as HAPA <<$aComponent>> #Application
|
|
rectangle "Home & Away\nFinancial\nAdministration" as HFPA <<$aComponent>> #Application
|
|
|
|
DMS .up.|> scanning
|
|
DMS .up.|> Printing
|
|
CRM .up.|> customerAdministration
|
|
HAPA .up.|> claimsAdministration
|
|
HFPA .up.|> Payment
|
|
|
|
legend left
|
|
Example from the "Archisurance case study" (OpenGroup).
|
|
See
|
|
====
|
|
<$bProcess> :business process
|
|
====
|
|
<$aService> : application service
|
|
====
|
|
<$aComponent> : application component
|
|
endlegend
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="甘特图"
|
|
|
|
```md
|
|
@startgantt
|
|
<style>
|
|
ganttDiagram {
|
|
task {
|
|
FontName Helvetica
|
|
FontColor red
|
|
FontSize 18
|
|
FontStyle bold
|
|
BackGroundColor GreenYellow
|
|
LineColor blue
|
|
}
|
|
milestone {
|
|
FontColor blue
|
|
FontSize 25
|
|
FontStyle italic
|
|
BackGroundColor yellow
|
|
LineColor red
|
|
}
|
|
note {
|
|
FontColor DarkGreen
|
|
FontSize 10
|
|
LineColor OrangeRed
|
|
}
|
|
arrow {
|
|
FontName Helvetica
|
|
FontColor red
|
|
FontSize 18
|
|
FontStyle bold
|
|
BackGroundColor GreenYellow
|
|
LineColor blue
|
|
LineStyle 8.0;13.0
|
|
LineThickness 3.0
|
|
}
|
|
separator {
|
|
BackgroundColor lightGreen
|
|
LineStyle 8.0;3.0
|
|
LineColor red
|
|
LineThickness 1.0
|
|
FontSize 16
|
|
FontStyle bold
|
|
FontColor purple
|
|
Margin 5
|
|
Padding 20
|
|
}
|
|
timeline {
|
|
BackgroundColor Bisque
|
|
}
|
|
closed {
|
|
BackgroundColor pink
|
|
FontColor red
|
|
}
|
|
}
|
|
</style>
|
|
Project starts the 2020-12-01
|
|
|
|
[Task1] requires 10 days
|
|
sunday are closed
|
|
|
|
note bottom
|
|
memo1 ...
|
|
memo2 ...
|
|
explanations1 ...
|
|
explanations2 ...
|
|
end note
|
|
|
|
[Task2] requires 20 days
|
|
[Task2] starts 10 days after [Task1]'s end
|
|
-- Separator title --
|
|
[M1] happens on 5 days after [Task1]'s end
|
|
|
|
<style>
|
|
separator {
|
|
LineColor black
|
|
Margin 0
|
|
Padding 0
|
|
}
|
|
</style>
|
|
|
|
-- end --
|
|
@endgantt
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="思维导图"
|
|
|
|
```md
|
|
@startmindmap
|
|
caption figure 1
|
|
title My super title
|
|
|
|
* <&flag>Debian
|
|
**<&globe>Ubuntu
|
|
***Linux Mint
|
|
*** Kubuntu
|
|
***Lubuntu
|
|
*** KDE Neon
|
|
** <&graph>LMDE
|
|
**<&pulse>SolydXK
|
|
** <&people>SteamOS
|
|
** <&star>Raspbian with a very long name
|
|
***<s>Raspmbc</s> => OSMC
|
|
*** <s>Raspyfi</s> => Volumio
|
|
|
|
header
|
|
My super header
|
|
endheader
|
|
|
|
center footer My super footer
|
|
|
|
legend right
|
|
Short
|
|
legend
|
|
endlegend
|
|
@endmindmap
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="工作分解结构图"
|
|
|
|
```md
|
|
@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
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="JSON"
|
|
|
|
```md
|
|
@startjson
|
|
# highlight "lastName"
|
|
# highlight "address" / "city"
|
|
# highlight "phoneNumbers" / "0" / "number"
|
|
{
|
|
"firstName": "John",
|
|
"lastName": "Smith",
|
|
"isAlive": true,
|
|
"age": 28,
|
|
"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
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="YAML"
|
|
|
|
```md
|
|
@startyaml
|
|
doe: "a deer, a female deer"
|
|
ray: "a drop of golden sun"
|
|
pi: 3.14159
|
|
xmas: true
|
|
french-hens: 3
|
|
calling-birds:
|
|
- huey
|
|
- dewey
|
|
- louie
|
|
- fred
|
|
xmas-fifth-day:
|
|
calling-birds: four
|
|
french-hens: 3
|
|
golden-rings: 5
|
|
partridges:
|
|
count: 1
|
|
location: "a pear tree"
|
|
turtle-doves: two
|
|
@endyaml
|
|
```
|
|
|
|
:::
|