Capítulo 5: Diagramas de Git (gitGraph) y Diagramas de Gantt

En el capítulo anterior exploramos la arquitectura orientada a objetos y el modelado de bases de datos. En esta quinta entrega abordaremos dos herramientas fundamentales para el trabajo diario en equipos de desarrollo y la dirección de operaciones: diagramas de Git (gitGraph) para visualizar flujos de trabajo en control de versiones y diagramas de Gantt (gantt) para la planificación y seguimiento de proyectos.

---

1. Diagramas de Git (gitGraph)

El diagrama de Git en Mermaid permite documentar estrategias de ramificación (branching strategies) como GitFlow, Trunk-Based Development o GitHub Flow de forma clara y declarativa.

Operaciones básicas: Commits, Ramas y Merges

Un diagrama de Git comienza con la directiva gitGraph: y ejecuta comandos en el orden cronológico en que ocurren en el repositorio.

• commit: Registra un punto en la historia. Puede incluir un id (id: "v1.0"), un tipo o un tag.
• branch: Crea una nueva rama y conmuta a ella.
• checkout / switch: Cambia de rama activa.
• merge: Combina una rama dentro de la rama activa actual.
• cherry-pick: Aplica un commit específico desde otra rama.

gitGraph
    commit id: "Inicial"
    branch feature
    checkout feature
    commit id: "Nueva funcion"
    commit id: "Tests"
    checkout main
    merge feature id: "Merge Feature"
    commit id: "Release"

  

gitGraph
    commit id: "Inicial"
    branch feature
    checkout feature
    commit id: "Nueva funcion"
    commit id: "Tests"
    checkout main
    merge feature id: "Merge Feature"
    commit id: "Release"

Tipos de Commits y Propiedades

Puedes personalizar el propósito visual de los commits especificando el atributo type:

• NORMAL (por defecto): Círculo estándar.
• REVERSE: Resalta cambios revertidos (icono con cruz).
• HIGHLIGHT: Destaca commits clave como entregas o hotfixes (círculo relleno).

gitGraph
    commit id: "Base"
    commit id: "Fix menor" type: NORMAL
    commit id: "Cambio critico" type: HIGHLIGHT
    commit type: REVERSE id: "Revertir error"

  

gitGraph
    commit id: "Base"
    commit id: "Fix menor" type: NORMAL
    commit id: "Cambio critico" type: HIGHLIGHT
    commit type: REVERSE id: "Revertir error"

---

2. Diagramas de Gantt (gantt)

Los diagramas de Gantt permiten visualizar cronogramas, dependencias entre tareas, hitos y distribución de la carga de trabajo a lo largo del tiempo.

Estructura general y configuración

Un bloque gantt requiere definir el formato de fecha (dateFormat) y la disposición de las secciones:

• dateFormat: Define la sintaxis de fecha de entrada (por ejemplo, YYYY-MM-DD).
• axisFormat: Formato de visualización en el eje de tiempo del gráfico (por ejemplo, %Y-%m-%d o %d/%m).
• title: Título principal del proyecto.
• section: Agrupador lógico de tareas.

Definición de Tareas y Estados

Cada tarea se declara indicando su nombre, estado (opcional), identificador (opcional), fecha inicial o dependencia, y duración/fecha final.

Estados de tareas:

• done: Tarea completada.
• active: Tarea en progreso.
• crit: Tarea en la ruta crítica (se resalta visualmente).
• milestone: Hito del proyecto (duración 0).

gantt
    title Cronograma de Desarrollo
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Planificación
        Diseño de arquitectura   :done,    des1, 2026-01-01, 2026-01-10
        Aprobación de cliente     :active,  des2, after des1, 3d

    section Desarrollo
        Módulo Backend            :crit, active, dev1, after des2, 10d
        Módulo Frontend           :dev2, after des2, 8d
        Lanzamiento Beta          :milestone, hito1, after dev1, 0d

  

gantt
    title Cronograma de Desarrollo
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Planificación
        Diseño de arquitectura   :done,    des1, 2026-01-01, 2026-01-10
        Aprobación de cliente     :active,  des2, after des1, 3d

    section Desarrollo
        Módulo Backend            :crit, active, dev1, after des2, 10d
        Módulo Frontend           :dev2, after des2, 8d
        Lanzamiento Beta          :milestone, hito1, after dev1, 0d

