Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    View page history    Add new chapter    Reorder page    Raw


Diagrama de Actividades

Activity Diagram (legacy)

This is the old Activity Diagram (legacy) syntax, to see the new current version see: Activity Diagram (new).

Actividades simples

Simple Action

Puedes usar (*) para el punto de inicio y de final en un diagrama de actividades.

En algunos casos, quizás quieras usar (*top) para forzar a que el punto de inicio se ubique en la parte superior del diagrama.

Utilice --> para las flechas.

@startuml

(*) --> "First Activity"
"First Activity" --> (*)

@enduml

You can use (*) for the starting point and ending point of the activity diagram.

In some occasion, you may want to use (*top) to force the starting point to be at the top of the diagram.

Use --> for arrows.

@startuml

(*) --> "First Action"
"First Action" --> (*)

@enduml

Etiquetas en las flechas

Label on arrows

Por defecto, una flecha comienza en la última actividad usada.

Puedes colocar una etiqueta sobre una flecha usando corchetes, [ ] , justo después de la definición de la flecha.

@startuml

(*) --> "First Activity"
-->[You can put also labels] "Second Activity"
--> (*)

@enduml

By default, an arrow starts at the last used activity.

You can put a label on an arrow using brackets [ and ] just after the arrow definition.

@startuml

(*) --> "First Action"
-->[You can put also labels] "Second Action"
--> (*)

@enduml

Cambiando la dirección de la flecha

Changing arrow direction

Puedes usar -> para flechas horizontales. Es posible formzar la dirección de una flecha usando la siguiente sintaxis:
  • -down-> (default arrow)
  • -right-> or ->
  • -left->
  • -up->

@startuml

(*) -up-> "First Activity"
-right-> "Second Activity"
--> "Third Activity"
-left-> (*)

@enduml

You can use -> for horizontal arrows. It is possible to force arrow's direction using the following syntax:
  • -down-> (default arrow)
  • -right-> or ->
  • -left->
  • -up->

@startuml

(*) -up-> "First Action"
-right-> "Second Action"
--> "Third Action"
-left-> (*)

@enduml

Ramas (bifurcaciones)

Branches

Puedes usar las palabras reservadas if/then/else para definir ramas o caminos alternos.

@startuml
(*) --> "Initialization"

if "Some Test" then
  -->[true] "Some Activity"
  --> "Another activity"
  -right-> (*)
else
  ->[false] "Something else"
  -->[Ending process] (*)
endif

@enduml

Desafortunadamente, a veces tendrás que repetir la misma actividad en el texto del diagrama:

@startuml
(*)  --> "check input"
If "input is verbose" then
--> [Yes] "turn on verbosity"
--> "run command"
else
--> "run command"
Endif
-->(*)
@enduml

You can use if/then/else keywords to define branches.

@startuml
(*) --> "Initialization"

if "Some Test" then
  -->[true] "Some Action"
  --> "Another Action"
  -right-> (*)
else
  ->[false] "Something else"
  -->[Ending process] (*)
endif

@enduml

Unfortunately, you will have to sometimes repeat the same activity in the diagram text:

@startuml
(*)  --> "check input"
If "input is verbose" then
--> [Yes] "turn on verbosity"
--> "run command"
else
--> "run command"
Endif
-->(*)
@enduml

Más acerca de las Ramas

More on Branches

Por defecto, una rama es conectada con la última actividad definida, pero es posible sobrescribir esto y definir un enlace con la palabra reservada if .

También es posible anidar ramas.

@startuml

(*) --> if "Some Test" then

  -->[true] "activity 1"

  if "" then
    -> "activity 3" as a3
  else
    if "Other test" then
      -left-> "activity 5"
    else
      --> "activity 6"
    endif
  endif

else

  ->[false] "activity 2"

endif

a3 --> if "last test" then
  --> "activity 7"
else
  -> "activity 8"
endif

@enduml

By default, a branch is connected to the last defined activity, but it is possible to override this and to define a link with the if keywords.

It is also possible to nest branches.

@startuml

