Guia de Sintaxe do Diagrama de Linha do Tempo do Mermaid.js

O que é um Diagrama de Linha do Tempo?

Um Diagrama de Linha do Tempo é uma ferramenta de visualização cronológica usada para mapear eventos ou marcos de projeto ao longo de um caminho temporal linear. Enquanto os gráficos de Gantt lidam com dependências e durações de tarefas complexas, o diagrama de linha do tempo foca no quando—fornecendo uma narrativa clara e fácil de escanear da evolução de um projeto ou do ciclo de lançamento de um sistema.

Com Mermaid.js, você pode definir sua linha do tempo usando um formato de texto simples e hierárquico. O motor trata automaticamente o espaçamento, a formatação de datas ou rótulos de período e a alinhamento dos marcadores de eventos ao longo do eixo temporal central.

Guia de Sintaxe Básica

Para criar uma linha do tempo válida e executável, você deve definir o período do eixo e mapear eventos para seções específicas.

1. Inicializando a Linha do Tempo

Você inicializa a tela usando a linha do tempopalavra-chave. A estrutura é construída definindo seções (que atuam como agrupamentos) e mapeando eventos (ou datas) para essas seções.

linha do tempo
    título História do Desenvolvimento do Sistema
    seção 2025
        Q1 : Lançamento Alpha
    seção 2026
        Q2 : Lançamento Beta

2. Adicionando Detalhes aos Eventos

Você pode adicionar múltiplos detalhes a um único marcador de tempo usando uma lista separada por dois-pontos. Isso é útil para resumir resultados-chave ou números de versão associados a uma data ou período específico.

linha do tempo
    seção Q3 2026
        Lançamento : v1.0.0
                : Melhorias de Desempenho
                : Correções de Segurança

Exemplo Prático de Diagrama de Tempo do Mermaid.js: Plano de Lançamento de Produto

Este modelo representa um plano de rota de produto de vários anos, agrupando lançamentos por ano fiscal e destacando os principais entregáveis de cada ciclo.

timeline
    título Roadmap do Produto 2026-2027
    seção 2026
        T1 : Fase de Descoberta
           : Entrevistas com Stakeholders
        T2 : Desenvolvimento do MVP
           : Design da API Principal
        T3 : Lançamento em Beta
           : Ciclos de Feedback de Usuários
    seção 2027
        T1 : Lançamento Completo
           : Escalonamento Global

Melhores Práticas para Cronogramas

• Mantenha as Categorias Concisas: Use seção para indicar agrupamentos de alto nível (como anos ou fases principais), mantendo os eventos reais abaixo específicos e passíveis de ação.
• Formatação de Data Consistente: Certifique-se de que os eventos do cronograma estejam em ordem cronológica no código, pois o motor Mermaid segue a sequência do seu script para determinar a posição da disposição.
• Use Detalhes para Contexto: Não encha o eixo central com muito texto. Use o formato de evento em múltiplas linhas para detalhar o que aconteceu, em vez de tornar a etiqueta da data muito longa.