sintesis

logo
Códigos disponibles en git

¿Por qué?

Herramientas CASE (computer aided software engineering)

  • para modelado de software con gestión de repositorios, trazabilidad, generación de informes, …​

    • Basadas en la edición (iconos, formularios, …​ con clicks de ratón) de cada elemento del diagrama y sus relaciones, responsabilizandose de la disposición de los elementos en la visualización!!!

StarUML

EnterpriseArchitecture

MagicDraw

starUML

enterpriseArchitecture

magicDraw

¿Qué?

  • PlantUML, generador de diagramas gráficas a partir de la descripción textual de cada elemento del diagrama y sus relaciones, ignorando la disposición!!!

logo

  • Diagramas estructurales

    • Diagramas de Clases

    • Diagramas de Objetos

    • Diagramas de Despliegue

    • Diagramas de Componentes

  • Diagramas de Paquetes

  • Diagramas de comportamiento

    • Diagramas de Casos de uso

    • Diagramas de Actividades

    • Diagramas de Estados

    • Diagramas de Secuencia

    • Diagramas de Colaboración, NO!!!

    • Diagramas de Tiempo

plantUML

plantText

Diagrama de Gantt

Wireframe graphical interface

Network diagram

Entity Relationship diagram

GanttDiagram

Wireframe

NetworkDiagram

Entity

JSON data

Specification and Description Language

Mathematic with AsciiMath or JLaTeXMath notation

MindMap diagram

JSON

Actividades

Maths

MindMap

Archimate diagram

Work Breakdown Structure diagram

Ditaa diagram

YAML data

ArchimateDiagram

WorkBreakdown

Ditaa

YAML

¿Para qué?

Generación de documentación en HTML, PDF, …​ incluyendo texto en PlantUML

markdown

asciidoc

¿Cómo?

diagramaClasesClasificacion

Diagramas Estructurales

Diagrama de Clases

diagramaClase

Elementos

generalSintaxis
clasificador 
allow_mixing

class Clase
class ClaseLarga as "Clase con nombre\ncon espacios o muy largo"
abstract class ClaseAbstracta
interface Interfaz
enum Enumerado
annotation Anotacion
entity Entidad
boundary boundary
control control
clasificadoresEjemplo
clasificadoresEjemplo2
atributoSintaxis
metodoSintaxis
visibilidadSintaxis 
class Clase {

tipo atributo
atributoSinTipo
{static} atributoEstatico
- atributoPrivado
# atributoProtegido
~ atributoPaquete
+ atrobutoPublico

tipo metodo(tipo parametro) Exception
{static} metodoEstatico()
{abstract} metodoAbstracto()
-metodoPrivado()
#metodoProtegido()
~metodoPaquete()
+metodoPublico()

}
clasePorAmbito
cierreGrupoSintaxis

Relaciones

relacionSintaxis
extremoSintaxis
sintaxisConectorContinuo
sintaxisConectorDiscontinuo
sintaxisPosicion
sintaxisRol 
Base <|-down- Clase
Base <|.down. Clase
Todo *-down-> Clase
Todo o-down-> Clase
Usa .down.> Clase
Asocia -right-> Clase
Clase -right-> Asociada
Clase <|-down- Derivada
Clase <|.down. Derivada
Clase *-down-> Parte
Clase o-down-> Parte
Clase .down.> Usada
posicionamiento 
class Origen
class Destino

Origen "1..*" -right-> "7" Destino : rol >
diagramaRelacionDecorada

  • Asociación Calificada

class Comprador
class Vendedor
class CompraVenta

Comprador "0..*" - "1..*" Vendedor
(Comprador, Vendedor) .. CompraVenta
Comparador

Diagrama de Objetos

Elementos

object objeto
object "objeto largo" as objetoLargo
object ":Clase" as anonimo
object " " as undefined

object objetoConEstado {
  atributo1 = "valor"
  atributo2 = 123
}
Ejemplo84

Relaciones

object objeto1 {
  atributo = valor
}
object objeto2
object objeto3
object objeto4
object objeto5

