691 lines
11 KiB
Markdown
691 lines
11 KiB
Markdown
---
|
|
title: PlantUML
|
|
icon: arcticons:uml-class-editor
|
|
createTime: 2025/10/08 15:02:08
|
|
permalink: /en/guide/chart/plantuml/
|
|
---
|
|
|
|
## Overview
|
|
|
|
The theme supports embedding [PlantUML](https://plantuml.com/) diagrams within articles.
|
|
|
|
This feature is powered by [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/).
|
|
|
|
## Configuration
|
|
|
|
This feature is disabled by default in the theme.
|
|
|
|
Enable the feature in the `.vuepress/config.ts` configuration file:
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
plantuml: true, // [!code ++]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
::: note
|
|
The following documentation is forked from [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/plantuml.html),
|
|
licensed under [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE).
|
|
:::
|
|
|
|
## Format
|
|
|
|
You can insert the same content supported by [plantuml](https://plantuml.com/), for example:
|
|
|
|
```md
|
|
@startuml
|
|
content
|
|
@enduml
|
|
```
|
|
|
|
## Examples
|
|
|
|
::: demo markdown title="Sequence Diagram"
|
|
|
|
```md
|
|
@startuml
|
|
Alice -> Bob: Authentication Request
|
|
|
|
alt successful case
|
|
|
|
Bob -> Alice: Authentication Accepted
|
|
|
|
else some failure case
|
|
|
|
Bob -> Alice: Authentication Failed
|
|
group My own label
|
|
Alice -> Log : Log attack start
|
|
loop 1000 times
|
|
Alice -> Bob: DNS Attack
|
|
end
|
|
Alice -> Log : Log attack end
|
|
end
|
|
|
|
else Another failure
|
|
|
|
Bob -> Alice: Please repeat
|
|
|
|
end
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="Use Case Diagram"
|
|
|
|
```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="Class Diagram"
|
|
|
|
```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="Activity Diagram"
|
|
|
|
```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="Component Diagram"
|
|
|
|
```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="State Diagram"
|
|
|
|
``` 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="Object Diagram"
|
|
|
|
```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="Deployment Diagram"
|
|
|
|
```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="Timing Diagram"
|
|
|
|
```md
|
|
@startuml
|
|
scale 5 as 150 pixels
|
|
|
|
clock clk with period 1
|
|
binary "Enable" as en
|
|
binary "Read/Write" as rw
|
|
binary "Data Valid" as dv
|
|
concise "Data Bus" as db
|
|
concise "Address Bus" 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:Write
|
|
highlight :read_beg to :read_end #lightBlue:Read
|
|
|
|
db@:write_beg-1 <-> @:write_end : Setup Time
|
|
db@:write_beg-1 -> addr@:write_end+1 : Hold
|
|
@enduml
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="Regex Diagram"
|
|
|
|
```md
|
|
@startregex
|
|
/<style(\s*lang=(['"])(.*?)\2)?\s*(?:scoped)?>([\s\S]+)<\/style>
|
|
@endregex
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="Network Diagram"
|
|
|
|
```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="Salt (GUI) Diagram"
|
|
|
|
```md
|
|
@startsalt
|
|
{+
|
|
{/ <b>General | Full Screen | Behavior | Saving }
|
|
{
|
|
{ Image opening mode: | ^Smart Mode^ }
|
|
[X] Smooth images when zooming
|
|
[X] Confirm image deletion
|
|
[ ] Show hidden images
|
|
}
|
|
[Close]
|
|
}
|
|
@endsalt
|
|
```
|
|
|
|
:::
|
|
|
|
::: demo markdown title="Archimate Diagram"
|
|
|
|
```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="Gantt Chart"
|
|
|
|
```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="Mind Map"
|
|
|
|
```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="Work Breakdown Structure"
|
|
|
|
```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
|
|
```
|
|
|
|
:::
|