Pular para o conteúdo principal

Mermaid 11.15.0

Guia rápido de linhas do tempo no Mermaid

Uma linha do tempo agrupa eventos em períodos ordenados. Use Gantt para datas, durações e dependências: os períodos são rótulos, não um calendário em escala.

Criar com o Gerador de cronogramas Mermaid →

Início rápido

Separe período e evento com dois-pontos; cada separador adicional inclui outro evento.

Mermaid
Abrir no editor → 
timeline
  title Ciclo da documentação
  Rascunho : Estrutura acordada
  Revisão : Comentários recebidos : Mudanças aprovadas
  Publicação : Guia publicado

Carregando…

Referência de sintaxe

Referência de sintaxe
SintaxeSignificado
timeline / title TextDeclara a linha do tempo e seu título opcional.
section TextAgrupa os períodos seguintes em uma seção.
Period : Event : Another eventInclui vários eventos separados por dois-pontos.
: Another eventContinua o período anterior com outro evento.
<br>Insere uma quebra no rótulo.
config.timeline.disableMulticolorDesativa a alternância de cores em períodos sem seções.
theme: base / themeVariables.cScale0…cScale11Personaliza fundos com cScale e textos com cScaleLabel usando theme base.
%% / accTitle: / accDescr:Comentários e descrições acessíveis.

Períodos e eventos

Períodos não precisam ser datas. Eventos após separadores adicionais pertencem ao mesmo período; o código determina a ordem.

Mermaid
Abrir no editor → 
timeline
  title Notação da revisão
  Rodada 1 : Estrutura verificada
         : Referências verificadas
  Rodada 2 : Redação verificada : Links verificados

Carregando…

Seções e quebras

section vale até a próxima seção. Use rótulos curtos e <br> para uma quebra intencional.

Mermaid
Abrir no editor → 
timeline
  title Etapas editoriais
  section Preparação
    Revisão<br>da estrutura : Escopo definido
  section Entrega
    Revisão<br>final : Correções integradas
    Publicação : Leitores avisados

Carregando…

Períodos com uma cor

disableMulticolor evita alternar cores em uma linha sem seções. Não acrescenta escala temporal nem relações.

Mermaid
Abrir no editor → 
---
config:
  timeline:
    disableMulticolor: true
---
timeline
  title Etapas de aprovação
  Rascunho : Enviado
  Revisão : Aceito
  Publicação : Arquivado

Carregando…

Cores das seções

Use theme base com cScale0…cScale11 e cScaleLabel0…cScaleLabel11. Mantenha contraste; as cores se repetem quando a paleta termina.

Mermaid
Abrir no editor → 
---
config:
  theme: base
  themeVariables:
    cScale0: "#d3e5ff"
    cScaleLabel0: "#171717"
    cScale1: "#f5f5f5"
    cScaleLabel1: "#171717"
---
timeline
  title Revisão em duas etapas
  section Redação
    Estrutura : Pronto
  section Publicação
    Guia : Disponível

Carregando…

Erros comuns

Deixar um evento vazio

Cada separador precisa de texto de evento. Um período sem separador é válido, mas não tem eventos.

Sintaxe inválida: veja a correção abaixo

timeline
  :

Esperar distâncias proporcionais

Ano e mês são apenas rótulos; use Gantt para intervalos proporcionais.

Limitações

  • Períodos são categorias ordenadas, sem distância temporal proporcional.
  • Não há durações, dependências ou coordenadas por evento.
  • Muitos rótulos longos dificultam a leitura.

Perguntas frequentes

Um período pode ter vários eventos?
Sim: use eventos separados por dois-pontos ou uma continuação iniciada por dois-pontos.
Como mudar as cores?
Configure theme base e as variáveis cScale e cScaleLabel no frontmatter.
Quando usar Gantt?
Use Gantt para intervalos reais, durações e dependências; timeline serve para uma narrativa breve.