Crea diagramas de clases UML con sintaxis Mermaid. Clases, interfaces, herencia, composición y modificadores de visibilidad. Vista previa en vivo.
Cargando editor...
La vista previa del diagrama aparecerá aquí...
Los diagramas de clases muestran la estructura de un sistema mapeando clases, sus atributos y métodos, y las relaciones entre ellas. Es el diagrama UML estándar para documentar diseños orientados a objetos, bibliotecas cliente de API y modelos de dominio. Mermaid los procesa a partir de una descripción textual que se lee como una versión simplificada del código mismo.
classDiagram
class UserService {
-UserRepository repo
-Logger logger
+getUser(id) User
+createUser(data) User
+deleteUser(id) void
-validate(data) bool
}
Cada línea dentro del bloque de clase define un miembro. El formato es visibilidad nombre tipo para campos y visibilidad nombre(parámetros) tipoRetorno para métodos.
Las relaciones se dibujan entre clases usando sintaxis de flecha:
classDiagram
Animal <|-- Dog : extends
Animal <|-- Cat : extends
Dog *-- Leg : has
Owner o-- Pet : owns
Kennel --> Dog : houses
Animal ..> Food : depends on
| Sintaxis | Tipo | Significado |
|---|---|---|
| `A < | – B` | Herencia |
| `A < | .. B` | Realización |
A *-- B |
Composición | B es parte de A, ciclo de vida dependiente |
A o-- B |
Agregación | B pertenece a A, puede existir solo |
A --> B |
Asociación | A referencia B |
A ..> B |
Dependencia | A usa B temporalmente |
Marca clases como abstractas, interfaces, enumeraciones o cualquier estereotipo personalizado:
classDiagram
class Shape {
<<abstract>>
+área() double
+perimeter() double
}
class Drawable {
<<interface>>
+draw(canvas) void
}
Usa tilde en lugar de angulares:
classDiagram
class Repository~T~ {
+findById(id) T
+save(entity T) T
}
Para documentar como estas clases interactuan en tiempo de ejecución, usa la herramienta Diagrama de Secuencia Mermaid.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.