(*) --> if "Some Test" then

  -->[true] "action 1"

  if "" then
    -> "action 3" as a3
  else
    if "Other test" then
      -left-> "action 5"
    else
      --> "action 6"
    endif
  endif

else

  ->[false] "action 2"

endif

a3 --> if "last test" then
  --> "action 7"
else
  -> "action 8"
endif

@enduml

Sincronización

Synchronization

Puedes usar === code === para mostrar barras de sincronización.

@startuml

(*) --> ===B1===
--> "Parallel Activity 1"
--> ===B2===

===B1=== --> "Parallel Activity 2"
--> ===B2===

--> (*)

@enduml

You can use === code === to display synchronization bars.

@startuml

(*) --> ===B1===
--> "Parallel Action 1"
--> ===B2===

===B1=== --> "Parallel Action 2"
--> ===B2===

--> (*)

@enduml

Descripción de actividades de gran contenido

Long action description

Cuando declaras actividades, puedes abarcar la descripción del texto, en varias líneas. También puedes añadir \n en la descripción.

También puedes colocar una pequeña cantidad de código en la actividad, con la palabra reservada as . Este código puede usarse más adelante en la descripción del diagrama.

@startuml
(*) -left-> "this <size:20>activity</size>
is <b>very</b> <color:red>long2</color>
and defined on several lines
that contains many <i>text</i>" as A1

-up-> "Another activity\n on several lines"

A1 --> "Short activity <img:sourceforge.jpg>"
@enduml

WARNING
 This translation need to be updated. 
WARNING

When you declare activities, you can span on several lines the description text. You can also add \n in the description.

You can also give a short code to the activity with the as keyword. This code can be used latter in the diagram description.

@startuml
(*) -left-> "this <size:20>action</size>
is <b>very</b> <color:red>long2</color>
and defined on several lines
that contains many <i>text</i>" as A1

-up-> "Another action\n on several lines"

A1 --> "Short action <img:sourceforge.jpg>"
@enduml

Notas

Notes

Puedes añadir notas sobre la actividad usando los comandos note left, note right, note top or note bottom, justo después de la descripción de la actividad a la quieres añadirle la nota.

Si quieres colocar una nota sobre el punto de inicio, define la nota al comienzo de la descripción del diagrama.

También puedes tener una nota de varias líneas, usando la palabra reservada endnote .

@startuml

(*) --> "Some Activity"
note right: This activity has to be defined
"Some Activity" --> (*)
note left
 This note is on
 several lines
end note

@enduml

You can add notes on a activity using the commands note left, note right, note top or note bottom, just after the description of the activity you want to note.

If you want to put a note on the starting point, define the note at the very beginning of the diagram description.

You can also have a note on several lines, using the endnote keywords.

@startuml

(*) --> "Some action"
note right: This action has to be defined
"Some action" --> (*)
note left
 This note is on
 several lines
end note

@enduml

Partición

Partition

Puedes definir una partición usando la palabra reservada partition y opcionalmente declarar un color de fondo para tu partición (Usando el nombre o código HTML del color)

Cuando declaras actividades, éstas son automáticamente colocadas en la última partición usada.

Puedes cerrar la partición usando una llave de cierre }.

@startuml

partition Conductor {
  (*) --> "Climbs on Platform"
  --> === S1 ===
  --> Bows
}

partition Audience #LightSkyBlue {
  === S1 === --> Applauds
}

partition Conductor {
  Bows --> === S2 ===
  --> WavesArmes
  Applauds --> === S2 ===
}

partition Orchestra #CCCCEE {
  WavesArmes --> Introduction
  --> "Play music"
}

@enduml

You can define a partition using the partition keyword, and optionally declare a background color for your partition (Using a html color code or name)

When you declare activities, they are automatically put in the last used partition.

You can close the partition definition using a closing bracket }.

@startuml

partition Conductor {
  (*) --> "Climbs on Platform"
  --> === S1 ===
  --> Bows
}

partition Audience #LightSkyBlue {
  === S1 === --> Applauds
}

partition Conductor {
  Bows --> === S2 ===
  --> WavesArmes
  Applauds --> === S2 ===
}

partition Orchestra #CCCCEE {
  WavesArmes --> Introduction
  --> "Play music"
}

