Diagrama de clases
El diagrama de clases es el principal bloque de construcción del modelado orientado a objetos. Se usa para el modelado conceptual general de la estructura de una aplicación, así como para el modelado detallado que convierte el modelo en código de programación. El diagrama de clases también puede usarse para el modelado de datos. Las clases del diagrama de clases representan tanto los elementos e interacciones principales de la aplicación como las clases que hay que programar.
Copiar
Insertar
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly
can swim
can dive
can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
Sintaxis
Clase
UML ofrece mecanismos para representar los miembros de una clase, como propiedades y métodos, y su información adicional. Una instancia individual de una clase contiene tres partes:
- La parte superior contiene el nombre de la clase. Se imprime en negrita y centrado, con la primera letra en mayúscula. También puede incluir un texto de comentario opcional que describe la naturaleza de la clase.
- La parte central contiene las propiedades de la clase. Están alineadas a la izquierda y con la primera letra en minúscula.
- La parte inferior contiene las operaciones que puede ejecutar la clase. También están alineadas a la izquierda y con la primera letra en minúscula.
Copiar
Insertar
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
Definir una clase
Hay dos formas de definir una clase
- Usar explícitamente la sintaxis class (como class Animal), lo que define la clase Animal.
- Mediante una relación, que define a la vez dos clases y la relación entre ellas (como Vehicle <|-- Car).
Copiar
Insertar
classDiagram
class Animal
Vehicle <|-- Car
Convención de nombres: el nombre de la clase solo puede estar formado por caracteres alfanuméricos (incluido unicode), guion bajo (_) y guion medio (-).
Etiqueta de clase
Si necesitas proporcionar una etiqueta para la clase, puedes usar la siguiente sintaxis:
Copiar
Insertar
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
También puedes usar comillas invertidas (``) para escapar caracteres especiales de la etiqueta:
Copiar
Insertar
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
Definir los miembros de la clase
UML ofrece mecanismos para representar los miembros de una clase (como propiedades y métodos) y su información adicional.
Mermaid distingue entre propiedades y funciones o métodos según la presencia de paréntesis (). Los que llevan () se consideran funciones o métodos, y el resto se consideran propiedades.
Hay dos formas de definir los miembros de una clase; independientemente de la sintaxis que uses para definirlos, el resultado es el mismo. Las dos formas distintas son:
1. Usar dos puntos (:) seguidos del nombre del miembro para asociar un miembro de la clase; resulta útil para definir un miembro a la vez. Por ejemplo:
Copiar
Insertar
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
2. Usar llaves {} para asociar los miembros de la clase, agrupándolos dentro de las llaves. Adecuado para definir varios miembros a la vez. Por ejemplo:
Copiar
Insertar
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
Tipo de retorno
Puedes especificar el tipo de dato que devolverá al final de la definición del método o función. Nota: debe haber un espacio entre el último ')' y el tipo de retorno. Un ejemplo:
Copiar
Insertar
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
Tipo genérico
El tipo genérico puede representarse como parte de la definición de una clase y también puede usarse en miembros de clase o en el tipo de retorno. Para representar un elemento como tipo genérico, encierra el tipo entre virgulillas (~). Se admiten declaraciones de tipos anidados, como List<List<int>>, pero actualmente no se admiten tipos genéricos que contengan comas, como List<List<K, V>>.
Copiar
Insertar
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
Visibilidad
Para describir la visibilidad de una propiedad o método/función, puedes usar un símbolo opcional delante del nombre del miembro:
- + público
- - privado
- # protegido
- ~ interno
Definir relaciones
Relación es un término general que abarca los tipos específicos de conexión lógica que se encuentran en los diagramas de clases y de objetos.
Copiar
Insertar
[classA][Arrow][ClassB]
UML为类定义了八种不同类型的关系：
| Tipo | Descripción |
|---|---|
| <|-- | Herencia |
| *-- | Composición |
| o-- | Agregación |
| --> | Asociación |
| -- | Enlace (relleno) |
| ..> | Dependencia |
| ..|> | Implementación |
| .. | Enlace (discontinuo) |
Copiar
Insertar
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
Podemos usar etiquetas para describir la naturaleza de la relación entre dos clases. Además, la flecha también puede usarse en sentido inverso:
Copiar
Insertar
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
Etiqueta de relación
Puedes añadir texto de etiqueta a la relación:
Copiar
Insertar
[classA][Arrow][ClassB]:LabelText
Copiar
Insertar
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
Relación bidireccional
Una relación bidireccional puede representar lógicamente una asociación N:M:
Copiar
Insertar
classDiagram
Animal <|--|> Zebra
语法如下：
Copiar
Insertar
[Relation Type][Link][Relation Type]
其中 Relation Type 是以下之一：
| Tipo | Descripción |
|---|---|
| <| | Herencia |
| * | Composición |
| o | Agregación |
| > | Asociación |
| < | Asociación |
| |> | Implementación |
El enlace es uno de los siguientes:
| Tipo | Descripción |
|---|---|
| -- | Línea continua |
| .. | Línea discontinua |
Interfaz tipo piruleta
También se puede asignar a una clase un tipo de relación especial, que define para la clase una interfaz tipo piruleta. La interfaz tipo piruleta se define con la siguiente sintaxis:
- bar ()-- foo
- foo --() bar
La interfaz con piruleta (bar) se conecta a la clase (foo).
Nota: cada interfaz definida es única, con el fin de no compartirse entre clases y no permitir que varias conexiones apunten a ella.
Copiar
Insertar
classDiagram
bar ()-- foo
Copiar
Insertar
classDiagram
class Class01 {
int amount
draw()
}
Class01 --() bar
Class02 --() bar
foo ()-- Class01
Definir espacios de nombres
El espacio de nombres agrupa clases.
Copiar
Insertar
classDiagram
namespace BaseShapes {
class Triangle
class Rectangle {
double width
double height
}
}
Cardinalidad/multiplicidad de la relación
La multiplicidad o cardinalidad en un diagrama de clases representa la cantidad de instancias de una clase que pueden asociarse con las instancias de otra clase. Por ejemplo, cada empresa tiene uno o varios empleados, no puede ser cero, mientras que cada empleado trabaja actualmente en cero o una empresa.
El símbolo de multiplicidad se coloca cerca del final de la asociación.
Las distintas opciones de cardinalidad son:
- 1 solo 1
- 0..1 0 o 1
- 1..* 1 o más
- * 0 o 1 o más
- n n (donde n>1)
- 0..n 0 hasta n (donde n>1)
- 1..n 1 hasta n (donde n>1)
La cardinalidad puede definirse fácilmente encerrando la opción de texto entre comillas dobles "" delante o detrás de la flecha dada. Por ejemplo:
Copiar
Insertar
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
Copiar
Insertar
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
Anotación de la clase
Puedes anotar una clase con marcadores para aportar metadatos adicionales sobre ella. Esto permite indicar con más claridad la naturaleza de la clase. Algunas anotaciones comunes incluyen:
- <<Interface>> representa una clase de interfaz
- <<Abstract>> representa una clase abstracta
- <<Service>> representa una clase de servicio
- <<Enumeration>> representa una enumeración
La anotación se define entre << al principio y >> al final. Hay tres formas de añadir una anotación a una clase; el resultado de las tres es el mismo:
- En línea con la definición de la clase
Copiar
Insertar
classDiagram
class Shape <<interface>>
En una línea aparte después de definir la clase:
Copiar
Insertar
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
- En la estructura anidada de la definición de la clase:
Copiar
Insertar
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
Comentario
Puedes introducir comentarios en el diagrama de clases; el editor los ignorará. El comentario debe ocupar una línea propia y empezar con doble signo de porcentaje (%%). Todo el texto hasta la línea siguiente se considerará comentario, incluida cualquier sintaxis del diagrama de clases.
Copiar
Insertar
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
Establecer la dirección del gráfico
Puedes usar una sentencia de dirección para establecer la dirección de renderizado del diagrama de clases:
Copiar
Insertar
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
Interacción
Puedes vincular eventos de clic a los nodos. Un evento de clic puede activar una función de devolución de llamada de JavaScript o abrir un enlace que se cargará en una nueva pestaña del navegador. Nota: esta función está deshabilitada con securityLevel='strict' y habilitada con securityLevel='loose'.
Puedes definir estas acciones en una línea aparte después de todas las declaraciones de clase.
Copiar
Insertar
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
- action es link o callback, según el tipo de interacción que quieras invocar.
- className es el id del nodo asociado a la acción.
- reference puede ser un enlace URL o el nombre de una función de devolución de llamada.
- (Opcional) La información sobre herramientas es la cadena que se muestra cuando el ratón pasa por encima del elemento.
- La función de devolución de llamada se invocará con nodeId como parámetro.
Nota
Puedes añadir un comentario en el gráfico con note "line1 line2". Puedes añadir un comentario para una clase concreta con note for <CLASS NAME> "line1 line2".
Ejemplo
Copiar
Insertar
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
Enlace de URL:
Copiar
Insertar
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
Configuración
Recuadro de miembros
Puedes ocultar el recuadro de miembros vacío de un nodo de clase; esto se hace cambiando el valor hideEmptyMembersBox en la configuración del diagrama de clases.
Copiar
Insertar
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck
