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