Creador de diagramas de clases con Mermaid
Crea diagramas de clases arrastrando formas en un lienzo o escribiendo código Mermaid, y TryMermaid mantiene ambos sincronizados. Empieza con el ejemplo de abajo y luego exporta PNG o SVG o comparte un enlace.
Updated · Editable on the visual canvas
Ejemplo de diagrama de clases
Rendering preview…
classDiagram
class Animal {
+String nombre
+int edad
+hacerSonido() void
}
class Perro {
+buscar() void
}
class Gato {
+ronronear() void
}
Animal <|-- Perro
Animal <|-- Gato¿Qué es un diagrama de clases?
Un diagrama de clases es un diagrama UML que muestra las clases de un sistema, sus atributos y métodos, y las relaciones entre ellas, como la herencia y la composición. En Mermaid, un diagrama de clases empieza con la palabra clave classDiagram.
Cuándo usar un diagrama de clases
- Diseñar un modelo de dominio antes de programar
- Documentar código existente para quien se incorpora al equipo
- Mostrar jerarquías de herencia e interfaces
- Planificar una refactorización
Cómo crear un diagrama de clases en Mermaid
- Paso 1
Abre el editor
Abre TryMermaid con el ejemplo de esta página, o empieza un diagrama nuevo con classDiagram en la primera línea.
- Paso 2
Define las clases
Escribe class Pedido y enumera sus miembros entre llaves. Antepón + para público, - para privado, # para protegido o ~ para paquete.
- Paso 3
Añade relaciones
Conecta las clases con flechas como Animal <|-- Perro para la herencia, Pedido *-- Linea para la composición o Cliente --> Pedido para una asociación.
- Paso 4
Exporta o comparte
Revisa la vista previa y exporta el diagrama como PNG o SVG, o copia un enlace para compartir.
Sintaxis de diagrama de clases: chuleta
| Elemento | Sintaxis | Qué hace |
|---|---|---|
| Atributo | +String nombre | Campo público con tipo |
| Método | +total() float | Método con tipo de retorno |
| Herencia | Madre <|-- Hija | La hija extiende a la madre |
| Composición | Todo *-- Parte | La parte no existe sola |
| Agregación | Grupo o-- Miembro | La parte puede existir sola |
| Asociación | A --> B | Una clase usa otra |
| Dependencia | A ..> B | Uso más débil y temporal |
| Realización | Forma <|.. Circulo | La clase implementa la interfaz |
| Cardinalidad | A "1" --> "*" B | Cuántos hay a cada lado |
| Anotación | <<interface>> Forma | Etiqueta de estereotipo |
Preguntas frecuentes sobre diagrama de clases
¿Puedo editar diagramas de clases en el lienzo visual?
Sí. En TryMermaid los diagramas de clases se editan en el lienzo de arrastrar y soltar: renombra una clase con doble clic, arrastra para conectar dos clases y cada cambio se escribe como código Mermaid.
¿La sintaxis de clases de Mermaid sigue UML?
Sigue la notación UML de diagramas de clases en los casos habituales: marcas de visibilidad, atributos, métodos con tipo de retorno, anotaciones como <<interface>> y las flechas de relación estándar. Está pensado para documentar, no para generar código.
¿Cómo indico que una clase implementa una interfaz?
Marca la interfaz con la anotación <<interface>> y conéctala con una flecha de realización, por ejemplo Forma <|.. Circulo. La línea punteada con triángulo hueco apunta a la interfaz.