04. Manual de Uso de Mermaid
Capítulo 4: Diagramas de Clases y Entidad-Relación (ER)
En los capítulos anteriores cubrimos los flujos de procesos y las interacciones temporales entre sistemas. En esta entrega nos enfocaremos en el modelado de datos y arquitectura orientada a objetos, utilizando los diagramas de clases (classDiagram) y los diagramas Entidad-Relación (erDiagram).
1. Diagramas de Clases (classDiagram)
Los diagramas de clases son fundamentales en la programación orientada a objetos para representar la estructura del sistema, sus atributos, métodos y las relaciones entre entidades.
Definición de clases, atributos y métodos
Puedes definir el contenido de una clase dentro de un bloque con llaves { } o de forma explícita mediante la palabra clave class:
classDiagram
class Usuario {
+String nombre
+String email
-String passwordHash
#Boolean esAdmin
+autenticar(password) Boolean
-encriptarPassword() String
}
classDiagram
class Usuario {
+String nombre
+String email
-String passwordHash
#Boolean esAdmin
+autenticar(password) Boolean
-encriptarPassword() String
}
Modificadores de visibilidad
Mermaid utiliza prefijos estándar para definir el nivel de acceso a los miembros de una clase:
+Público (Public)-Privado (Private)#Protegido (Protected)~Paquete / Interno (Package / Internal)
Tipos de miembros y anotaciones
Puedes indicar métodos abstractos, estáticos o genéricos mediante prefijos o anotaciones:
- Método estático: Añade un asterisco
*al final (+obtenerInstancia()*). - Método abstracto: Añade una arroba
*o sufijo*según el diseño (+procesarPago()*). - Anotaciones: Utiliza
<<interface>>,<<abstract>>,<<service>>o<<enum>>para clasificar entidades.
classDiagram
class Autenticable {
<<interface>>
+login(usuario, pass)* Boolean
+logout()* Void
}
class EstadoCuenta {
<<enum>>
ACTIVO
SUSPENDIDO
INACTIVO
}
classDiagram
class Autenticable{
Autenticable : login(usuario, pass) Boolean
Autenticable : logout() Void
}
class EstadoCuenta {
EstadoCuenta : ACTIVO
EstadoCuenta : SUSPENDIDO
EstadoCuenta : INACTIVO
}
Relaciones entre clases
Las conexiones definen cómo interactúan las clases entre sí. La dirección de la flecha determina el sentido de la relación:
| Sintaxis | Estilo de línea | Cabezal / Significado |
|---|---|---|
| `< | --` | Sólida |
*-- |
Sólida | Composición (Composition) |
o-- |
Sólida | Agregación (Aggregation) |
--> |
Sólida | Asociación (Association) |
..> |
Punteada | Dependencia (Dependency) |
| `.. | >` | Punteada |
classDiagram
Vehiculo <|-- Automovil : Hereda de
Automovil *-- Motor : Compuesto por
Automovil o-- Rueda : Contiene
ProcesadorPago ..> Transaccion : Depende de
ServicioUsuario ..|> Autenticable : Implementa
classDiagram
Vehiculo <|-- Automovil : Hereda de
Automovil *-- Motor : Compuesto por
Automovil o-- Rueda : Contiene
ProcesadorPago ..> Transaccion : Depende de
ServicioUsuario ..|> Autenticable : Implementa
2. Diagramas Entidad-Relación (erDiagram)
Para el diseño y documentación de bases de datos relacionales, Mermaid ofrece la sintaxis erDiagram, enfocada en tablas, claves y cardinalidades de base de datos.
Definición de entidades y atributos
Las entidades representan las tablas de la base de datos. Dentro de cada entidad se especifican los campos, tipos de datos y restricciones como claves primarias (PK) o foráneas (FK):
erDiagram
USUARIOS {
int id PK
string nombre
string email
string password_hash
datetime fecha_registro
}
PEDIDOS {
int id PK
int usuario_id FK
decimal total
string estado
}
erDiagram
USUARIOS {
int id PK
string nombre
string email
string password_hash
datetime fecha_registro
}
PEDIDOS {
int id PK
int usuario_id FK
decimal total
string estado
}
Sintaxis de Cardinalidad
Las relaciones entre tablas se definen mediante conectores que representan la cardinalidad en ambos extremos de la línea:
| Extremo Izquierdo | Extremo Derecho | Significado |
|---|---|---|
|| |
|| |
Uno a Uno (Exactamente uno) |
|| |
\o| |
Uno a Uno (Cero u uno) |
|| |
}| |
Uno a Muchos (Uno o más) |
|| |
}o |
Uno a Muchos (Cero o más) |
}o |
}o |
Muchos a Muchos (Cero o más) |
Sintaxis general: ENTIDAD1 CONECTOR ENTIDAD2 : "descripción_relación"
erDiagram
CLIENTE ||--o{ PEDIDO : "realiza"
PEDIDO ||--|{ DETALLE_PEDIDO : "contiene"
PRODUCTO ||--o{ DETALLE_PEDIDO : "incluido_en"
erDiagram
CLIENTE ||--o{ PEDIDO : "realiza"
PEDIDO ||--|{ DETALLE_PEDIDO : "contiene"
PRODUCTO ||--o{ DETALLE_PEDIDO : "incluido_en"
3. Ejemplo Complejo: Sistema de Comercio Electrónico (E-Commerce)
A continuación, combinamos el diseño relacional de un sistema e-commerce completo utilizando un diagramas ER avanzado:
erDiagram
USUARIO ||--o| PERFIL : "tiene"
USUARIO ||--o{ PEDIDO : "realiza"
USUARIO ||--o{ DIRECCION : "registra"
CATEGORIA ||--o{ PRODUCTO : "clasifica"
PRODUCTO ||--o{ DETALLE_PEDIDO : "aparece_en"
PEDIDO ||--|{ DETALLE_PEDIDO : "compuesto_por"
PEDIDO ||--|| PAGO : "genera"
USUARIO {
int id PK
string email
string password_hash
boolean activo
}
PERFIL {
int id PK
int usuario_id FK
string nombre
string telefono
}
DIRECCION {
int id PK
int usuario_id FK
string calle
string ciudad
string codigo_postal
}
PRODUCTO {
int id PK
int categoria_id FK
string sku
string nombre
decimal precio
int stock
}
PEDIDO {
int id PK
int usuario_id FK
datetime fecha_creacion
string estado
decimal total
}
DETALLE_PEDIDO {
int id PK
int pedido_id FK
int producto_id FK
int cantidad
decimal precio_unitario
}
PAGO {
int id PK
int pedido_id FK
string metodo_pago
string estado_transaccion
datetime fecha_pago
}
erDiagram
USUARIO ||--o| PERFIL : "tiene"
USUARIO ||--o{ PEDIDO : "realiza"
USUARIO ||--o{ DIRECCION : "registra"
CATEGORIA ||--o{ PRODUCTO : "clasifica"
PRODUCTO ||--o{ DETALLE_PEDIDO : "aparece_en"
PEDIDO ||--|{ DETALLE_PEDIDO : "compuesto_por"
PEDIDO ||--|| PAGO : "genera"
USUARIO {
int id PK
string email
string password_hash
boolean activo
}
PERFIL {
int id PK
int usuario_id FK
string nombre
string telefono
}
DIRECCION {
int id PK
int usuario_id FK
string calle
string ciudad
string codigo_postal
}
PRODUCTO {
int id PK
int categoria_id FK
string sku
string nombre
decimal precio
int stock
}
PEDIDO {
int id PK
int usuario_id FK
datetime fecha_creacion
string estado
decimal total
}
DETALLE_PEDIDO {
int id PK
int pedido_id FK
int producto_id FK
int cantidad
decimal precio_unitario
}
PAGO {
int id PK
int pedido_id FK
string metodo_pago
string estado_transaccion
datetime fecha_pago
}
Compilación desde Debian
Para exportar un diagrama de entidad-relación extenso a un archivo SVG vectorial manteniendo la nitidez de la tipografía y líneas en Debian:
mmdc -i modelo_er.mmd -o modelo_er.svg -t neutral
Resumen del Capítulo
- Diagramas de clases (
classDiagram): Permiten modelar código orientado a objetos, definiendo visibilidad (+,-,#), métodos, atributos y relaciones de herencia (<|--) o composición (*--). - Diagramas Entidad-Relación (
erDiagram): Ideales para esquemas de bases de datos relacionales, utilizando restricciones (PK,FK) y conectores de cardinalidad (||--o{).
