Comprendiendo el Formato PlantUML

¿Qué es PlantUML?

PlantUML es una herramienta de código abierto que te permite crear diagramas a partir de descripciones en texto plano. En lugar de arrastrar cajas sobre un lienzo, escribes unas pocas líneas de sintaxis simple y PlantUML renderiza un diagrama profesional para ti. Este enfoque se conoce a menudo como "diagrama como código" o "texto a diagrama".

Un diagrama PlantUML mínimo tiene este aspecto: se abre con una etiqueta @start<tipo>, se describe la estructura en unas pocas líneas legibles y se cierra con @end<tipo>. La herramienta analiza este texto y produce un SVG, PNG o PDF — donde sea que lo renderices.

¿Por qué escribir diagramas como texto?

• Control de versiones — El texto plano genera diferencias (diffs) limpias en Git. Puedes rastrear cada cambio en un diagrama, revisarlo en un pull request y revertirlo si algo se rompe.
• Velocidad — Escribir [Tarea A] dura 5 días es más rápido que dibujar una barra en un lienzo y redimensionarla.
• Consistencia — El motor de renderizado aplica espaciado, fuentes y colores uniformes automáticamente. Tú te centras en el contenido, no en la maquetación.
• Portabilidad — Un archivo de texto .puml es diminuto, legible para humanos y se renderiza igual en todas partes.
• Automatización — Los diagramas pueden generarse programáticamente a partir de datos, integrarse en pipelines de CI y mantenerse sincronizados con el código.

Cómo GanttTool Utiliza PlantUML

GanttTool te ofrece un editor visual GUI — añades tareas, estableces duraciones, defines dependencias, eliges colores — pero entre bastidores todo lo que construyes se compila en código PlantUML. Ese código se envía luego a un servidor de renderizado que lo convierte en un diagrama SVG mostrado en tu navegador.

El proceso de renderizado

La ruta API en /api/kroki actúa como un proxy entre tu navegador y los servidores de renderizado. Funciona en dos etapas:

• Principal: servidor PlantUML.com — El código PlantUML se comprime con Deflate (nivel 9) y se codifica usando la variante base-64 personalizada de PlantUML. La cadena resultante se añade a https://www.plantuml.com/plantuml/svg/~1{encoded} como una solicitud GET. Un tiempo de espera de 3 segundos protege contra respuestas lentas.
• Respaldo: servidor Kroki.io — Si PlantUML.com falla o expira, el texto PlantUML sin procesar se envía como POST en text/plain a https://kroki.io/plantuml/svg con un tiempo de espera de 5 segundos. Kroki es una pasarela de renderizado de código abierto que soporta muchos formatos de diagrama.

Cualquiera que sea el servidor que responda primero con un SVG válido, esa imagen se devuelve al navegador con una cabecera Content-Type: image/svg+xml y se renderiza en línea. Nunca tienes que pensar en la codificación o el mecanismo de respaldo — simplemente funciona.

Sintaxis de Diagramas de Gantt en PlantUML

Cada diagrama de Gantt en PlantUML se envuelve en las etiquetas @startgantt / @endgantt. Dentro, describes tu proyecto en un estilo natural y legible.

Estructura básica de tareas

@startgantt
' Título del proyecto y escala
title Proyecto de Rediseño Web
Project starts 2026-07-01
printscale weekly

' Separador de fase
-- Descubrimiento --

' Tareas regulares: [Nombre] dura N días
[Recopilación de requisitos] lasts 5 days
[Análisis de competencia] lasts 3 days

-- Diseño --

[Wireframes] lasts 7 days
[Diseño visual] lasts 10 days
[Diseño visual] starts at [Wireframes]'s end

-- Desarrollo --

[Desarrollo frontend] lasts 14 days
[Desarrollo frontend] starts at [Diseño visual]'s end
[Integración backend] lasts 10 days
[Integración backend] starts at [Desarrollo frontend]'s end

@endgantt

Hitos

Los hitos tienen duración cero y aparecen como un marcador de diamante en la línea de tiempo. Se definen con happens at en lugar de lasts.

@startgantt
Project starts 2026-07-01

