🕰️ Mermaid

Linha do tempo

Conte uma história ano a ano

Abrir este exemplo no editor Gerar um com IA

O que é um Linha do tempo?

Uma linha do tempo dispõe os eventos cronologicamente: história da empresa, marcos de projeto, evolução do produto, retrospetivas de incidentes. As linhas do tempo Mermaid agrupam vários eventos por período e mantêm-se legíveis em qualquer tamanho.

A linha do tempo é o diagrama da retrospetiva: postmortems de incidentes, slides de história da empresa, a secção «como chegámos aqui» de um documento de estratégia. É invulgarmente boa a tornar visíveis os vazios — três eventos em março e nada até setembro já é uma história por si só. O que não consegue fazer é escala: os períodos são rótulos, espaçados por igual seja qual for o intervalo, e nada é ordenado por si. Um período também não transporta mais nada além de texto — sem responsável, sem ligação, sem estado por que filtrar.

Exemplo em tempo real

Código Mermaid

timeline
    title History of the project
    2024 : Idea & prototype
    2025 : First customers
         : Seed funding
    2026 : EU expansion
         : AI features

Exemplo em tempo real

Quando usar

Apresentar a história de uma empresa ou de um produto

Documentar cronologias de incidentes para os postmortems

Mostrar os marcos da roadmap por trimestre ou por ano

Erros frequentes

Os períodos nunca são ordenados

O Mermaid desenha os períodos pela ordem em que os escreveu, por isso uma entrada de 2026 acima de uma de 2024 fica mesmo acima. Não há verificação cronológica nem aviso — ordene o código você mesmo antes de publicar.

Períodos antes da primeira secção desaparecem

Assim que uma linha do tempo tem uma secção, todos os períodos declarados antes dessa primeira linha section são retirados do desenho, em silêncio e sem erro. Dê a esses períodos iniciais uma secção própria, ou não use secções de todo.

Frases em vez de eventos

O texto do evento quebra a uma largura fixa, por isso uma frase inteira passa a quatro linhas empilhadas e aumenta a altura do gráfico todo. Mantenha os eventos em poucas palavras e ponha o detalhe no documento à volta.

Sintaxe básica

.mmd

timeline
    title My timeline
    2025 : Event A
         : Event B
    2026 : Event C

timeline title History of the project
O título é opcional mas faz o trabalho de uma legenda, o que passa a contar assim que o diagrama é exportado sozinho para um slide ou para um postmortem.
2025 : First customers
O lado esquerdo dos dois pontos é o rótulo do período — um ano, um trimestre, Sprint 12, o que quiser. Nunca é interpretado como data, por isso qualquer formato serve.
2024 : Idea : Prototype
Dois pontos adicionais na mesma linha acrescentam mais eventos ao mesmo período, o que mantém o código compacto quando um ano concentra vários momentos notáveis.
section Early days 2024 : Idea
As secções agrupam períodos consecutivos numa era e colorem-nos em conjunto — útil para separar o antes e o depois de uma ronda de financiamento, de uma migração ou de uma avaria.

Perguntas sobre este diagrama

Um período pode conter vários eventos?

Sim — adicione linhas adicionais a começar por «:» sob o mesmo período e elas empilham-se verticalmente sob essa data.

Linha do tempo ou gráfico de Gantt?

A linha do tempo para contar o passado ou dar uma visão geral (eventos com datas). O Gantt para planear o trabalho (tarefas com durações e dependências).

Posso acrescentar uma linha do tempo Mermaid a um postmortem no Confluence?

O Confluence não tem suporte nativo para Mermaid, por isso use uma macro do Marketplace ou cole um SVG ou PNG exportado. O GitHub e o GitLab renderizam linhas do tempo diretamente de um bloco delimitado, pelo que relatórios guardados num repositório não precisam de mais nada.

Como mudo a cor das secções de uma linha do tempo?

As secções tiram as cores da escala do tema. Substitua-as com uma diretiva init na primeira linha — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% — em que cScale0 é a primeira secção, cScale1 a segunda, até cScale11. A paleta fica gravada no SVG exportado.

Posso pôr uma linha do tempo na vertical?

Não — as linhas do tempo são renderizadas na horizontal e não há definição de direção. Nunca mudam de linha: o diagrama limita-se a ficar mais largo. Para um histórico longo que tenha de caber numa coluna estreita, um fluxograma de cima para baixo ou um gitGraph TB: aproveitam muito melhor o espaço disponível.

Posso transformar um relatório de incidente numa linha do tempo automaticamente?

Cole o relatório no Mermaid Studio e a IA extrai os eventos datados para uma linha do tempo que pode depois editar. Trate-a como um primeiro rascunho: os períodos ficam pela ordem em que foram extraídos, por isso verifique a cronologia antes de publicar.

Linha do tempo ou outro tipo de diagrama?

Linha do tempo ou jornada do utilizador?

Ambas dispõem passos da esquerda para a direita. A linha do tempo é sobre quando: eventos datados, sem ator, sem pontuação. A jornada é sobre como se sentiu: passos ordenados, um ator, uma pontuação de satisfação. Se ninguém viveu os eventos, o que quer é uma linha do tempo.

Linha do tempo ou grafo Git?

A linha do tempo é plana — cada evento fica numa só linha. O grafo Git ramifica, e as suas faixas voltam a juntar-se. Um histórico de releases com branches de manutenção em paralelo precisa do grafo Git; uma história de produto em que importa a sequência e não o paralelismo precisa da linha do tempo.

Explorar outros tipos de diagramas

🔀 Fluxograma 💬 Diagrama de sequência 🧩 Diagrama de classes 🗄️ Diagrama entidade-relação 🔄 Diagrama de estados 📅 Gráfico de Gantt 🥧 Gráfico circular 🧠 Mapa mental 🌿 Grafo Git 🚶 Jornada do utilizador 🎯 Gráfico de quadrantes

Crie já o seu Linha do tempo

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

Abrir o Mermaid Studio