Un
diagrama de despliegue es un tipo de diagrama que visualiza la arquitectura de los sistemas, mostrando cómo los componentes de software se despliegan en el hardware. Proporciona una imagen clara de la distribución de componentes en varios nodos, como servidores, estaciones de trabajo y dispositivos.
Con
PlantUML, crear diagramas de despliegue se convierte en un juego de niños. La plataforma ofrece una forma sencilla e intuitiva de diseñar estos diagramas utilizando texto sin formato, lo que garantiza iteraciones rápidas y un fácil control de versiones. Además, el
foro PlantUML proporciona una comunidad vibrante donde los usuarios pueden buscar ayuda, compartir ideas y colaborar en los retos de diagramación. Una de las principales ventajas de PlantUML es su capacidad para integrarse a la perfección con diversas herramientas y plataformas, lo que lo convierte en la opción preferida tanto de profesionales como de aficionados.
|
🎉 Copied!
|
@startuml
action action
actor 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
hexagon hexagon
interface interface
label label
node node
package package
person person
process process
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml
|
You can optionaly put text using bracket
[] for a long description.
|
🎉 Copied!
|
@startuml
folder folder [
This is a <b>folder
----
You can use separator
====
of different kind
....
and style
]
node node [
This is a <b>node
----
You can use separator
====
of different kind
....
and style
]
database database [
This is a <b>database
----
You can use separator
====
of different kind
....
and style
]
usecase usecase [
This is a <b>usecase
----
You can use separator
====
of different kind
....
and style
]
card card [
This is a <b>card
----
You can use separator
====
of different kind
....
and style
<i><color:blue>(add from V1.2020.7)</color></i>
]
@enduml
|
We can declare element using some short forms.
|
Long form Keyword
|
Short form Keyword
|
Long form example
|
Short form example
|
Ref.
|
actor
|
: a :
|
actor actor1
|
:actor2:
|
Actors
|
component
|
[ c ]
|
component component1
|
[component2]
|
Components
|
interface
|
() i
|
interface interface1
|
() "interface2"
|
Interfaces
|
usecase
|
( u )
|
usecase usecase1
|
(usecase2)
|
Usecases
|
Actor
|
🎉 Copied!
|
@startuml
actor actor1
:actor2:
@enduml
|
NB:
There is an old syntax for actor with guillemet which is now deprecated and will be removed some days. Please do not use in your diagram.
Component
|
🎉 Copied!
|
@startuml
component component1
[component2]
@enduml
|
Interface
|
🎉 Copied!
|
@startuml
interface interface1
() "interface2"
label "//interface example//"
@enduml
|
Usecase
|
🎉 Copied!
|
@startuml
usecase usecase1
(usecase2)
@enduml
|
You can create simple links between elements with or without labels:
|
🎉 Copied!
|
@startuml
node node1
node node2
node node3
node node4
node node5
node1 -- node2 : label1
node1 .. node3 : label2
node1 ~~ node4 : label3
node1 == node5
@enduml
|
It is possible to use several types of links:
|
🎉 Copied!
|
@startuml
artifact artifact1
artifact artifact2
artifact artifact3
artifact artifact4
artifact artifact5
artifact artifact6
artifact artifact7
artifact artifact8
artifact artifact9
artifact artifact10
artifact1 --> artifact2
artifact1 --* artifact3
artifact1 --o artifact4
artifact1 --+ artifact5
artifact1 --# artifact6
artifact1 -->> artifact7
artifact1 --0 artifact8
artifact1 --^ artifact9
artifact1 --(0 artifact10
@enduml
|
You can also have the following types:
|
🎉 Copied!
|
@startuml
cloud cloud1
cloud cloud2
cloud cloud3
cloud cloud4
cloud cloud5
cloud1 -0- cloud2
cloud1 -0)- cloud3
cloud1 -(0- cloud4
cloud1 -(0)- cloud5
@enduml
|
or another example:
|
🎉 Copied!
|
@startuml
actor foo1
actor foo2
foo1 <-0-> foo2
foo1 <-(0)-> foo2
(ac1) -le(0)-> left1
ac1 -ri(0)-> right1
ac1 .up(0).> up1
ac1 ~up(0)~> up2
ac1 -do(0)-> down1
ac1 -do(0)-> down2
actor1 -0)- actor2
component comp1
component comp2
comp1 *-0)-+ comp2
[comp3] <-->> [comp4]
boundary b1
control c1
b1 -(0)- c1
component comp1
interface interf1
comp1 #~~( interf1
:mode1actor: -0)- fooa1
:mode1actorl: -ri0)- foo1l
[component1] 0)-(0-(0 [componentC]
() component3 )-0-(0 "foo" [componentC]
[aze1] #-->> [aze2]
@enduml
|
[Ref. QA-547 and QA-1736]
⎘ See all type on
Appendix.
Similar as Bracketed class relations (linking or arrow) style
Line style
It's also possible to have explicitly
bold,
dashed,
dotted,
hidden or
plain arrows:
|
🎉 Copied!
|
@startuml
node foo
title Bracketed line style without label
foo --> bar
foo -[bold]-> bar1
foo -[dashed]-> bar2
foo -[dotted]-> bar3
foo -[hidden]-> bar4
foo -[plain]-> bar5
@enduml
|
|
🎉 Copied!
|
@startuml
title Bracketed line style with label
node foo
foo --> bar : ∅
foo -[bold]-> bar1 : [bold]
foo -[dashed]-> bar2 : [dashed]
foo -[dotted]-> bar3 : [dotted]
foo -[hidden]-> bar4 : [hidden]
foo -[plain]-> bar5 : [plain]
@enduml
|
[Adapted from QA-4181]
Line color
|
🎉 Copied!
|
@startuml
title Bracketed line color
node foo
foo --> bar
foo -[#red]-> bar1 : [#red]
foo -[#green]-> bar2 : [#green]
foo -[#blue]-> bar3 : [#blue]
foo -[#blue;#yellow;#green]-> bar4
@enduml
|
Line thickness
|
🎉 Copied!
|
@startuml
title Bracketed line thickness
node foo
foo --> bar : ∅
foo -[thickness=1]-> bar1 : [1]
foo -[thickness=2]-> bar2 : [2]
foo -[thickness=4]-> bar3 : [4]
foo -[thickness=8]-> bar4 : [8]
foo -[thickness=16]-> bar5 : [16]
@enduml
|
[Adapted from QA-4949]
Mix
|
🎉 Copied!
|
@startuml
title Bracketed line style mix
node foo
foo --> bar : ∅
foo -[#red,thickness=1]-> bar1 : [#red,1]
foo -[#red,dashed,thickness=2]-> bar2 : [#red,dashed,2]
foo -[#green,dashed,thickness=4]-> bar3 : [#green,dashed,4]
foo -[#blue,dotted,thickness=8]-> bar4 : [blue,dotted,8]
foo -[#blue,plain,thickness=16]-> bar5 : [blue,plain,16]
foo -[#blue;#green,dashed,thickness=4]-> bar6 : [blue;green,dashed,4]
@enduml
|
You can change the
color or style of individual arrows using the inline following notation:
#color;line.[bold|dashed|dotted];text:color
|
🎉 Copied!
|
@startuml
node foo
foo --> bar : normal
foo --> bar1 #line:red;line.bold;text:red : red bold
foo --> bar2 #green;line.dashed;text:green : green dashed
foo --> bar3 #blue;line.dotted;text:blue : blue dotted
@enduml
|
[Ref. QA-3770 and QA-3816]
[See similar feature on class diagram]
You can change the
color or style of individual element using the following notation:
#[color|back:color];line:color;line.[bold|dashed|dotted];text:color
|
🎉 Copied!
|
@startuml
agent a
cloud c #pink;line:red;line.bold;text:red
file f #palegreen;line:green;line.dashed;text:green
node n #aliceblue;line:blue;line.dotted;text:blue
@enduml
|
|
🎉 Copied!
|
@startuml
agent a
cloud c #pink;line:red;line.bold;text:red [
c
cloud description
]
file f #palegreen;line:green;line.dashed;text:green {
[c1]
[c2]
}
frame frame {
node n #aliceblue;line:blue;line.dotted;text:blue
}
@enduml
|
[Ref. QA-6852]
Here are the nestable elements:
|
🎉 Copied!
|
@startuml
action action {
}
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
process process {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml
|
Example with one level
|
🎉 Copied!
|
@startuml
artifact artifactVeryLOOOOOOOOOOOOOOOOOOOg as "artifact" {
file f1
}
card cardVeryLOOOOOOOOOOOOOOOOOOOg as "card" {
file f2
}
cloud cloudVeryLOOOOOOOOOOOOOOOOOOOg as "cloud" {
file f3
}
component componentVeryLOOOOOOOOOOOOOOOOOOOg as "component" {
file f4
}
database databaseVeryLOOOOOOOOOOOOOOOOOOOg as "database" {
file f5
}
file fileVeryLOOOOOOOOOOOOOOOOOOOg as "file" {
file f6
}
folder folderVeryLOOOOOOOOOOOOOOOOOOOg as "folder" {
file f7
}
frame frameVeryLOOOOOOOOOOOOOOOOOOOg as "frame" {
file f8
}
hexagon hexagonVeryLOOOOOOOOOOOOOOOOOOOg as "hexagon" {
file f9
}
node nodeVeryLOOOOOOOOOOOOOOOOOOOg as "node" {
file f10
}
package packageVeryLOOOOOOOOOOOOOOOOOOOg as "package" {
file f11
}
queue queueVeryLOOOOOOOOOOOOOOOOOOOg as "queue" {
file f12
}
rectangle rectangleVeryLOOOOOOOOOOOOOOOOOOOg as "rectangle" {
file f13
}
stack stackVeryLOOOOOOOOOOOOOOOOOOOg as "stack" {
file f14
}
storage storageVeryLOOOOOOOOOOOOOOOOOOOg as "storage" {
file f15
}
@enduml
|
Other example
|
🎉 Copied!
|
@startuml
artifact Foo1 {
folder Foo2
}
folder Foo3 {
artifact Foo4
}
frame Foo5 {
database Foo6
}
cloud vpc {
node ec2 {
stack stack
}
}
@enduml
|
|
🎉 Copied!
|
@startuml
node Foo1 {
cloud Foo2
}
cloud Foo3 {
frame Foo4
}
database Foo5 {
storage Foo6
}
storage Foo7 {
storage Foo8
}
@enduml
|
Full nesting
Here is all the nested elements:
|
🎉 Copied!
|
@startuml
action action {
artifact artifact {
card card {
cloud cloud {
component component {
database database {
file file {
folder folder {
frame frame {
hexagon hexagon {
node node {
package package {
process process {
queue queue {
rectangle rectangle {
stack stack {
storage storage {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml
|
- or reverse alphabetical order
|
🎉 Copied!
|
@startuml
storage storage {
stack stack {
rectangle rectangle {
queue queue {
process process {
package package {
node node {
hexagon hexagon {
frame frame {
folder folder {
file file {
database database {
component component {
cloud cloud {
card card {
artifact artifact {
action action {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml
|
Simple alias with as
|
🎉 Copied!
|
@startuml
node Node1 as n1
node "Node 2" as n2
file f1 as "File 1"
cloud c1 as "this
is
a
cloud"
cloud c2 [this
is
another
cloud]
n1 -> n2
n1 --> f1
f1 -> c1
c1 -> c2
@enduml
|
Examples of long alias
[Ref. QA-12082]
|
🎉 Copied!
|
@startuml
skinparam rectangle {
roundCorner<<Concept>> 25
}
rectangle "Concept Model" <<Concept>> {
rectangle "Example 1" <<Concept>> as ex1
rectangle "Another rectangle"
}
@enduml
|
roundCorner
|
🎉 Copied!
|
@startuml
skinparam roundCorner 15
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
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
@enduml
|
[Ref. QA-5299, QA-6915, QA-11943]
|
🎉 Copied!
|
@startuml
left to right direction
skinparam nodesep 5
f3 ~~ b3 : ""~~""\n//dotted//
f2 .. b2 : ""..""\n//dashed//
f1 == b1 : ""==""\n//bold//
f0 -- b0 : ""--""\n//plain//
@enduml
|
Type of arrow head
|
🎉 Copied!
|
@startuml
left to right direction
skinparam nodesep 5
f13 --0 b13 : ""--0""
f12 --@ b12 : ""--@""
f11 --:|> b11 : ""--:|>""
f10 --||> b10 : ""--||>""
f9 --|> b9 : ""--|>""
f8 --^ b8 : ""--^ ""
f7 --\\ b7 : ""--\\\\""
f6 --# b6 : ""--# ""
f5 --+ b5 : ""--+ ""
f4 --o b4 : ""--o ""
f3 --* b3 : ""--* ""
f2 -->> b2 : ""-->>""
f1 --> b1 : ""--> ""
f0 -- b0 : ""-- ""
@enduml
|
Type of '0' arrow or circle arrow
|
🎉 Copied!
|
@startuml
left to right direction
skinparam nodesep 5
f10 0--0 b10 : "" 0--0 ""
f9 )--( b9 : "" )--( ""
f8 0)--(0 b8 : "" 0)--(0""
f7 0)-- b7 : "" 0)-- ""
f6 -0)- b6 : "" -0)- ""
f5 -(0)- b5 : "" -(0)-""
f4 -(0- b4 : "" -(0- ""
f3 --(0 b3 : "" --(0 ""
f2 --( b2 : "" --( ""
f1 --0 b1 : "" --0 ""
@enduml
|
Simple element
Nested element
Without sub-element
With sub-element
Simple element
Global style (on componentDiagram)
|
🎉 Copied!
|
@startuml
<style>
componentDiagram {
BackGroundColor palegreen
LineThickness 1
LineColor red
}
document {
BackGroundColor white
}
</style>
actor 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
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml
|
Style for each element
[Ref. QA-13261]
Nested element (without level)
Global style (on componentDiagram)
|
🎉 Copied!
|
@startuml
<style>
componentDiagram {
BackGroundColor palegreen
LineThickness 2
LineColor red
}
</style>
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml
|
Style for each nested element
Nested element (with one level)
Global style (on componentDiagram)
|
🎉 Copied!
|
@startuml
<style>
componentDiagram {
BackGroundColor palegreen
LineThickness 1
LineColor red
}
document {
BackGroundColor white
}
</style>
artifact e1 as "artifact" {
file f1
}
card e2 as "card" {
file f2
}
cloud e3 as "cloud" {
file f3
}
component e4 as "component" {
file f4
}
database e5 as "database" {
file f5
}
file e6 as "file" {
file f6
}
folder e7 as "folder" {
file f7
}
frame e8 as "frame" {
file f8
}
hexagon e9 as "hexagon" {
file f9
}
node e10 as "node" {
file f10
}
package e11 as "package" {
file f11
}
queue e12 as "queue" {
file f12
}
rectangle e13 as "rectangle" {
file f13
}
stack e14 as "stack" {
file f14
}
storage e15 as "storage" {
file f15
}
@enduml
|
Style for each nested element
Simple element
|
🎉 Copied!
|
@startuml
<style>
.stereo {
BackgroundColor palegreen
}
</style>
actor actor << stereo >>
actor/ "actor/" << stereo >>
agent agent << stereo >>
artifact artifact << stereo >>
boundary boundary << stereo >>
card card << stereo >>
circle circle << stereo >>
cloud cloud << stereo >>
collections collections << stereo >>
component component << stereo >>
control control << stereo >>
database database << stereo >>
entity entity << stereo >>
file file << stereo >>
folder folder << stereo >>
frame frame << stereo >>
hexagon hexagon << stereo >>
interface interface << stereo >>
label label << stereo >>
node node << stereo >>
package package << stereo >>
person person << stereo >>
queue queue << stereo >>
rectangle rectangle << stereo >>
stack stack << stereo >>
storage storage << stereo >>
usecase usecase << stereo >>
usecase/ "usecase/" << stereo >>
@enduml
|
Simple example
|
🎉 Copied!
|
@startuml
allowmixing
component Component
actor Actor
usecase Usecase
() Interface
node Node
cloud Cloud
json JSON {
"fruit":"Apple",
"size":"Large",
"color": ["Red", "Green"]
}
@enduml
|
[Ref. QA-15481]
For another example, see on
JSON page.
In order to add a Deployment element or a State element within a Class or Object diagram, you can use the
allowmixing or
allow_mixing directive.
Mixing all elements
|
🎉 Copied!
|
@startuml
allowmixing
skinparam nodesep 10
abstract abstract
abstract class "abstract class"
annotation annotation
circle circle
() circle_short_form
class class
diamond diamond
<> diamond_short_form
entity entity
enum enum
exception exception
interface interface
metaclass metaclass
protocol protocol
stereotype stereotype
struct struct
object object
map map {
key => value
}
json JSON {
"fruit":"Apple",
"size":"Large",
"color": ["Red", "Green"]
}
action action
actor 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
hexagon hexagon
interface interface
label label
node node
package package
person person
process process
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
state state
@enduml
|
[Ref. QA-2335 and QA-5329]
You can added
port with
port,
portinand
portout keywords.
Port
|
🎉 Copied!
|
@startuml
[c]
node node {
port p1
port p2
port p3
file f1
}
c --> p1
c --> p2
c --> p3
p1 --> f1
p2 --> f1
@enduml
|
PortIn
|
🎉 Copied!
|
@startuml
[c]
node node {
portin p1
portin p2
portin p3
file f1
}
c --> p1
c --> p2
c --> p3
p1 --> f1
p2 --> f1
@enduml
|
PortOut
|
🎉 Copied!
|
@startuml
node node {
portout p1
portout p2
portout p3
file f1
}
[o]
p1 --> o
p2 --> o
p3 --> o
f1 --> p1
@enduml
|
Mixing PortIn & PortOut
|
🎉 Copied!
|
@startuml
[i]
node node {
portin p1
portin p2
portin p3
portout po1
portout po2
portout po3
file f1
}
[o]
i --> p1
i --> p2
i --> p3
p1 --> f1
p2 --> f1
po1 --> o
po2 --> o
po3 --> o
f1 --> po1
@enduml
|
You can change (whole) diagram orientation with:
top to bottom direction (by default)left to right direction
Top to bottom (by default)
With Graphviz (layout engine by default)
The main rule is:
Nested element first, then simple element.
|
🎉 Copied!
|
@startuml
card a
card b
package A {
card a1
card a2
card a3
card a4
card a5
package sub_a {
card sa1
card sa2
card sa3
}
}
package B {
card b1
card b2
card b3
card b4
card b5
package sub_b {
card sb1
card sb2
card sb3
}
}
@enduml
|
With Smetana (internal layout engine)
The main rule is the opposite:
Simple element first, then nested element.
|
🎉 Copied!
|
@startuml
!pragma layout smetana
card a
card b
package A {
card a1
card a2
card a3
card a4
card a5
package sub_a {
card sa1
card sa2
card sa3
}
}
package B {
card b1
card b2
card b3
card b4
card b5
package sub_b {
card sb1
card sb2
card sb3
}
}
@enduml
|
Left to right
With Graphviz (layout engine by default)
|
🎉 Copied!
|
@startuml
left to right direction
card a
card b
package A {
card a1
card a2
card a3
card a4
card a5
package sub_a {
card sa1
card sa2
card sa3
}
}
package B {
card b1
card b2
card b3
card b4
card b5
package sub_b {
card sb1
card sb2
card sb3
}
}
@enduml
|
With Smetana (internal layout engine)
|
🎉 Copied!
|
@startuml
!pragma layout smetana
left to right direction
card a
card b
package A {
card a1
card a2
card a3
card a4
card a5
package sub_a {
card sa1
card sa2
card sa3
}
}
package B {
card b1
card b2
card b3
card b4
card b5
package sub_b {
card sb1
card sb2
card sb3
}
}
@enduml
|
Declaring element
Home
What's New ?
Getting Started
Online Server
Running
F.A.Q.
Download
Forum
Theme
Preprocessing
Standard Library
Hitchhiker's Guide
PDF Guide
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
