Guía de sintaxis de gráfico de Gantt de Mermaid.js

¿Qué es un gráfico de Gantt?

Un gráfico de Ganttes una herramienta de visualización de gestión de proyectos utilizada para representar cronogramas de proyectos, duraciones de tareas y hitos de ruta crítica a lo largo de una línea de tiempo horizontal. Al representar paquetes de trabajo como barras y dependencias estructurales como flujos secuenciales, permite a los equipos rastrear el progreso, identificar cuellos de botella potenciales y comunicar fechas límite de forma efectiva.

Con Mermaid.js, defines tu cronograma de proyecto utilizando una sintaxis declarativa basada en texto. El motor calcula automáticamente los desplazamientos relativos de las barras, maneja la escala del eje de cuadrícula basada en fechas y representa porcentajes de completitud, lo que te permite generar mapas de ruta de proyectos profesionales directamente dentro de tu documentación.

Guía de sintaxis principal: Elementos y construcciones

Para diseñar un cronograma de proyecto válido y completamente ejecutable en Mermaid, debes dominar la configuración de la línea de tiempo, las declaraciones de tareas, el agrupamiento de secciones y los marcadores de hitos.

1. Inicialización de la línea de tiempo de Gantt

Inicializas un lienzo de Gantt en la primera línea utilizando la palabra clave ganttpalabra clave. Cada gráfico de Gantt requiere un título, una definición de formato de fecha y una fecha de inicio específica para anclar la cuadrícula de la línea de tiempo.

gantt
    título Cronograma del Proyecto Alpha
    dateFormat YYYY-MM-DD
    axisFormat %Y-%m-%d
    excluye fines de semana

2. Definición de tareas y duraciones

Las tareas se definen por su estado (activo, terminado o crit), una etiqueta de visualización, un ID interno y una duración temporal. Puedes especificar una duración utilizando días (d), horas (h), o fechas específicas de inicio/fin.

• terminado: Paquete de trabajo completado.
• activo: Trabajo actual, en progreso.
• crit: Tarea de ruta crítica (se representa con un color de resaltado distinto).

gantt
    sección Planificación
    Descubrimiento inicial :terminado, des1, 2026-06-01, 5d
    Recopilación de requisitos :activo, des2, después de des1, 7d

3. Implementación de hitos y dependencias

Los hitos son puntos de duración cero que marcan logros importantes del proyecto. Las dependencias se establecen utilizando el ID de la tarea, asegurando que las barras visuales se alineen correctamente cuando finalice una tarea anterior.

gantt
    sección Lanzamiento
    Lanzamiento Beta :hitos, m1, 2026-07-15, 0d
    Prueba Final :crítico, qa1, después de m1, 10d

Mejores prácticas para los cronogramas de proyectos

• Use nombres descriptivos para las secciones: Use la secciónpalabra clave para agrupar sus tareas en fases lógicas del proyecto (por ejemplo, Desarrollo, Pruebas, Implementación). Esto crea una cuadrícula verticalmente segmentada que es mucho más fácil de leer que una lista larga única.
• Aproveche la palabra clave ‘después’: En lugar de calcular manualmente las fechas, use la después [id_tarea]sintaxis. Esto garantiza que si la fecha de inicio del proyecto cambia, todo su cronograma se actualice automáticamente sin edición manual.
• Excluya los días no laborables: Si su proyecto sigue una semana laboral estándar, incluya la excluye fines de semanadirectiva. Esto mantiene su cronograma realista y evita predicciones irreales de trabajo durante los fines de semana.

Ejemplos reales de gráficos Gantt de Mermaid

Ejemplo 1: Ruta de migración de infraestructura de software

Este plano funcional modela un proyecto de migración en múltiples etapas hacia la nube, utilizando secciones para dividir la planificación de arquitectura de la implementación y las pruebas.

gantt
    título Ruta de migración de infraestructura en la nube
    formatoFecha YYYY-MM-DD
    formatoEje %m-%d
    excluye fines de semana

    sección Arquitectura
    Diseño en la nube   :completado, a1, 2026-06-01, 10d
    Auditoría de seguridad :activo, a2, después de a1, 5d

    sección Migración
    Transferencia de datos  :crítico, m1, después de a2, 15d
    Reimplementación de aplicación  :m2, después de m1, 8d

    sección Hitos
    Puesta en producción :hitos, m3, después de m2, 0d

Desglose de sintaxis: Este gráfico separa claramente la planificación, la ejecución y los hitos del proyecto. Al etiquetar la tarea `Transferencia de datos` como crítico, recibe un resaltado distintivo, atrayendo la atención del espectador hacia la fase de mayor riesgo de la migración.