[Desarrollo] lasts 14 days and is colored in CornflowerBlue
[Pruebas QA] lasts 5 days and is colored in LightGreen
[Pruebas QA] starts at [Desarrollo]'s end

' Hito — ocurre al final de una tarea específica
[Lanzamiento v1.0] happens at [Pruebas QA]'s end

' Porcentaje de completitud
[Desarrollo] is 70% completed

@endgantt

Separadores de fase y configuración del proyecto

Envuelve los nombres de sección entre guiones dobles (-- Nombre de fase --) para insertar una fila separadora. Combínalo con la configuración global del proyecto para un control total.

@startgantt
title Lanzamiento de Producto Q3
Project starts 2026-07-01
printscale weekly zoom 2
saturday are closed
sunday are closed
today is colored in Lavender

-- Planificación --
[Reunión de inicio] lasts 1 day
[Definición del alcance] lasts 3 days
[Definición del alcance] starts at [Reunión de inicio]'s end

-- Construcción --
[Sprint de ingeniería 1] lasts 10 days
[Sprint de ingeniería 1] starts at [Definición del alcance]'s end
[Sprint de ingeniería 2] lasts 10 days
[Sprint de ingeniería 2] starts at [Sprint de ingeniería 1]'s end

-- Lanzamiento --
[Pruebas de humo] lasts 2 days
[Pruebas de humo] starts at [Sprint de ingeniería 2]'s end
[Puesta en producción] happens at [Pruebas de humo]'s end

@endgantt

Sintaxis clave de Gantt de un vistazo

PlantUML Más Allá de los Diagramas de Gantt

Gantt es solo uno de los más de una docena de tipos de diagramas que soporta PlantUML. La misma filosofía de texto plano — etiqueta de inicio, descripción, etiqueta de cierre — se aplica a todos ellos. Aquí tienes un recorrido por los tipos más utilizados.

@startuml
title Flujo de Inicio de Sesión

Navegador -> API: POST /login {email, password}
API -> Base de datos: SELECT user WHERE email=?
Base de datos --> API: registro de usuario
alt credenciales válidas
    API --> Navegador: 200 OK + token JWT
else inválidas
    API --> Navegador: 401 No autorizado
end
@enduml

@startuml
class Proyecto {
    +id: String
    +nombre: String
    +fechaInicio: Date
    +obtenerTareas(): Tarea[]
}

class Tarea {
    +id: String
    +nombre: String
    +duracion: Number
    +completar(): void
}

class Hito {
    +nombre: String
    +fecha: Date
}

Proyecto "1" o-- "muchas" Tarea
Proyecto "1" o-- "muchos" Hito
Tarea <|-- Hito
@enduml

Más tipos de diagramas PlantUML

Aquí tienes un ejemplo rápido de un mapa mental en PlantUML para ilustrar cómo los diagramas no Gantt siguen la misma filosofía de texto primero:

@startmindmap
* Planificación del Proyecto
** Alcance
*** Requisitos
*** Entregables
** Calendario
*** Diagrama de Gantt
*** Hitos
** Equipo
*** Roles
*** Recursos
** Riesgos
*** Plan de mitigación
@endmindmap

Prueba PlantUML en Línea

No necesitas instalar nada para empezar a experimentar con PlantUML. El ecosistema cuenta con excelentes renderizadores en línea gratuitos:

Comienza a Crear Diagramas de Gantt

GanttTool te da el poder de PlantUML sin necesidad de escribir una sola línea de código. Usa el editor visual para construir el cronograma de tu proyecto y deja que la aplicación gestione la sintaxis PlantUML y el renderizado del diagrama automáticamente.

• Añade tareas, hitos y separadores de fase con un solo clic.
• Establece duraciones, dependencias, colores y porcentajes de completitud visualmente.
• Inspecciona el código PlantUML generado en cualquier momento — cópialo y reutilízalo donde quieras.
• Exporta como SVG o copia al portapapeles como PNG para presentaciones y documentos.
• Describe tu proyecto en lenguaje natural y deja que el asistente de IA genere un borrador completo de Gantt.