objeto1 *-right-> objeto2 : parte
objeto1 o-right-> objeto3 : agregado
objeto1 -right-> objeto4 : asociado
objeto1 .right.> objeto5 : usado
Ejemplo140

Diagrama de Componentes

Elementos

component Componente
component "Compponente Largo" as ComponenteLargo
interface Interfaz
interface "Interfaz Larga" as InterfazLarga
Ejemplo37

Relaciones

Component Componente1
Component Componente2
Interface InterfazA
Interface InterfazB

InterfazA - Componente1
Componente1 ..> InterfazB
InterfazB - Componente2
Ejemplo39

Diagrama de Despliegue

Elementos

node nodo
Ejemplo46

Relaciones

node nodo1
node nodo2
nodo1 -- nodo2 : label
Ejemplo48 
node nodo1
node nodo2
node nodo3
node nodo4
node nodo5
nodo1 -0- nodo2
nodo1 -0)- nodo3
nodo1 -(0- nodo4
nodo1 -(0)- nodo5
Ejemplo50

Diagramas de Comportamiento

Diagrama de Actividad

Elementos

  • Actividades Secuenciales

start
:Activity;
:Large
Activity;
stop
Ejemplo65

  • Actividades Condicionales

start
if (condicion) then (cierto)
  :Action1;
  :Action2;
endif
stop
Ejemplo142 
start
if (condicion) then (cierto)
  :Action1;
  :Action2;
else (else)
  :Action3;
  :Action4;
endif
stop
Ejemplo143 
start
if (condition1) then (cierto)
  :Action1;
  :Action2;
elseif (condition2) then (cierto)
  :Action3;
  :Action4;
  stop
else (falso)
  :Action5;
  :Action6;
endif
stop
Ejemplo69

  • Actividades Iterativas

start

repeat
  :Action1;
  :Action2;
repeat while (condicion) is (cierto)

stop
Ejemplo70 
start

while (condicion) is (cierto)
  :Action1;
  :Action2;
endwhile (falso)

stop
Ejemplo71

Carriles

|Swimlane1|
start
:Action1;
|Swimlane2|
:Action2;
:Action3;
|Swimlane1|
:Action4;
stop
EjemploN76

Procesamiento paralelo

start

if (multiprocessor?) then (yes)
  fork
        :Treatment 1;
  fork again
        :Treatment 2;
  end fork
else (monoproc)
  :Treatment 1;
  :Treatment 2;
endif
Ejemplo72

Diagrama de Estados

Elementos y Relaciones

  • Un Estado Simple

state State1
State1 : commentary
state State2 <<choice>>
state State3

[*] --> State1
State1 -> State2 : accion1
State2 --> [*] : [condicion]
State2 --> State3 : [falso]
State3 --> [*] : accion2
Ejemplo86

Diagrama de Secuencia

Elementos y Relaciones

  • Elementos básicos

participant Participant1
participant Participant2
participant "Long\nparticipant" as Long

Participant1 -> Participant2: message1
Participant1 <-- Participant2: message2
Participant2 -> Long: message3
Long --> Participant2 : message4
Participant2 -> Participant2: long\nmessage
Participant1 <-- Participant2: message5
Ejemplo98

  • Declarando participantes

actor Actor
boundary Boundary
control Control
entity Entity
Actor -> Boundary : message
Boundary -> Control : message
Control -> Entity : message
Ejemplo99 
participant Last order 30
participant Middle order 20
participant First order 10
Ejemplo100

  • Activación y Destrucción de la Línea de vida

participant Participant1 as A
participant Participant2 as B
participant Participant3 as C

create B
A -> B: new
activate B

B -> C: message1
activate B
activate C

B --> C: delete
deactivate B
destroy C

B -> A: message2
deactivate B
Ejemplo116

  • Estructuras de mensajes

participant Participant1 as A
participant Participant2 as B
participant Participant3 as C

A -> B: message1

alt condition
        B -> A: message2

else else
        B -> A: message3
        loop condition
                A -> B: message4
        end

        ...delay of x seconds...
        A -> C : message5

end
Ejemplo111

  • Referencia

participant Participant1 as A
participant Participant2 as B

ref over A, B : diagram1

ref over B
  diagram2
  long
end ref
Ejemplo113

Diagrama de Colaboración

Elementos

Relaciones

Diagrama de Casos de Uso

usecase Usecase1
usecase (Long\nusecase) as A
Ejemplo51

Elementos

Actores

actor Actor
actor :Long\nactor: as A
Ejemplo52

Relaciones

actor Actor
actor :Secondary Actor:
usecase Usecase1
usecase Usecase2

Actor -> Usecase1
Actor ..> Usecase2 : <<Label>>

:Secondary Actor: --> Usecase2 : Long\nlabel
Ejemplo54

  • Extensión

actor Actor
actor Actor2
usecase Usecase
usecase Usecase2

Actor <|-- Actor2
Usecase <|-- Usecase2
Ejemplo55

Elementos Comunes

Paquetes

package Paquete {
class ClaseA
class ClaseB
}
X1 
package Paquete {
class ClaseA
class ClaseB
}
ClaseA -dir-> ClaseB
Ejemplo6

  • Espacios de nombre

    • En los paquetes, el nombre de una clase es el único identificador de esta clase. Quiere decir que no puedes tener dos clases con el mismo nombre en diferentes paquetes.

    • En este caso, deberías usar espacios de nombres en lugar de paquetes.

class ClaseC
namespace namespace1  {
.ClaseC <-- ClaseB
ClaseA o-- ClaseB
.ClaseC <- ClaseA
}
namespace namespace2 {
namespace1.ClaseB *- ClaseB
.ClaseC *-- ClaseB
namespace1.ClaseA o-- ClaseB
}
ClaseC <-- namespace3.ClaseB
Ejemplo29

Estereotipos

class Object << general >>
Ejemplo19

  • Personalización

skinparam interface {
  backgroundColor RosyBrown
  borderColor orange
}

skinparam component {
  FontSize 13
  BackgroundColor<<Apache>> Red
  BorderColor<<Apache>> #FF6655
  FontName Courier
  BorderColor black
  BackgroundColor gold
  ArrowFontName Impact
  ArrowColor #FF6655
  ArrowFontColor #777777
}

() "Data Access" as DA

DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - [Web Server] << Apache >>
Ejemplo44 
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>

node node1
node node2 <<shared node>>
database Production

skinparam component {
        backgroundColor<<static lib>> DarkKhaki
        backgroundColor<<shared lib>> Green
}

skinparam node {
        borderColor Green
        backgroundColor Yellow
        backgroundColor<<shared node>> Magenta
}
skinparam databaseBackgroundColor Aqua
Ejemplo45

  • Otros

    • Puedes añadir estereotipos mientras defines actores y casos de uso.

Actor << Human >>
:Main Database: as MySql << Application >>
(Start) << One Shot >>
(Use the application) as (Use) << Main >>

Actor -> (Start)
Actor --> (Use)

MySql --> (Use)
Ejemplo57

Notas

  • Además de las propias de PlantUML, también es posible usar algunas etiquetas HTML como:

    • <b>

    • <u>

    • <i>

    • <s>, <del>, <strike>

    • <font color="\#AAAAAA"> or <font color="colorName">

    • <color:\#AAAAAA> or <color:colorName>

    • <size:nn> to change font size

    • <img src="file"> or <img:file>: the file must be accessible by the filesystem

note as N2
<del>This</del> is a <color:#midnightblue>floating</color> note
end note
note as N1
This <size:18>note</size>
is connected
to <u>several</u>
===
* objects
<img:mano.png>
end note
ClaseA .. N1
ClaseC .. N1
class ClaseA
note left
<b>Left</b> note
end note
class ClaseB
note top
<i>Top</i> note
end note
class ClaseD
note bottom
<font color=mediumpurple>Bottom</font> note
end note
class ClaseC
note right
<u>Right</u> note
end note
ClaseA "0..*" - "1..*" ClaseB
ClaseB "1..*" - "0..*" ClaseD
(ClaseA,ClaseB) .. ClaseC
Ejemplo10

  • Notas en las diagramas de actividad

start
floating note right
floating

note
right
end note

floating note left
floating note left
end note

:Activity;
note right
Right note
end note

:Large
Activity;
note left
Left note
end note

stop
Ejemplo82

  • Notas en diagramas de estados

state "CompositeState" as State{
[*] --> State1

State1 --> State2
note "This is a floating note" as N1
note on link
transition note
end note


note left of State1
Left note
end note
}

note right of State
This is a note
on a composite state
end note
Ejemplo92

  • Notas en diagrama de secuencia

participant Participant1
participant Participant2

note left of Participant1
 Note
 left of Participant1.
end note

note right of Participant1
 Note right of Participant1.
end note

note over Participant1
 Note over Participant1.
end note

note over Participant1, Participant2
 Note over Participant2 and Participant1.
end note
Ejemplo138

  • Notas en diagramas de casos de uso

actor Actor
actor Actor2
usecase Usecase
usecase Usecase2

Actor -> Usecase
Actor --> Usecase2

Actor2 ---> Usecase2

note right of Actor2 : Note.

note right of Usecase2
  Long
  note
end note

note "Long\nnote" as N2
Usecase .. N2
N2 .. Usecase2
Ejemplo56

  • Cambiando el aspecto de las notas

participant Participant1
participant Participant2

note left of Participant1
 Note
 left of Participant1.
end note

note right of Participant1
 Note right of Participant1.
end note

note over Participant1
 Note over Participant1.
end note

note over Participant1, Participant2
 Note over Participant2 and Participant1.
end note
Ejemplo139

Formato

Agrupamiento

  • Agrupación de actividades

start
partition Initialization {
        :read config file;
        :init internal variable;
}
partition Running {
        :wait for user interaction;
        :print information;
}

stop
Ejemplo74

  • Espaciado en diagramas de secuencia

Participant1 -> Participant2: message 1
Participant2 --> Participant1: ok
|||
Participant1 -> Participant2: message 2
Participant2 --> Participant1: ok
||45||
Participant1 -> Participant2: message 3
Participant2 --> Participant1: ok
Ejemplo115

  • Entorno de participantes

box "Internal Service" #LightBlue
        participant Participant2
        participant Participant1
end box
participant Other

Participant2 -> Participant1 : message 1
Participant1 -> Other : message 2
Ejemplo132

Separadores

class Clase {
atributo1
metodo1()
..
atributo2
metodo2()
-- titulo3 --
atributo3
metodo3()
__
atributo4
metodo4()
== titulo4 ==
atributo5
metodo5()
}
claseCierreGrupo 
node node [
This is a <b>node
----
You can use separator
====
of different kind
\....
and style
]
Ejemplo47 
== Initialization ==

Participant1 -> Participant2: Message
Participant2 --> Participant1: Response message

== Repetition ==

Participant1 -> Participant2: Message
Participant1 <-- Participant2: Response message
Ejemplo112 
usecase UC1 as "You can use
several lines to define your usecase.
You can also use separators.
--
Several separators are possible.
==
And you can add titles:
..Conclusion..
This allows large description."
Ejemplo53

Posicionamiento

Direcciones, roles y cardinalidad

class ClaseA
class ClaseB
class ClaseC
class ClaseD
class ClaseE

ClaseA "1" .down-> "1..*" ClaseB : rol
ClaseA "1" -up-> "*" ClaseC : rol
ClaseA "1" -left-> "1" ClaseD : rol
ClaseA "1" -right-> "1..*" ClaseE : rol
relacionClasesEjemplo 
:Actor: -left-> (dummyLeft)
:Actor: -right-> (dummyRight)
:Actor: .up-> (dummyUp)
:Actor: -down-> (dummyDown)
Ejemplo60 
[*] -up-> First
First -right-> Second
Second -down-> Third
Third -left-> Last
Ejemplo91

Ocultación de clases y paquetes

package Paquete1 {
class ClaseA
class ClaseB
}

package Paquete2 {
class ClaseC
class ClaseD
}

ClaseA *-- ClaseB
ClaseC <-- ClaseA
Ejemplo28 
package Paquete1 {
class ClaseA
class ClaseB
}

package Paquete2 {
class ClaseC
class ClaseD
}

ClaseA *-- ClaseB
ClaseC <-- ClaseA

hide Paquete1
hide ClaseC
EjemploN29

Color

  • La paleta de los colores que reconoce PlantUML:

height32

  • Las clases y los paquetes pueden tener distintos colores, se indica con # seguido el color que queremos poner.

  • También puedes usar degradación de color en el fondo, con la siguiente sintaxis: dos nombres de colores separados por cualquier de los siguientes dependiendo de la dirección del degradado.

• |,
• /,
• \,
• o -
package Paquete #turquoise-lemonChiffon{
note left of ClaseA #lightskyblue
this is my
note on this class
end note

class ClaseA #mediumPurple
class ClaseB #mediumPurple/HotPink
}
ClaseA -[#midnightblue]right->  ClaseB
Ejemplo7

  • Diagramas de actividad

start
-[#midnightblue]->
#hotPink:Activity;
-[#maroon]->
#mediumPurple:Large Activity;
-[#darkGoldenRod]->
stop
Ejemplo80

  • También es posible cambiar el color de los carriles.

|#lightSkyBlue|Swimlane1|
start
:Action1;
|#mediumPurple|Swimlane2|
:Action2;
:Action3;
|Swimlane1|
:Action4;
stop
Ejemplo76

  • Diagramas de secuencia

actor Actor #mediumPurple
boundary Boundary #hotPink
control Control #darkGoldenRod
participant "Participant" as L #lightskyblue

Actor -> Boundary
Boundary -> Control
Control -> L
L -[#darkGoldenRod]-> Control
Control -[#darkGoldenRod]-> Boundary
Ejemplo104

  • Es posible agregar un color a dicha línea de vida.

participant Participant1 as A #lightskyblue
participant Participant2 as B #lightskyblue
participant Participant3 as C #lightskyblue

create B
A -> B: new
activate B #hotPink

B -> C: message1
activate B #darkGoldenRod
activate C #mediumPurple

B --> C: delete
deactivate B
destroy C

B -> A: message2
deactivate B
Ejemplo117

  • Tablas

start
:Here is the result
|= |= table |= header |
| a | table | row |
|<#FF8080> red |<#80FF80> green |<#8080FF> blue |
<#yellow>| b | table | row |;
Ejemplo33

Iconos

  • Lista con los iconos que se pueden usar:

    • se puede usar el sintaxis <ICON_NAME>

height32 
title: <size:20><&heart>Use of OpenIconic<&heart></size>

class Wifi
note left
Click on
end note
Ejemplo34

Definición y uso de sprites

  • En PlantUML, los sprites son monocromos y pueden tener 4, 8 o 16 niveles de gris. Para definirlo, se debe usar un dígito hexadecimal entre 0 y F por píxel. Luego ya se podría utilizar.

sprite $foo1 {
FFFFFFFFFFFFFFF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
F0123456789ABCF
FFFFFFFFFFFFFFF
}
Participant1 -> Participant2 : Testing <$foo1>
Ejemplo35

Tablas

skinparam titleFontSize 14
title
Example of simple table
|= |= table |= header |
| a | table | row |
| b | table | row |
end title
[*] --> State1
Ejemplo32

Estilos

Personalización de Skinparams

skinparam handwritten true

skinparam usecase {
BackgroundColor DarkSeaGreen
BorderColor DarkSlateGray

BackgroundColor<< Main >> YellowGreen
BorderColor<< Main >> YellowGreen

ArrowColor Olive
ActorBorderColor black
ActorFontName Courier

ActorBackgroundColor<< Human >> Gold
}

Actor << Human >>
:Main Database: as MySql << Application >>
(Start) << One Shot >>
(Use the application) as (Use) << Main >>

Actor -> (Start)
Actor --> (Use)

MySql --> (Use)
Ejemplo64

Sintesis

sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

logo

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM