¿Cómo crear diagramas de clases UML?

¿Cómo crear un diagrama de clases UML?

Respuesta corta: Para crear un diagrama de clases UML, abre una herramienta como draw.io, identifica las clases de tu sistema y escribe en cada una sus atributos y métodos con su visibilidad (+ pública, - privada, # protegida). Después dibuja las relaciones: la herencia con una línea continua y un triángulo hueco que apunta a la clase padre, la composición con un rombo relleno y la agregación con un rombo vacío. También puedes pedírselo a una IA en código Mermaid y revisar el resultado.

Un diagrama de clases es el diagrama más usado del lenguaje de modelado UML (Unified Modeling Language). Muestra las clases de un sistema orientado a objetos, sus atributos, sus métodos y cómo se relacionan entre sí. Sirve para pensar el diseño antes de programar, para explicárselo a tu equipo y, cada vez más, para darle contexto a una IA que va a escribir el código contigo.

Así se construye un diagrama de clases: primero las clases, luego sus atributos y métodos, después las relaciones. Al final, una IA lo convierte en código.

Crear un diagrama de clases UML paso a paso

Vamos a modelar una aplicación de venta de libros: una biblioteca con libros, vendedores y clientes. Usaremos draw.io, que es gratuito y funciona en el navegador sin crear cuenta. Si trabajas en VS Code, la extensión Draw.io Integration te deja editar el mismo diagrama dentro del editor.

1. Crea un diagrama en blanco

Entra en app.diagrams.net, elige dónde guardar el archivo (tu equipo, Google Drive o GitHub) y crea un diagrama en blanco. En el panel de formas de la izquierda, abre Más formas y activa la biblioteca UML: ahí tienes la caja de clase con sus tres compartimentos y todas las flechas que vas a necesitar.

2. Identifica las clases necesarias

Una clase es una plantilla que describe un tipo de objeto: qué datos guarda y qué sabe hacer. Para encontrarlas, busca los sustantivos importantes de tu problema. En nuestra biblioteca son estos:

1. Biblioteca: la clase principal, que contiene todos los libros de la aplicación.
2. Libro: un libro con sus características, como el título o el precio.
3. Persona: una clase abstracta con los datos comunes de vendedores y clientes. No se crean personas sueltas, solo vendedores o clientes.
4. Vendedor: hereda de Persona y añade lo que solo tiene un vendedor, como su comisión.
5. Cliente: también hereda de Persona y añade lo propio de un cliente, como su dirección.

3. Define los atributos y métodos

Cada clase se dibuja como una caja con tres partes: el nombre arriba, los atributos en el medio y los métodos abajo.

Delante de cada atributo y de cada método va un símbolo que indica quién puede usarlo:

Los atributos se escriben así:

- nombreAtributo: TipoDeDato

Y los métodos, así:

+ nombreMetodo(parametro: TipoDeDato): TipoQueDevuelve

Los colores no tienen ningún significado en UML. Puedes usarlos para agrupar clases, pero el diagrama tiene que entenderse igual en blanco y negro.

4. Establece las relaciones

El último paso es unir las clases con el tipo de flecha correcto:

En el ejemplo, Vendedor y Cliente heredan de Persona, así que se unen a ella con una línea continua y un triángulo hueco que apunta a Persona. La Biblioteca se une a las clases que contiene con un rombo, que siempre va pegado a la clase que contiene a las demás.

Estas son las seis relaciones que vas a usar, con su forma en el dibujo y en Mermaid:

Añade la multiplicidad en los extremos de la línea cuando importe cuántos objetos participan: 1, 0..1, * o 1..*. Por ejemplo, una biblioteca tiene 1..* libros.

El diagrama no es un dibujo que se hace una vez. Cuando empieces a programar aparecerán atributos y clases que no habías previsto: añádelos. Lo importante es que el diagrama siga contando la verdad sobre tu código.

Cómo crear un diagrama de clases con IA

Una IA no dibuja cajas en draw.io, pero escribe muy bien Mermaid, un lenguaje de texto que se convierte en diagrama. GitHub muestra los bloques Mermaid de cualquier archivo Markdown como un diagrama, y puedes pegarlos en mermaid.live para verlos y exportarlos a PNG o SVG. draw.io también puede insertar diagramas a partir de código Mermaid. Así se ve nuestra biblioteca escrita en Mermaid:

Estos tres prompts sirven en ChatGPT, Claude, Gemini o en un agente de tu editor como Cursor o GitHub Copilot. Cambia lo que va entre corchetes.

1. Para crear el diagrama desde cero:

Quiero el diagrama de clases UML de [describe tu aplicación
en 3 o 4 frases].
Dámelo en código Mermaid (classDiagram).
En cada clase pon atributos y métodos con su visibilidad
(+, -, #) y sus tipos.
Usa herencia, composición o agregación solo donde haga falta
y explícame en una línea por qué elegiste cada relación.
No inventes clases que no salgan de mi descripción.

2. Para sacar el diagrama de un código que ya existe:

Este es el código de mi proyecto en [Python / Java / TypeScript]:
[pega las clases]
Genera el diagrama de clases UML en Mermaid que lo representa
tal cual,
sin añadir ni mejorar nada.
Después dime qué relaciones has deducido y en qué línea
del código se ven.

3. Para pasar del diagrama al código:

Este es mi diagrama de clases en Mermaid:
[pega el diagrama]
Escribe las clases en [Python / Java / TypeScript]
respetando nombres,
tipos, visibilidad y relaciones. No añadas lógica de negocio:
solo constructores, atributos y métodos vacíos con un comentario.
Si algo del diagrama no se puede traducir tal cual, avísame.

Comprueba lo que hizo la IA

No des el diagrama por bueno sin revisarlo. Pégalo en mermaid.live y repasa estos cinco puntos:

1. Están todas las clases de tu descripción y ninguna que no pediste.
2. El triángulo de la herencia apunta a la clase padre, no a la hija.
3. El rombo está en la clase que contiene, no en la contenida.
4. Composición y agregación están bien elegidas: ¿la parte puede existir sin el todo?
5. Cada atributo y método tiene visibilidad y tipo.

Si Mermaid muestra un error de sintaxis, pídele a la IA que lo corrija pegando el mensaje completo.

Aplicaciones para crear diagramas de clases UML

Estas son las herramientas más usadas. Las dos primeras son gratuitas.

1. draw.io (diagrams.net): draw.io es gratuito y de código abierto. Trae las formas UML, funciona en el navegador y en escritorio, y guarda en tu equipo, Google Drive o GitHub.
2. Mermaid: escribes el diagrama como texto y se dibuja solo. Es la mejor opción para trabajar con IA y para guardar el diagrama junto al código en GitHub.
3. PlantUML: otro lenguaje de texto para diagramas UML, muy usado en documentación técnica y con extensiones para VS Code e IntelliJ.
4. Visual Paradigm: Visual Paradigm es una suite completa de modelado UML, con generación de código y versión gratuita para uso personal.
5. Lucidchart: Lucidchart es cómodo para equipos que editan el mismo diagrama a la vez. Tiene un plan gratuito con límites.

Errores frecuentes en los diagramas de clases

La flecha de herencia apunta al revés. El triángulo siempre va en la clase padre. Si lees la flecha en voz alta tiene que sonar bien: «Cliente es una Persona».

Confundir agregación y composición. Pregúntate si la parte puede vivir sin el todo. Si al borrar el pedido se borran sus líneas, es composición (rombo relleno). Si el vendedor sigue existiendo aunque cierre la tienda, es agregación (rombo vacío).

Atributos sin tipo o métodos sin visibilidad. nombre no dice lo mismo que - nombre: String. Sin tipo y sin visibilidad, quien lea el diagrama, o la IA que lo convierta en código, tendrá que adivinar.

Meter todo el sistema en un solo diagrama. Con más de 10 o 12 clases ya no se lee. Divide por módulos, como usuarios, catálogo o pagos, y haz un diagrama de cada uno.

Mermaid da Parse error o no dibuja nada. Suele ser un carácter raro en un nombre, una llave sin cerrar o una relación mal escrita. Usa nombres sin espacios ni tildes y revisa la línea que indica el error.

Del how-to al oficio. Diseñar clases, relaciones y responsabilidades es lo que hace un ingeniero antes de escribir código, y la IA multiplica lo que puedes construir cuando el diseño está claro. En la carrera de Ingeniería de IA de 4Geeks empiezas sin experiencia previa, aprendes Python y programación orientada a objetos y terminas construyendo agentes y sistemas RAG con proyectos basados en escenarios reales.

Guías relacionadas

• Instalar Git en Windows, macOS y Linux
• Clonar un repositorio de GitHub
• Ejemplos de expresiones regulares
• Regex para no coincidir