Generador de diagramas de clases
Escriba código classDiagram con clases, miembros y relaciones y vea el diagrama UML al instante.
Procesado localmente en tu navegador/ Tus datos se quedan en tu navegador.
¿Qué es Generador de diagramas de clases?
Un diagrama de clases UML documenta la estructura de un modelo orientado a objetos: las clases con sus atributos y métodos, y las relaciones entre ellas, como herencia, composición, agregación y asociación con multiplicidad.
Esta herramienta renderiza código Mermaid classDiagram; el ejemplo ya muestra un árbol de herencia y una asociación con etiqueta. La opción de dirección (arriba-abajo, izquierda-derecha, abajo-arriba, derecha-izquierda) inserta o sustituye de forma segura la instrucción "direction" de su código, y la opción de tema cambia los colores. Los errores de sintaxis se indican con la línea y el elemento esperado.
¿Cómo funciona?
- Edite el código classDiagram: defina cada clase con un bloque { } y un miembro por línea.
- Añada relaciones como "Animal <|-- Dog" u "Owner \"1\" --> \"*\" Animal : owns".
- Elija la dirección del diseño y un tema.
- Exporte el diagrama como SVG o PNG para documentos de diseño y presentaciones.
Casos de uso habituales
- Documentar el modelo de dominio de un servicio en un documento de diseño.
- Explicar una jerarquía de herencia o un patrón de diseño al equipo.
- Esbozar clases antes de programar y mantener después el código Mermaid en el repositorio.
- Preparar figuras UML para un trabajo académico o un artículo técnico.
Ejemplos
Prueba esta entrada en la herramienta de arriba:
classDiagram
direction TB
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+fetch() void
}
class Cat {
+climb() void
}
class Owner {
+String name
+adopt(Animal pet) void
}
Animal <|-- Dog
Animal <|-- Cat
Owner "1" --> "*" Animal : ownsPrivacidad
Generador de diagramas de clases se ejecuta por completo en tu navegador. El texto o los archivos que proporcionas se procesan en tu dispositivo y no se suben, registran ni almacenan en nuestros servidores.
Limitaciones
Esta herramienta necesita código Mermaid classDiagram; no hay un atajo de esquema simple para las clases. Mermaid implementa un subconjunto práctico de UML y no comprueba que su modelo sea semánticamente correcto.
Preguntas frecuentes
¿Qué flechas de relación hay disponibles?
<|-- herencia, *-- composición, o-- agregación, --> asociación, -- enlace, ..> dependencia, ..|> realización y .. enlace discontinuo. Añada etiquetas tras dos puntos y multiplicidades entre comillas.
¿Cómo indico la visibilidad?
Anteponga + a los miembros públicos, - a los privados, # a los protegidos y ~ a los de paquete. Añada () para que un miembro sea un método, por ejemplo +makeSound() void.
¿Qué cambia la opción de dirección?
Fija la línea "direction" dentro de classDiagram (TB, BT, LR o RL). Si su código no tiene ninguna, se añade justo después de la palabra clave classDiagram.
Herramientas relacionadas
Editor Mermaid en vivo
Un editor Mermaid libre: escriba el diagrama como código y obtenga una vista renderizada en vivo que puede exportar.
Markdown y diagramas
Generador de diagramas ER
Describa sus tablas, claves y relaciones como código Mermaid erDiagram y vea el diagrama ER al instante.
Markdown y diagramas
Generador de diagramas de estados
Liste las transiciones entre estados y obtenga un diagrama de máquina de estados con los eventos sobre las flechas.
Markdown y diagramas
Generador de diagramas de secuencia
Escriba un mensaje por línea y vea quién habla con quién, en orden, como diagrama de secuencia.
Markdown y diagramas
JSON a TypeScript
Pegue un ejemplo de JSON y obtenga declaraciones TypeScript listas para usar que describen su forma.
JSON y datos
Generador de diagramas de flujo
Describa un proceso con una cadena de pasos por línea y obtenga un diagrama de flujo junto con el código Mermaid que lo genera.
Markdown y diagramas