---

3. Ejemplos Prácticos Completos

Ejemplo 1: Flujo de Trabajo GitFlow Avanzado

El siguiente diagrama documenta una estrategia de ramas en producción con hotfixes, ramas de funcionalidad y merges cruzados:

gitGraph
    commit id: "v1.0.0" tag: "v1.0.0"
    branch develop
    checkout develop
    commit id: "Setup inicial"
    
    branch feature/auth
    checkout feature/auth
    commit id: "Modulo OAuth"
    commit id: "Tests Auth"
    
    checkout develop
    merge feature/auth id: "Merge Auth"
    
    checkout main
    branch hotfix/login-bug
    checkout hotfix/login-bug
    commit id: "Fix sesion" type: HIGHLIGHT
    
    checkout main
    merge hotfix/login-bug id: "v1.0.1" tag: "v1.0.1"
    
    checkout develop
    merge hotfix/login-bug id: "Sincronizar Hotfix"

  

gitGraph
    commit id: "v1.0.0" tag: "v1.0.0"
    branch develop
    checkout develop
    commit id: "Setup inicial"
    
    branch feature/auth
    checkout feature/auth
    commit id: "Modulo OAuth"
    commit id: "Tests Auth"
    
    checkout develop
    merge feature/auth id: "Merge Auth"
    
    checkout main
    branch hotfix/login-bug
    checkout hotfix/login-bug
    commit id: "Fix sesion" type: HIGHLIGHT
    
    checkout main
    merge hotfix/login-bug id: "v1.0.1" tag: "v1.0.1"
    
    checkout develop
    merge hotfix/login-bug id: "Sincronizar Hotfix"

Ejemplo 2: Plan de Proyecto de Software Completo

A continuación, un plan de trabajo estructurado por fases con ruta crítica e hitos:

gantt
    title Plan de Despliegue de Sistema ERP
    dateFormat YYYY-MM-DD
    axisFormat %d/%m

    section Fase 1: Análisis y Levantamiento
        Entrevistas de requerimientos :done, req1, 2026-03-01, 7d
        Modelado de Base de Datos    :done, req2, after req1, 5d
        Aprobación de Arquitectura    :milestone, hito1, after req2, 0d

    section Fase 2: Implementación Core
        Desarrollo de API REST        :crit, active, api1, after hito1, 14d
        Integración de Pasarela Pagos :active, pago1, after api1, 7d
        FrontEnd Dashboard            :front1, after hito1, 12d

    section Fase 3: Despliegue y QA
        Pruebas de Carga y Seguridad  :crit, qa1, after api1, 5d
        Despliegue en Producción      :milestone, hito2, after qa1, 0d

  

gantt
    title Plan de Despliegue de Sistema ERP
    dateFormat YYYY-MM-DD
    axisFormat %d/%m

    section Fase 1: Análisis y Levantamiento
        Entrevistas de requerimientos :done, req1, 2026-03-01, 7d
        Modelado de Base de Datos    :done, req2, after req1, 5d
        Aprobación de Arquitectura    :milestone, hito1, after req2, 0d

    section Fase 2: Implementación Core
        Desarrollo de API REST        :crit, active, api1, after hito1, 14d
        Integración de Pasarela Pagos :active, pago1, after api1, 7d
        FrontEnd Dashboard            :front1, after hito1, 12d

    section Fase 3: Despliegue y QA
        Pruebas de Carga y Seguridad  :crit, qa1, after api1, 5d
        Despliegue en Producción      :milestone, hito2, after qa1, 0d

Compilación desde Debian

Para renderizar un diagrama de Gantt extenso garantizando que el texto y las barras no se corten en la exportación:

mmdc -i proyecto_gantt.mmd -o proyecto_gantt.png -w 1600 -s 2

---

Resumen del Capítulo

1. Diagramas de Git (gitGraph): Permiten documentar la historia de un repositorio mediante operaciones sencillas (commit, branch, merge, cherry-pick).
2. Diagramas de Gantt (gantt): Organizan el tiempo del proyecto mediante tareas, fases (section), dependencias (after) e hitos (milestone), destacando la ruta crítica (crit).

Etiquetas

• Manuales