{"id":2105,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-gantt-chart-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-gantt-chart-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","title":{"rendered":"Guia de Sintaxe do Gr\u00e1fico de Gantt do Mermaid.js"},"content":{"rendered":"

O que \u00e9 um Gr\u00e1fico de Gantt?<\/h2>\n

Um Gr\u00e1fico de Gantt<\/strong>\u00e9 uma ferramenta de visualiza\u00e7\u00e3o de gest\u00e3o de projetos usada para mapear cronogramas de projetos, dura\u00e7\u00f5es de tarefas e marcos da rota cr\u00edtica ao longo de uma linha do tempo horizontal. Representando pacotes de trabalho como barras e depend\u00eancias estruturais como fluxos sequenciais, permite que equipes acompanhem o progresso, identifiquem gargalos potenciais e comuniquem prazos de forma eficaz.<\/p>\n

Com Mermaid.js<\/strong>, voc\u00ea 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\u00e3o, permitindo que voc\u00ea gere mapas de rota profissionais de projetos diretamente dentro de sua documenta\u00e7\u00e3o.<\/p>\n

Guia de Sintaxe Principal: Elementos e Constru\u00e7\u00f5es<\/h2>\n

Para criar um cronograma de projeto v\u00e1lido e totalmente execut\u00e1vel no Mermaid, voc\u00ea deve dominar a configura\u00e7\u00e3o da linha do tempo, as declara\u00e7\u00f5es de tarefas, o agrupamento de se\u00e7\u00f5es e os marcadores de marcos.<\/p>\n

1. Inicializando a Linha do Tempo do Gr\u00e1fico de Gantt<\/h3>\n

Voc\u00ea inicializa uma tela de Gr\u00e1fico de Gantt na primeira linha usando a palavra-chave gantt<\/code>palavra-chave. Todo gr\u00e1fico de Gantt exige um t\u00edtulo, uma defini\u00e7\u00e3o de formato de data e uma data de in\u00edcio espec\u00edfica para fixar a grade da linha do tempo.<\/p>\n

gantt\r\n    t\u00edtulo Cronograma do Projeto Alpha\r\n    dateFormat AAAA-MM-DD\r\n    axisFormat %Y-%m-%d\r\n    exclui fins de semana<\/code><\/pre>\n
2. Definindo Tarefas e Dura\u00e7\u00f5es<\/h3>\n
As tarefas s\u00e3o definidas por seu status (ativo, conclu\u00eddo ou crit), uma etiqueta de exibi\u00e7\u00e3o, um ID interno e uma dura\u00e7\u00e3o temporal. Voc\u00ea pode especificar uma dura\u00e7\u00e3o usando dias (d<\/code>), horas (h<\/code>), ou datas espec\u00edficas de in\u00edcio\/fim.<\/p>\n