Guia de Sintaxe do Gráfico de Gantt do Mermaid.js

O que é um Gráfico de Gantt?

Um Gráfico de Gantté uma ferramenta de visualização de gestão de projetos usada para mapear cronogramas de projetos, durações de tarefas e marcos da rota crítica ao longo de uma linha do tempo horizontal. Representando pacotes de trabalho como barras e dependências estruturais como fluxos sequenciais, permite que equipes acompanhem o progresso, identifiquem gargalos potenciais e comuniquem prazos de forma eficaz.

Com Mermaid.js, você define o cronograma do seu projeto usando uma sintaxe declarativa baseada em texto. O motor calcula automaticamente os deslocamentos relativos das barras, gerencia a escala do eixo de grade baseada em datas e renderiza porcentagens de conclusão, permitindo que você gere mapas de rota profissionais de projetos diretamente dentro de sua documentação.

Guia de Sintaxe Principal: Elementos e Construções

Para criar um cronograma de projeto válido e totalmente executável no Mermaid, você deve dominar a configuração da linha do tempo, as declarações de tarefas, o agrupamento de seções e os marcadores de marcos.

1. Inicializando a Linha do Tempo do Gráfico de Gantt

Você inicializa uma tela de Gráfico de Gantt na primeira linha usando a palavra-chave ganttpalavra-chave. Todo gráfico de Gantt exige um título, uma definição de formato de data e uma data de início específica para fixar a grade da linha do tempo.

gantt
    título Cronograma do Projeto Alpha
    dateFormat AAAA-MM-DD
    axisFormat %Y-%m-%d
    exclui fins de semana

2. Definindo Tarefas e Durações

As tarefas são definidas por seu status (ativo, concluído ou crit), uma etiqueta de exibição, um ID interno e uma duração temporal. Você pode especificar uma duração usando dias (d), horas (h), ou datas específicas de início/fim.

• concluído: Pacote de trabalho concluído.
• ativo: Trabalho atual em andamento.
• crit: Tarefa da rota crítica (aparece com uma cor de destaque distinta).

gantt
    seção Planejamento
    Descoberta Inicial :concluído, des1, 2026-06-01, 5d
    Coleta de Requisitos :ativo, des2, após des1, 7d

3. Implementando Marcos e Dependências

Os marcos são pontos de duração zero que marcam conquistas significativas do projeto. As dependências são estabelecidas usando o ID da tarefa, garantindo que as barras visuais estejam alinhadas corretamente quando uma tarefa predecessora for concluída.

gantt
    seção Lançamento
    Lançamento Beta :marco, m1, 2026-07-15, 0d
    QA Final :crítico, qa1, após m1, 10d

Melhores Práticas para Cronogramas de Projetos

• Use nomes descritivos para as seções: Use a seçãopalavra-chave para agrupar suas tarefas em fases lógicas do projeto (por exemplo, Desenvolvimento, Testes, Implantação). Isso cria uma grade verticalmente segmentada que é muito mais fácil de ler do que uma única lista longa.
• Aproveite a palavra-chave ‘após’: Em vez de calcular manualmente as datas, use a após [id_tarefa]sintaxe. Isso garante que, se a data de início do projeto mudar, todo o seu cronograma será atualizado automaticamente sem edição manual.
• Exclua os dias não úteis: Se o seu projeto segue uma semana comercial padrão, inclua a exclui fins de semanadiretiva. Isso mantém seu cronograma realista e evita previsões irreais de trabalho nos fins de semana.

Exemplos Reais de Gráficos de Gantt do Mermaid

Exemplo 1: Roteiro de Migração da Infraestrutura de Software

Este plano funcional modela um projeto de migração em múltiplas etapas para a nuvem, utilizando seções para dividir o planejamento da arquitetura da implantação e testes.

gantt
    título Roteiro de Migração da Infraestrutura em Nuvem
    dateFormat AAAA-MM-DD
    axisFormat %m-%d
    exclui fins de semana

    seção Arquitetura
    Projeto em Nuvem   :concluído, a1, 2026-06-01, 10d
    Auditoria de Segurança :ativo, a2, após a1, 5d

    seção Migração
    Transferência de Dados  :crítico, m1, após a2, 15d
    Reimplantação do Aplicativo  :m2, após m1, 8d

    seção Marcos
    Lançamento em Produção :marco, m3, após m2, 0d

Análise da sintaxe: Este gráfico separa claramente o planejamento, a execução e os marcos do projeto. Ao marcar a tarefa `Transferência de Dados` como crítico, ela recebe um destaque distinto, atraindo a atenção do espectador para a fase mais de risco da migração.