Diagrama de Gantt
O diagrama de Gantt é um tipo de gráfico de barras usado para exibir o progresso de um projeto e o tempo necessário para concluí-lo. O diagrama de Gantt mostra o número de dias entre as datas de início e de conclusão dos elementos terminais e dos elementos resumidos do projeto.
Observações
O diagrama de Gantt registra cada tarefa planejada como uma barra contínua que se estende da esquerda para a direita. O eixo x representa o tempo, e o eixo y registra as diferentes tarefas e sua ordem de conclusão.
Mais importante ainda, quando a data, o número de dias ou um conjunto específico de datas de uma tarefa é excluído, o diagrama de Gantt se ajusta a essas mudanças estendendo-se para a direita pelo mesmo número de dias, em vez de criar lacunas dentro da tarefa.
Copiar
Incorporar
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
No entanto, se a data excluída estiver entre duas tarefas de início consecutivo, a data excluída será ignorada no diagrama e deixada em branco, e a tarefa começará após o fim da data excluída. Como mostrado abaixo:
Copiar
Incorporar
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
O diagrama de Gantt é útil para acompanhar o tempo necessário para concluir um projeto, mas com alguns ajustes também pode ser usado para representar graficamente os "dias não úteis".
Sintaxe
Copiar
Incorporar
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
As tarefas são, por padrão, consecutivas, e a data de início da próxima tarefa é, por padrão, a data de término da tarefa anterior.
O título da tarefa e seus metadados são separados por dois-pontos (:), e os itens de metadados são separados por vírgulas (,). Os rótulos válidos incluem active, done, crit e milestone. Os rótulos são opcionais, mas, se usados, devem vir primeiro. Após processar os rótulos, os itens de metadados restantes são interpretados da seguinte forma:
- Se um único item for especificado, ele determinará quando a tarefa termina. Pode ser uma data ou hora específica, ou uma duração. Se uma duração for especificada, ela será somada à data de início da tarefa para determinar a data de término, considerando quaisquer exclusões.
- Se dois itens forem especificados, o segundo item será interpretado da mesma forma que no caso anterior. O primeiro item pode especificar uma data ou hora de início explícita (o formato é definido por dateFormat), ou pode referenciar outra tarefa por meio de after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. Neste último caso, a data de início da tarefa será definida com base na data de término mais tardia de qualquer tarefa referenciada.
- Se três itens forem especificados, os dois últimos itens serão interpretados conforme os casos anteriores. O primeiro item indicará o ID da tarefa, que pode ser referenciado com a sintaxe later <taskID>.
| Sintaxe de metadados | Data de início | Data de término | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpretado com dateformat | endDate interpretado com dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpretado com dateformat | Data de início + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | A data de término da tarefa otherTaskID especificada anteriormente | endDate interpretado com dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | A data de término da tarefa otherTaskID especificada anteriormente | Data de início + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpretado com dateformat | A data de início da tarefa otherTaskID especificada anteriormente | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | A data de término da tarefa otherTaskID especificada anteriormente | A data de início da tarefa otherTaskID especificada anteriormente | taskID |
| <startDate>, <endDate> | startdate interpretado com dateformat | 使用 dateformat 解释的 enddate | Não aplicável |
| <startDate>, <length> | startdate interpretado com dateformat | Data de início + length | Não aplicável |
| after <otherTaskID>, <endDate> | A data de término da tarefa otherTaskID especificada anteriormente | 使用 dateformat 解释的 enddate | Não aplicável |
| after <otherTaskID>, <length> | A data de término da tarefa otherTaskID especificada anteriormente | Data de início + length | Não aplicável |
| <startDate>, until <otherTaskId> | startdate interpretado com dateformat | A data de início da tarefa otherTaskID especificada anteriormente | Não aplicável |
| after <otherTaskId>, until <otherTaskId> | A data de término da tarefa otherTaskID especificada anteriormente | A data de início da tarefa otherTaskID especificada anteriormente | Não aplicável |
| <endDate> | A data de término da tarefa anterior | 使用 dateformat 解释的 enddate | Não aplicável |
| <length> | A data de término da tarefa anterior | Data de início + length | Não aplicável |
| until <otherTaskId> | A data de término da tarefa anterior | A data de início da tarefa otherTaskID especificada anteriormente | Não aplicável |
Formato de duração
Ao especificar <length>, use um número seguido de um dos seguintes sufixos de unidade:
| Unidade | Sufixo | Exemplo |
|---|---|---|
| Milissegundo | ms | 50ms |
| Segundo | s | 30s |
| Minuto | m | 30m |
| Hora | h | 4h |
| Dia | d | 7d |
| Semana | w | 3w |
| Mês | m | 2m |
| Ano | y | 1y |
Também há suporte a valores decimais (por exemplo, 2.5d). Marcações de duração inválidas (por exemplo, 3dX) serão ignoradas, e a tarefa terá duração padrão zero.
Para simplificar, a tabela não mostra várias tarefas listadas com a sintaxe after. A seguir está um exemplo:
Copiar
Incorporar
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Título
title é uma string opcional exibida no topo do diagrama de Gantt, usada para descrever todo o diagrama.
Exclusão
excludes é uma propriedade opcional que aceita datas específicas (no formato YYYY-MM-DD), dias da semana (por exemplo "sunday") ou "weekends", mas não pode usar a palavra "weekdays". Essas datas serão marcadas no diagrama e excluídas do cálculo de duração das tarefas. Isso significa que, se o período de duração de uma tarefa incluir datas excluídas, os dias excluídos serão somados ao horário de término da tarefa, para garantir que a duração da tarefa seja consistente com a especificada no código.
Fim de semana
Ao excluir fins de semana, você pode definir o fim de semana como sexta e sábado, ou como sábado e domingo. Por padrão, o fim de semana é sábado e domingo. Para definir o dia de início do fim de semana, adicione em uma nova linha uma propriedade opcional weekend, seguida de friday ou saturday.
Copiar
Incorporar
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Declaração de seção
Você pode dividir o diagrama em seções, separando diferentes partes do projeto (por exemplo, desenvolvimento e documentação).
Para isso, use a sintaxe section no início de uma linha e dê um nome a ela. Observe que, diferentemente do título de todo o diagrama, este nome é obrigatório.
Marco
Você pode adicionar marcos ao diagrama. Os marcos são diferentes das tarefas, pois representam um momento específico e são identificados pela sintaxe milestone. A seguir está um exemplo de uso de marcos: a posição exata do marco é determinada pela data de início do marco e pela duração da tarefa, como mostrado abaixo:
Copiar
Incorporar
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Marcação vertical
vert indica a adição de uma linha vertical no diagrama de Gantt, para destacar facilmente datas importantes, como prazos, eventos importantes ou pontos de verificação. Essas marcações se estendem por todo o diagrama e são posicionadas de acordo com a data que você fornecer. Diferentemente dos marcos, as marcações verticais não ocupam uma linha. Elas são puramente pontos de referência visuais, que ajudam a dividir a linha do tempo, tornando os momentos importantes mais fáceis de identificar.
Copiar
Incorporar
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Definir data
dateFormat define o formato de entrada de data dos elementos do diagrama de Gantt, e axisFormat define o formato de saída das datas ao renderizar o diagrama.
Formato de data de entrada
O formato de data de entrada padrão é YYYY-MM-DD; você pode personalizar o dateFormat.
Copiar
Incorporar
dateFormat YYYY-MM-DD
Há suporte às seguintes opções de formato:
| 输入 | Exemplo | Descrição |
|---|---|---|
| YYYY | 2026 | Ano com 4 dígitos |
| YY | 26 | Ano com 2 dígitos |
| Q | 1..4 | Número do trimestre |
| M MM | 1..12 | Número do mês |
| D DD | 1..31 | Dia do mês |
| Do | 1st..31st | Dia do mês com ordinal |
| DDD DDDD | 1..365 | Dia do ano |
| X | 1410715640.579 | Carimbo de data/hora Unix |
| x | 1410715640579 | Carimbo de data/hora Unix em milissegundos |
| H HH | 0..23 | Horário de 24 horas |
| h hh | 1..12 | Horário de 12 horas, usado com a A |
| a A | am pm | AM ou PM |
| m mm | 0..59 | Minuto |
| s ss | 0..59 | Segundo |
| S | 0..9 | Décimo de segundo |
| SS | 0..99 | Centésimo de segundo |
| SSS | 0..999 | Milésimo de segundo |
| Z ZZ | +12:00 | Deslocamento em relação ao UTC, no formato +-HH:mm, +-HHmm ou Z |
O formato de data de saída do eixo
O formato de data de saída padrão é YYYY-MM-DD. Você pode personalizar o axisFormat, por exemplo, 2026-Q1 representa o primeiro trimestre de 2026.
Copiar
Incorporar
axisFormat %Y-%m-%d
Há suporte às seguintes strings de formato:
| Formato,Definição | |
|---|---|
| %a | Nome abreviado do dia da semana |
| %A | Nome completo do dia da semana |
| %b | Nome abreviado do mês |
| %B | Nome completo do mês |
| %c | Data e hora localizadas |
| %d | Data, número decimal [01,31] |
| %e | Data, número decimal preenchido com espaços [1,31], equivalente a %_d |
| %H | Hora (formato 24 horas), número decimal [00,23] |
| %I | Hora (formato 12 horas), número decimal [01,12] |
| %j | Dia do ano, número decimal [001,366] |
| %m | Mês, número decimal [01,12] |
| %M | Minuto, número decimal [00,59] |
| %L | Milissegundo, número decimal [000, 999] |
| %p | AM ou PM |
| %S | Segundo, número decimal [00,59] |
| %U | Semana do ano (com domingo como primeiro dia da semana), número decimal [00,53] |
| %w | Dia da semana, número decimal preenchido com espaços [0,6], em que 0 representa domingo |
| %W | Semana do ano (com segunda-feira como primeiro dia da semana), número decimal [00,53] |
| %x | Representação de data localizada, como: 2026-09-18 |
| %X | Representação de hora localizada, como: 14:30:00 |
| %y | Ano sem século, número decimal [00,99], por exemplo, 26 representa o ano 2026 |
| %Y | Ano com século, número decimal |
| %Z | Abreviatura do nome do fuso horário, por exemplo "-0700" |
| %% | Caractere de escape, usado para exibir o próprio sinal de porcentagem % |
Escala do eixo
A escala de saída padrão é automática. Você pode personalizar o tickInterval, por exemplo, 1day ou 1week.
Copiar
Incorporar
tickInterval 1day
O padrão é
Copiar
Incorporar
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
O tickInterval baseado em semana começa, por padrão, no domingo. Se você quiser especificar outro dia da semana como início do tickInterval, use a opção weekday, conforme o código:
Copiar
Incorporar
gantt
tickInterval 1week
weekday monday
Saída em modo compacto
O modo compacto permite exibir várias tarefas na mesma linha. Defina o modo de exibição do gráfico com a configuração YAML anterior para ativar o modo compacto no diagrama de Gantt.
Copiar
Incorporar
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
É possível inserir comentários em um diagrama de Gantt; o analisador irá ignorá-los. Os comentários precisam ocupar uma linha própria e devem começar com %% (dois sinais de porcentagem). Qualquer texto desde o início do comentário até a próxima quebra de linha será considerado comentário, incluindo qualquer sintaxe de diagrama.
Copiar
Incorporar
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Marcação de hoje
Você pode definir o estilo da marcação da data atual ou ocultá-la. Para definir o estilo, adicione um valor à chave todayMarker.
Copiar
Incorporar
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Para ocultar a marcação, defina todayMarker como off.
Copiar
Incorporar
todayMarker off
Exemplo
Diagrama de Gantt de barras
Copiar
Incorporar
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Linha do tempo (com comentários, CSS e configuração de frontmatter)
Copiar
Incorporar
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
