Diagrama de Gantt Mermaid

Sintaxe de Diagrama Gantt Mermaid

Diagramas Gantt traçam tarefas contra uma linha do tempo. Cada tarefa tem uma data de início (explícita ou relativa a outra tarefa), uma duração e, opcionalmente, um status e agrupamento por seção. Mermaid os renderiza como gráficos de barras horizontais com eixo de tempo, tornando direto documentar cronogramas de projeto, planos de sprint e cronogramas de migração em texto versionado.

Estrutura Básica

gantt
    title Nome do Projeto
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Fase 1
        Tarefa A :a1, 2024-01-01, 7d
        Tarefa B :after a1, 5d

    section Fase 2
        Tarefa C :after a1, 10d

Cada diagrama Gantt começa com gantt. title, dateFormat e axisFormat são opcionais mas recomendados. Tarefas são agrupadas sob cabeçalhos section.

Definição de Tarefa

Cada linha de tarefa tem este formato:

Nome tarefa :status, idTarefa, dataInicio, duração

Todos os campos exceto o nome da tarefa são opcionais, mas na prática você precisa de pelo menos um início (ou dependência) é uma duração.

Dependências

Dependências são a parte mais útil dos diagramas Gantt. Em vez de codificar datas, defina relacionamentos:

gantt
    dateFormat YYYY-MM-DD
    Design     :des, 2024-01-01, 5d
    Implement  :impl, after des, 10d
    Test       :test, after impl, 5d
    Deploy     :after test, 2d

Quando você altera a duração do Design, cada tarefa downstream se desloca automaticamente. É assim que se modelam caminhos críticos sem calcular datas manualmente.

Múltiplas dependências

    Integration :after backend frontend, 5d

Esta tarefa começa apenas depois que tanto backend quanto frontend estiverem concluídos.

Status de Tarefa

gantt
    dateFormat YYYY-MM-DD
    section Sprint 1
        Tarefa concluída  :done, t1, 2024-01-01, 3d
        Tarefa ativa      :active, t2, after t1, 5d
        Tarefa crítica    :crit, t3, after t2, 2d
        Tarefa futura     :t4, after t3, 4d

Combine status: :done, crit, idTarefa marca uma tarefa como concluída e crítica.

Seções

Seções agrupam tarefas relacionadas visualmente com um rótulo e bandas de fundo alternadas:

section Backend
    API endpoints  :api, 2024-01-01, 10d
    Database setup :db, 2024-01-01, 5d

section Frontend
    UI components  :ui, after api, 8d
    Integration    :int, after ui, 5d

Tarefas em seções diferentes ainda podem referenciar umas às outras com after.

Formatação de Data e Eixo

dateFormat YYYY-MM-DD          %% como você escreve datas nas definições de tarefa
axisFormat %b %d               %% como as datas são exibidas no eixo
tickInterval 1week             %% espaçamento entre ticks do eixo

Valores comuns de axisFormat:

Padrões Práticos

Plano de sprint

gantt
    title Sprint 12
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    section Stories
        User auth      :done, s1, 2024-03-04, 3d
        Profile page   :active, s2, after s1, 4d
        Settings       :s3, after s2, 3d
    section Tech debt
        Upgrade deps   :done, t1, 2024-03-04, 2d
        Fix flaky test :t2, after s2, 1d
    section Release
        QA             :qa, after s3, 2d
        Ship           :milestone, after qa, 0d

Cronograma de migração

O exemplo pré-carregado mostra uma migração de API com fases de planejamento, implementação e rollout, cadeias de dependência é um marco de migração de produção. Este padrão funciona para migrações de banco de dados, atualizações de infraestrutura e qualquer projeto em fases.

Para documentar as interações de API dentro deste cronograma, tente o Diagrama de Sequência Mermaid. Para o esquema de banco de dados sendo migrado, use o Diagrama ER Mermaid.