Diagrama de clases
Modela tu dominio y la estructura de tus objetos
¿Qué es un Diagrama de clases?
Un diagrama de clases describe los tipos de un sistema — sus atributos, métodos y relaciones: herencia, composición, asociación. Es el clásico de UML para el modelado de dominios y el diseño de código.
Los diagramas de clases rinden mejor en las revisiones de diseño y en el onboarding, cuando alguien que acaba de llegar necesita la forma del dominio antes que el código. Muestran qué existe, qué posee cada cosa y de qué depende — el acoplamiento que un árbol de carpetas esconde. No dicen nada del tiempo de ejecución: ni orden de llamadas, ni ciclo de vida, ni volúmenes. Y el que hoy es correcto deja de serlo tras la siguiente refactorización si nadie lo mantiene. Los tipos compartidos se redibujan en cada diagrama que los necesita.
Ejemplo en directo
classDiagram
class Order {
+String id
+Date createdAt
+total() Money
}
class Customer {
+String name
+String email
}
class OrderLine {
+int quantity
}
Customer "1" --> "*" Order
Order "1" *-- "*" OrderLineCuándo usarlo
Errores frecuentes
Las flechas de herencia apuntan al padre
Animal <|-- Dog significa que Dog extiende Animal: el triángulo hueco se apoya en la clase base. Escribir Dog <|-- Animal se analiza sin error e invierte tu jerarquía en silencio, algo que casi nadie detecta en revisión. Lee primero el extremo del triángulo: siempre nombra al padre.
Los ángulos se tragan los genéricos
Un miembro escrito +List<Item> lines se renderiza como +List lines, porque el navegador trata <Item> como una etiqueta HTML. Mermaid usa virgulillas: +List~Item~ lines, y class Cart~Item~ para una clase genérica.
Sin paréntesis, los métodos son campos
+save se dibuja en el compartimento de atributos y +save() en el de métodos. Lo deciden los paréntesis, no el tipo de retorno. El diagrama se renderiza igualmente, así que el fallo sobrevive a la revisión: pon los paréntesis aunque el método no reciba argumentos.
Sintaxis básica
classDiagram
class Animal {
+String name
+makeSound() void
}
Animal <|-- Dog : inheritanceclass Invoice { -String id +total(Money vat) Money }Antepón a cada miembro + público, - privado, # protegido o ~ de paquete. Un tipo escrito tras los paréntesis es el tipo de retorno; sin paréntesis, la línea es un atributo.
Customer "1" o-- "0..*" Invoice : ownsLas cardinalidades van entre comillas a cada lado y la etiqueta tras los dos puntos nombra la relación. Léela en el sentido en que está escrita la línea.
class Gateway { <<interface>> }Un estereotipo entre dobles ángulos marca una interfaz, una clase abstracta, una enumeración o un servicio. Se renderiza en su propia línea, encima del nombre de la clase.
namespace Billing { class Invoice }Un namespace agrupa clases en un recuadro con título, lo que mantiene legible un diagrama grande y refleja los límites de paquete o módulo que ya usa el código.
Preguntas sobre este diagrama
¿Qué relaciones admite Mermaid?
Herencia (<|--), composición (*--), agregación (o--), asociación (-->), dependencia (..>) y realización (..|>), cada una con cardinalidades y etiquetas opcionales.
¿Puedo generar un diagrama de clases a partir de código?
Pega tus clases o describe tu dominio y la IA extrae entidades, atributos y relaciones en un diagrama de clases limpio.
¿Se renderizan los diagramas de clases en Notion o Confluence?
Notion renderiza Mermaid dentro de un bloque de código. Confluence no tiene soporte nativo: usa una macro del Marketplace o pega un SVG exportado, que se mantiene nítido a cualquier zoom y puedes sustituir en su sitio cuando el modelo cambie.
¿Puedo controlar dónde coloca Mermaid las clases?
No directamente. La disposición es automática; tus únicas palancas son direction LR o TB, agrupar clases en namespaces y reordenar las declaraciones de relaciones. Para una disposición fija, exporta el SVG y ajústalo en un editor vectorial.
¿Puedo enlazar una clase con su fichero fuente?
Sí. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" convierte la caja en un enlace y añade un tooltip. El ancla vive dentro del SVG, así que sobrevive a una exportación SVG y se pierde en cuanto exportas un PNG.
¿Puede Mermaid mostrar miembros abstractos o estáticos?
Sí. Un asterisco final marca el miembro como abstracto y un signo de dólar final lo marca como estático — +area()* float, +unit()$ Shape. Se renderizan como espera UML: cursiva para lo abstracto, subrayado para lo estático. Una clase entera se marca con el estereotipo <<abstract>> en su cuerpo.
¿Diagrama de clases u otro tipo de diagrama?
¿Diagrama de clases o diagrama entidad-relación?
Las mismas cajas, distinto público. El diagrama entidad-relación describe tablas, columnas y claves tal como existen en la base de datos; el de clases describe tipos, comportamiento y herencia tal como existen en el código. Si las cajas tienen métodos, es un diagrama de clases.
¿Diagrama de clases o diagrama de estados?
Modelan el mismo objeto desde dos ángulos. El de clases dice qué es un pedido: sus campos, sus relaciones, sus métodos. El de estados dice por qué pasa: borrador, pagado, enviado, y los eventos intermedios. Un dominio rico necesita los dos.
Crea tu Diagrama de clases ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio