PlantUML: Crear diagramas con texto

¿Te ha pasado que intentas explicar un sistema, un proceso o una arquitectura… y terminas con un garabato en una pizarra? 🤯 Lo entiendes tú, quizás algunos colegas… pero al día siguiente ya nadie sabe qué significaba esa flecha rara o ese rectángulo sin nombre.

Ahí es donde entra PlantUML: una forma de crear diagramas a partir de texto. Sí, texto. Sin abrir software pesado, sin arrastrar cajitas con el mouse, sin complicaciones para alinear flechas.

PlantUML convierte líneas de texto como estas:

@startuml
Pedro -> Marco: Hola Marco, ¿cómo estás?
Marco --> Pedro: ¡Todo bien, gracias!
@enduml

Y nos genera un diagrama de secuencia claro y ordenado.

¿Cómo usar PlantUML?

PlantUML tiene un servidor público que convierte el código en imágenes (.png o .svg) usando una URL codificada.

Primero, ingresa a PlantUML Online Server. Y escribe el código dentro de la caja de texto y se obtiene el siguiente resultado:

¿Por qué usar PlantUML?

• Claridad: los diagramas son consistentes, sin importar quién los dibuje.
• Ahorro de tiempo: escribir unas líneas de texto es más rápido que pelear con flechas en software de diseño.
• Colaboración real: como es texto, puedes trabajar con el control de versiones y compartirlo, pues al usar git diff puedes revisar cambios.
• Escalabilidad: sirve tanto para un mapa mental personal como para documentar una arquitectura corporativa.

¿Qué se puede hacer con PlantUML?

Aquí viene lo bueno: PlantUML no es solo para “diagramitas bonitos”. Es como un cuchillo suizo para documentar sistemas.

1. Diagramas UML (los clásicos)

• Clases (ideal para programadores orientados a objetos).
• Secuencia (explicar flujos de mensajes, APIs, procesos).
• Casos de uso (para conversaciones con el negocio).
• Componentes y despliegue (arquitectura de software).

Ejemplo de diagrama de clases:

@startuml
class Usuario {
  - nombre : String
  - email : String
  + autenticar()
}

class Administrador {
  + gestionarUsuarios()
}

Usuario <|-- Administrador
@enduml

Resultado:

2. Diagramas más allá de UML

PlantUML evolucionó y ya no se queda solo en UML. También puedes hacer:

• Diagramas de Gantt (planificación de proyectos).
• Diagramas de entidad-relación (ERD) (para bases de datos).
• Diagramas de arquitectura con C4 (ideal para sistemas en la nube).
• Mindmaps (para organizar ideas).
• ¡Hasta diagramas de estado, redes y flujos de trabajo!

3. Integraciones

Lo mejor es que PlantUML no vive aislado:

• Se integra con VSCode, IntelliJ, Eclipse.
• Funciona en Markdown (ej. con plugins en Obsidian, Typora o HackMD).
• Puedes usarlo en repos de GitHub/GitLab para documentar con diagramas versionables.
• Corre en servidores locales o en línea con el PlantUML Server.

Recuerda que puedes versionar tus diagramas como código, algo imposible con herramientas gráficas tradicionales.

Para integrar un servidor de PlantUML en VS Code, primero necesitas instalar la extensión PlantUML desde el Marketplace o desde la barra de extensiones:

Desmotración:

Un ejemplo más cercano (para inspirarte)

Imagina que trabajas en un equipo y quieres explicar cómo funciona tu sistema de login. En lugar de hacer un diagrama en un software de diseño tradicional, basta con escribir el siguiente código:

@startuml
actor Usuario
Usuario -> Frontend: Ingresa credenciales
Frontend -> Backend: Enviar credenciales
Backend -> DB: Validar usuario
DB --> Backend: OK
Backend --> Frontend: Token JWT
Frontend --> Usuario: Acceso concedido
@enduml

Como resutado, obtienes un diagrama de secuencia que tu equipo entiende sin preguntar.