@enduml

Personalización (Skinparam)

Skinparam

Puedes usar el comando skinparam para cambiar las fuentes y colores en el diagrama.

Puedes usar este comando : Puedes definir colores y fuentes específicas para actividades estereotipadas.

@startuml

skinparam backgroundColor #AAFFFF
skinparam activity {
  StartColor red
  BarColor SaddleBrown
  EndColor Silver
  BackgroundColor Peru
  BackgroundColor<< Begin >> Olive
  BorderColor Peru
  FontName Impact
}

(*) --> "Climbs on Platform" << Begin >>
--> === S1 ===
--> Bows
--> === S2 ===
--> WavesArmes
--> (*)

@enduml

You can use the skinparam command to change colors and fonts for the drawing.

You can use this command : You can define specific color and fonts for stereotyped activities.

@startuml

skinparam backgroundColor #AAFFFF
skinparam activity {
  StartColor red
  BarColor SaddleBrown
  EndColor Silver
  BackgroundColor Peru
  BackgroundColor<< Begin >> Olive
  BorderColor Peru
  FontName Impact
}

(*) --> "Climbs on Platform" << Begin >>
--> === S1 ===
--> Bows
--> === S2 ===
--> WavesArmes
--> (*)

@enduml

Octágono

Octagon

Puedes cambiar la forma de las actividades a un octágono usando el comando skinparam activityShape octagon .

@startuml
'Default is skinparam activityShape roundBox
skinparam activityShape octagon

(*) --> "First Activity"
"First Activity" --> (*)

@enduml

You can change the shape of activities to octagon using the skinparam activityShape octagon command.

@startuml
'Default is skinparam activityShape roundBox
skinparam activityShape octagon

(*) --> "First Action"
"First Action" --> (*)

@enduml

Ejemplo completo

Complete example

@startuml
title Servlet Container

(*) --> "ClickServlet.handleRequest()"
--> "new Page"

if "Page.onSecurityCheck" then
  ->[true] "Page.onInit()"

  if "isForward?" then
   ->[no] "Process controls"

   if "continue processing?" then
     -->[yes] ===RENDERING===
   else
     -->[no] ===REDIRECT_CHECK===
   endif

  else
   -->[yes] ===RENDERING===
  endif

  if "is Post?" then
    -->[yes] "Page.onPost()"
    --> "Page.onRender()" as render
    --> ===REDIRECT_CHECK===
  else
    -->[no] "Page.onGet()"
    --> render
  endif

else
  -->[false] ===REDIRECT_CHECK===
endif

if "Do redirect?" then
 ->[yes] "redirect request"
 --> ==BEFORE_DESTROY===
else
 if "Do Forward?" then
  -left->[yes] "Forward request"
  --> ==BEFORE_DESTROY===
 else
  -right->[no] "Render page template"
  --> ==BEFORE_DESTROY===
 endif
endif

--> "Page.onDestroy()"
-->(*)

@enduml

@startuml
title Servlet Container

(*) --> "ClickServlet.handleRequest()"
--> "new Page"

if "Page.onSecurityCheck" then
  ->[true] "Page.onInit()"

  if "isForward?" then
   ->[no] "Process controls"

   if "continue processing?" then
     -->[yes] ===RENDERING===
   else
     -->[no] ===REDIRECT_CHECK===
   endif

  else
   -->[yes] ===RENDERING===
  endif

  if "is Post?" then
    -->[yes] "Page.onPost()"
    --> "Page.onRender()" as render
    --> ===REDIRECT_CHECK===
  else
    -->[no] "Page.onGet()"
    --> render
  endif

else
  -->[false] ===REDIRECT_CHECK===
endif

if "Do redirect?" then
 ->[yes] "redirect request"
 --> ==BEFORE_DESTROY===
else
 if "Do Forward?" then
  -left->[yes] "Forward request"
  --> ==BEFORE_DESTROY===
 else
  -right->[no] "Render page template"
  --> ==BEFORE_DESTROY===
 endif
endif

--> "Page.onDestroy()"
-->(*)

@enduml


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.