📅 Mermaid

Gráfico de Gantt

Planeie projetos numa linha temporal clara

O que é um Gráfico de Gantt?

Um gráfico de Gantt dispõe as tarefas num calendário com durações, dependências e marcos. É o padrão da gestão de projetos para mostrar quem faz o quê, quando, e o que depende de quê.

Os gráficos de Gantt aparecem em comités de acompanhamento e planos de release, onde a audiência quer datas e não lógica. Escritos em texto, ganham uma vantagem invulgar: o plano é revisto no mesmo pull request que o trabalho que descreve. A sua fraqueza é envelhecerem mal — um Gantt é uma fotografia de intenções, e nada no Mermaid o avisa de que deixou de corresponder à realidade há três semanas.

Exemplo em tempo real

Código Mermaid
gantt
    title Product Launch
    dateFormat YYYY-MM-DD
    section Design
      Wireframes       :a1, 2026-01-05, 10d
      UI design        :a2, after a1, 14d
    section Build
      Backend API      :b1, 2026-01-12, 21d
      Frontend         :b2, after a2, 18d
    section Launch
      Beta testing     :c1, after b2, 10d
      Go live          :milestone, after c1, 0d
Exemplo em tempo real
2026-01-112026-01-182026-01-252026-02-012026-02-082026-02-152026-02-22Wireframes Backend API UI design Frontend Beta testing Go live DesignBuildLaunchProduct Launch

Quando usar

Planear lançamentos de produto e calendários de releases
Comunicar roadmaps às partes interessadas
Acompanhar as fases de sprint ou de migração com as suas dependências

Erros frequentes

O dateFormat não corresponde às suas datas

Com dateFormat YYYY-MM-DD, uma tarefa que comece a 05/01/2026 não é rejeitada — é interpretada como outra data qualquer e o gráfico estica-se em silêncio por vários meses. Ponha os dois de acordo, ou declare antes dateFormat DD/MM/YYYY.

Dois pontos dentro do nome da tarefa

Tudo o que está antes dos primeiros dois pontos é o rótulo, por isso Phase 1: discovery :a1, 2026-01-05, 7d desenha uma tarefa chamada «Phase 1» e deita fora o resto do nome sem avisar. Use antes um travessão nos nomes das tarefas.

Reutilizar o id de uma tarefa

Os ids têm de ser únicos. Quando duas tarefas partilham um, o after resolve para a última declaração, e a tarefa dependente salta semanas para a frente sem erro nenhum. Prefixe os ids por secção — d1, b1, l1 — para os manter distintos.

Sintaxe básica

.mmd
gantt
    dateFormat YYYY-MM-DD
    section Phase 1
      Task A :a1, 2026-01-01, 7d
      Task B :after a1, 5d
  • dateFormat YYYY-MM-DD axisFormat %d/%m

    O dateFormat diz ao Mermaid como ler as datas que escreve; o axisFormat controla como elas são impressas ao longo do eixo. Os dois são independentes e muitas vezes diferentes.

  • Backend API :active, b1, 2026-01-12, 21d

    Uma linha de tarefa é rótulo, depois etiquetas, id, início e duração. As etiquetas são done, active, crit e milestone; o início pode ser uma data ou after b1.

  • excludes weekends todayMarker stroke-width:4px,stroke:#e11

    O excludes retira fins de semana ou datas nomeadas do calendário de trabalho. O todayMarker muda o estilo da linha da data atual, e todayMarker off esconde-a por completo.

  • section Launch Go live :milestone, m1, after c1, 0d

    As secções agrupam tarefas por frente de trabalho, cada uma com a sua faixa de cor. Um marco com duração zero é desenhado como um losango em vez de uma barra.

Perguntas sobre este diagrama

As tarefas podem depender umas das outras?

Sim — use «after taskId» para encadear tarefas, e marcos para assinalar as datas-chave. As secções agrupam as tarefas por frente de trabalho ou por equipa.

Um Gantt em texto é melhor do que uma ferramenta de gestão de projetos?

Para comunicar, sim: vive nos seus docs, é versionado com git e atualiza-se em segundos. Para gerir recursos, combine-o com a sua ferramenta de gestão de projetos.

Como partilho um gráfico de Gantt com quem não usa Mermaid?

Exporte PNG para slides e e-mail, SVG para tudo o que vá ser ampliado, ou publique o diagrama como página pública e envie a ligação — uma ligação continua a mostrar a versão atual depois de atualizar o plano.

Um gráfico de Gantt Mermaid mostra responsáveis ou percentagem de progresso?

Não. Não há coluna de recursos nem barra de progresso; a única informação de estado são as etiquetas done, active e crit numa tarefa. Mantenha o planeamento de capacidade na sua ferramenta de gestão de projetos e use o gráfico para comunicar.

O Mermaid desenha setas entre tarefas dependentes?

Não. Escrever after b1 define a data de início de uma tarefa mas não desenha nenhuma seta de dependência, por isso a ligação fica invisível para o leitor. Diga-o no nome da tarefa, ou use um fluxograma quando o grafo de dependências é a mensagem.

Como marco a data de hoje no gráfico?

O Mermaid desenha por predefinição um marcador na data atual, lida no relógio de quem renderiza o diagrama. O todayMarker stroke-width:4px,stroke:#e11 muda-lhe o estilo, e todayMarker off remove-o — útil quando o gráfico é um modelo reutilizável e não um plano em curso.

Gráfico de Gantt ou outro tipo de diagrama?

Gráfico de Gantt ou linha do tempo?

O Gantt é para trabalho que ainda não aconteceu: durações, dependências, caminho crítico. A linha do tempo é para eventos com data mas sem duração — releases, incidentes, história da empresa. Se nada na sua lista tem comprimento, o que quer é uma linha do tempo.

Gráfico de Gantt ou fluxograma?

Ambos descrevem um plano. O fluxograma guarda as ramificações — o que acontece se a auditoria falhar — e ignora o calendário; o Gantt guarda o calendário e achata todos os ramos num único caminho nominal. Os comités querem o Gantt; as equipas de entrega precisam muitas vezes dos dois.

Crie já o seu Gráfico de Gantt

Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.

Abrir o Mermaid Studio