Editor de gráfico de Gantt Mermaid
Um gráfico de Gantt coloca o trabalho sobre um calendário: o que acontece quando, o que se sobrepõe e o que não pode começar antes de outra coisa terminar. Use quando datas e dependências forem o assunto. Se você só precisa da ordem e não das datas, um fluxograma é mais leve e não apodrece assim que o cronograma escorrega.
Um cronograma de release com dependências e um marco
O que faz disto um Gantt e não um desenho de barras é o `after a1`: a dependência está declarada, então mover a primeira tarefa arrasta tudo o que vem depois. O marco assinala uma data fixa que não consome tempo.
gantt
title Release 2.4
dateFormat DD/MM/YYYY
axisFormat %d/%m
excludes weekends
section Desenvolvimento
Contrato da API :done, a1, 06/01/2026, 10d
Implementação :active, a2, after a1, 20d
QA interno : a3, after a2, 8d
section Publicação
Período de validação : b1, after a3, 5d
Comitê de aprovação :milestone, m1, after b1, 0d
Subida para produção :crit, b2, after m1, 3dExemplos resolvidos
1. O gráfico válido mais simples
`dateFormat` diz ao Mermaid como LER as datas que você escreve; `axisFormat` controla como elas são MOSTRADAS no eixo. São ajustes diferentes, e confundi-los é a frustração número um do Gantt.
gantt
title Sprint 14
dateFormat DD/MM/YYYY
section Trabalho
Construir a busca :02/03/2026, 10d2. Identificadores e dependências
Dar um identificador a uma tarefa permite que as seguintes escrevam `after <id>`. Uma vez declaradas as dependências, você muda uma data de início num único lugar e o resto do cronograma acompanha.
gantt
title Migração de dados
dateFormat DD/MM/YYYY
section Preparação
Auditoria do esquema :a1, 02/02/2026, 5d
Escrever os mapeamentos :a2, after a1, 8d
section Execução
Ensaio geral :a3, after a2, 3d
Virada :a4, after a3, 1d3. Palavras de estado
`done`, `active` e `crit` mudam como a barra é desenhada. São a forma mais barata de fazer o gráfico responder «onde estamos» em vez de só «qual era o plano».
gantt
title Plataforma, primeiro trimestre
dateFormat DD/MM/YYYY
section Infraestrutura
Limpeza do Terraform :done, t1, 05/01/2026, 12d
Subir o Kubernetes :active, t2, 19/01/2026, 15d
Revisão de custos : t3, after t2, 5d
section Segurança
Auditoria de dependências :crit, s1, 12/01/2026, 6d4. Marcos
Um marco é um ponto, não um intervalo: dê a ele `0d`. Use-os para as datas fixadas por algo fora do projeto — um evento, um prazo contratual, um congelamento de código.
gantt
title Plano de lançamento
dateFormat DD/MM/YYYY
section Engenharia
Congelamento de escopo :milestone, m1, 01/04/2026, 0d
Caça a bugs : e1, 01/04/2026, 5d
Branch de release :milestone, m2, after e1, 0d
section Comunicação
Fim do embargo à imprensa :milestone, m3, 15/04/2026, 0d5. Excluir fins de semana e feriados
`excludes weekends` impede que as durações contem sábado e domingo, então uma tarefa de 10 dias ocupa duas semanas úteis em vez de terminar no meio do fim de semana. Feriados saem um a um por data — no Brasil isso muda bastante o cálculo em fevereiro e em novembro.
gantt
title Subida de um serviço novo
dateFormat DD/MM/YYYY
excludes weekends, 16/02/2026, 17/02/2026, 21/04/2026
section Preparação
Provisionar a infra :p1, 04/05/2026, 5d
Montar o CI/CD :p2, after p1, 5d
section Repasse
Runbook e treinamento :p3, after p2, 4dReferência de sintaxe do gráfico de Gantt
Dos seis tipos, o Gantt é o menos tolerante num ponto específico — a linha de tarefa — e o mais tolerante em todo o resto. É exatamente por isso que tantos erros de Gantt passam em silêncio.
| Sintaxe | Significado |
|---|---|
| gantt | Abre o diagrama. |
| title Texto | Título do gráfico. |
| dateFormat DD/MM/YYYY | Como INTERPRETAR as datas que você escreve. |
| dateFormat YYYY-MM-DD | O formato ISO, o padrão. |
| axisFormat %d/%m | Como MOSTRAR as datas no eixo. Ajuste diferente de dateFormat. |
| excludes weekends | Não contar sábados e domingos nas durações. |
| excludes 21/04/2026 | Excluir uma data específica. É assim que se tiram os feriados. |
| section Nome | Agrupa tarefas numa faixa rotulada. |
| Tarefa :id, 01/01/2026, 10d | Tarefa com início e duração explícitos. |
| Tarefa :id, after outra, 10d | Tarefa que começa quando `outra` termina. |
| Tarefa :done, id, ... | Concluída — desenhada esmaecida. |
| Tarefa :active, id, ... | Em andamento — desenhada em destaque. |
| Tarefa :crit, id, ... | Crítica — desenhada na cor de destaque. |
| Nome :milestone, id, data, 0d | Um instante em vez de um intervalo. |
| 10d / 3w / 2h | Durações em dias, semanas e horas. A unidade é obrigatória. |
Seis erros de Gantt — e só um deles dá erro
É isto que separa o Gantt dos outros cinco tipos. Reproduzido no Mermaid 11.12.2: exatamente um dos seis abaixo impede o gráfico de desenhar. Os outros cinco produzem um cronograma perfeitamente plausível e errado, o que é bem mais perigoso, porque ninguém confere um diagrama que desenhou direitinho.
O que você vê
Parse error, terminando em: Expecting 'taskData', got 'NL'
Por quê
Uma linha de tarefa sem dois-pontos. Os dois-pontos separam o nome exibido dos dados da tarefa, e sem eles não há dados a analisar. É o único erro desta lista que o Mermaid recusa abertamente.
Solução
Coloque dois-pontos entre o nome e o identificador.
gantt
dateFormat DD/MM/YYYY
section Trabalho
Projeto a1, 01/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section Trabalho
Projeto :a1, 01/01/2026, 5dO que você vê
O gráfico desenha, mas as datas caem dois meses antes
Por quê
Este é o erro específico de quem escreve em português, e o mais caro da lista. Escrevemos as datas como 01/03/2026 para 1º de março, mas o `dateFormat` padrão é `YYYY-MM-DD` e, diante de uma data com barras, o Mermaid a interpreta ao estilo americano, mês primeiro. Medido: `01/03/2026` com `dateFormat YYYY-MM-DD` coloca a tarefa em 3 de janeiro. Nenhum aviso; o gráfico sai lindo e deslocado em dois meses.
Solução
Declare `dateFormat DD/MM/YYYY` e escreva as datas como sempre escreveu. Verificado: com esse formato declarado, `01/03/2026` cai mesmo em 1º de março.
gantt
dateFormat YYYY-MM-DD
section S
Projeto :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Projeto :a1, 01/03/2026, 10dO que você vê
O gráfico desenha, mas o eixo de repente abrange vários meses
Por quê
Um `after` apontando para um identificador que não existe — em geral um erro de digitação, ou um identificador renomeado. O Mermaid não avisa: ele coloca a tarefa num ponto arbitrário, e isso estica o eixo até alcançá-la. Duas tarefas de dez dias podem acabar num eixo de oito meses.
Solução
Confira se cada `after <id>` corresponde exatamente a um identificador declarado. Uma mudança brusca na escala do eixo é a pista.
gantt
dateFormat DD/MM/YYYY
section S
Projeto :a1, 01/01/2026, 10d
Construção :a2, after projeto, 10dgantt
dateFormat DD/MM/YYYY
section S
Projeto :a1, 01/01/2026, 10d
Construção :a2, after a1, 10dO que você vê
O nome de uma tarefa aparece cortado
Por quê
Há dois-pontos dentro do nome da tarefa. O primeiro sinal de dois-pontos é o separador, então tudo depois dele é lido como dados: `Fase 1: projeto` desenha como uma tarefa chamada apenas `Fase 1`, e a palavra projeto some.
Solução
Nada de dois-pontos em nomes de tarefa. Use um travessão ou leve o detalhe para o nome da seção.
gantt
dateFormat DD/MM/YYYY
section S
Fase 1: projeto :a1, 01/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Fase 1 — projeto :a1, 01/01/2026, 10dO que você vê
Uma barra encolhe até sumir
Por quê
Uma duração sem unidade. `5` não são cinco dias: a unidade é obrigatória e sem ela a tarefa não recebe comprimento algum que faça sentido. O gráfico desenha assim mesmo, com uma tarefa que aparenta não consumir tempo.
Solução
Escreva sempre a unidade: `5d`, `3w`, `2h`.
gantt
dateFormat DD/MM/YYYY
section S
Projeto :a1, 01/01/2026, 5gantt
dateFormat DD/MM/YYYY
section S
Projeto :a1, 01/01/2026, 5dO que você vê
As durações batem, mas as datas de término não batem com a realidade
Por quê
Falta `excludes weekends`. Por padrão uma tarefa de 10 dias são dez dias corridos, fins de semana incluídos, então qualquer coisa maior que uma semana útil termina antes no gráfico do que na prática. No Brasil, somando Carnaval e os feriados de abril e novembro, a diferença num trimestre fica difícil de defender numa reunião.
Solução
Acrescente `excludes weekends` perto do início e depois as datas dos feriados, a menos que o trabalho realmente ocorra sete dias por semana.
gantt
dateFormat DD/MM/YYYY
section S
Migração :a1, 01/06/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends
section S
Migração :a1, 01/06/2026, 10dNotas sobre a renderização
Medido no Mermaid 11.12.2 que este site usa. O Gantt se comporta diferente de todos os outros tipos.
É o único tipo com largura de renderização fixa
Todos os outros diagramas deste site crescem na direção em que o conteúdo cresce. Um Gantt tem sempre 1264 pixels de largura no viewBox, tenha três tarefas ou quarenta; só a altura muda, medida entre cerca de 172 e 1060 pixels. O eixo é comprimido ou esticado para caber nessa largura fixa, e por isso um cronograma de dois anos e outro de duas semanas parecem igualmente densos. Se as barras saírem finas demais para ler, o problema é a faixa de datas, não a quantidade de tarefas.
Data com barras é lida ao estilo americano se você não disser o contrário
Vale repetir aqui porque é a armadilha mais cara de quem escreve em português. Medido: com `dateFormat YYYY-MM-DD`, a data `01/03/2026` não falha nem avisa — ela se instala em 3 de janeiro. Declarar `dateFormat DD/MM/YYYY` resolve por completo e permite escrever as datas do jeito daqui. É a primeira linha que deveria entrar em qualquer Gantt em português.
A exportação para PNG é exata ao pixel
O Gantt desenha os rótulos como texto SVG simples em vez de HTML embutido, então — ao contrário do fluxograma e dos diagramas de classes, de estados e ER — ele pode ser rasterizado direto. O PNG exportado corresponde exatamente à tela, sem redesenho e sem deslocamento tipográfico.
Foi o mais prejudicado pelo defeito de exportação para PNG
Como o Mermaid emite `width="100%"` e nenhuma altura, o navegador resolvia o tamanho da exportação contra uma caixa padrão de 300×150, e a proporção larga e baixa do Gantt tornava isso o pior caso possível: um gráfico de 1280×148 saía como um PNG de 600×58. A exportação agora lê o viewBox e o mesmo gráfico sai em 2560×296. Vale saber se você tem PNGs antigos de Gantt guardados: eles não vão ampliar.
A gramática é tolerante em tudo, menos nos dois-pontos
Seções faltando, palavras de estado desconhecidas, datas no formato errado e durações sem unidade: tudo isso desenha. Só é rejeitada a linha de tarefa sem dois-pontos. Essa assimetria é a coisa mais útil a saber sobre escrever gráficos de Gantt: o fato de um gráfico ter desenhado não diz quase nada sobre ele estar certo.
Quando usar outro diagrama
Se as datas são chutes, um Gantt vai apresentá-las com uma precisão que elas não conquistaram, e alguém vai cobrar você por elas. Um fluxograma mostrando a ordem sem datas é mais honesto e não precisa de manutenção quando o cronograma se move.
Se o plano muda toda semana, um Gantt em texto sob controle de versão é genuinamente bom — o diff mostra o que mudou de lugar —, mas um diagrama que ninguém atualiza é pior que diagrama nenhum. Seja realista sobre qual dos dois você está fazendo.
E para qualquer coisa que envolva nivelamento de carga, capacidade ou alocação por pessoa, esta é a ferramenta errada. O Mermaid desenha barras num calendário; ele não sabe quem faz o trabalho nem se essa pessoa já está ocupada.
Outros tipos de diagrama
Escrito por Dominik Malsch · Última atualização: