Linha cronológica
A linha do tempo é um diagrama usado para ilustrar eventos, datas ou períodos. Ele geralmente é renderizado graficamente para mostrar a passagem do tempo e costuma ser organizado em ordem cronológica. A linha do tempo básica lista eventos em ordem cronológica, geralmente usando datas como marcações. A linha do tempo também pode ser usada para mostrar relações entre eventos, como as relações entre os eventos da vida de uma pessoa.
Copiar
Incorporar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Sintaxe
A sintaxe para criar uma linha do tempo é simples. É preciso começar com a sintaxe timeline, para que o mermaid saiba que você deseja criar uma linha do tempo.
Depois, você pode adicionar um título à linha do tempo. Isso é feito adicionando a sintaxe title, seguida do texto do título.
Em seguida, adicione os dados da linha do tempo, sempre começando com um período, seguido de dois-pontos e depois do texto do evento. Você pode optar por adicionar mais dois-pontos, seguidos do texto do evento. Portanto, cada período pode ter um ou mais eventos.
Copiar
Incorporar
{time period} : {event}
ou
Copiar
Incorporar
{time period} : {event} : {event}
ou
Copiar
Incorporar
{time period} : {event}
: {event}
: {event}
Observação: tanto os períodos quanto os eventos são textos simples, não se limitando a números.
mermaid.grammar_timeline_note_see_up_exemport_s
Copiar
Incorporar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Assim, podemos usar o esboço de texto para gerar a linha do tempo. A ordem dos períodos e eventos é importante, pois será usada para desenhar a linha do tempo. O primeiro período será colocado no lado esquerdo da linha do tempo, e o último período será colocado no lado direito da linha do tempo.
Quando vários eventos ocorrem no mesmo período, o primeiro evento ficará no topo desse período específico e o último evento ficará na parte inferior desse período específico.
Agrupar períodos
Você pode agrupar períodos em diferentes seções/eras. Isso pode ser feito adicionando a sintaxe section, seguida do nome da seção.
Todos os períodos subsequentes serão colocados nessa seção, até que uma nova seção seja definida.
Se nenhuma seção for definida, todos os períodos serão colocados na seção padrão.
mermaid.grammar_timeline_default_see_one_some_part
Copiar
Incorporar
timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam <br>power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data, 3D printing
Como você pode ver, os períodos são colocados nas seções, e as seções são organizadas na ordem em que foram definidas.
Todos os períodos e eventos sob uma seção especificada seguem um esquema de cores semelhante; isso é feito para facilitar a visualização das relações entre períodos e eventos.
Quebra de linha de períodos longos ou eventos longos
Por padrão, se o texto de um período ou evento for muito longo, ele será quebrado automaticamente.
Você também pode forçar a quebra de linha.
mermaid.grammar_timeline_force_one_this_time_long
Copiar
Incorporar
timeline
title England's History Timeline
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
Copiar
Incorporar
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Bullet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
Estilo dos períodos e eventos
Como mencionado, cada seção tem um esquema de cores, e cada período e evento sob cada seção segue o mesmo esquema de cores.
Definir o estilo dos períodos individualmente, ou seja, cada período (e seus eventos correspondentes) tem seu próprio esquema de cores.
Copiar
Incorporar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Observação: sem definir nenhuma seção, cada período e seus eventos correspondentes têm seu próprio esquema de cores.
Esquema de cores personalizado
Você pode personalizar o esquema de cores com as variáveis de tema cScale0 a cScale11, o que alterará a cor de fundo. O Mermaid permite definir cores exclusivas para até 12 seções, em que a variável cScale0 controla a cor da primeira seção ou período, a variável cScale1 controla a cor da segunda seção, e assim por diante. Se houver mais de 12 seções, o esquema de cores começará a se repetir ciclicamente.
Se você também quiser alterar a cor de primeiro plano de uma seção, pode usar a variável de tema correspondente às variáveis cScaleLabel0 a cScaleLabel11.
Observação: os valores padrão dessas variáveis de tema são obtidos do tema selecionado. Se você quiser sobrescrever os valores padrão, pode usar a sintaxe initialize para adicionar valores de variáveis de tema personalizados.
Exemplo:
Agora vamos sobrescrever os valores padrão das variáveis cScale0 a cScale2:
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Tema
O Mermaid oferece suporte a muitos temas predefinidos que você pode usar para encontrar um tema adequado para você. Nota: você pode, na prática, sobrescrever as variáveis de um tema existente para criar o seu próprio tema personalizado.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Observação: para alterar o tema, você pode usar a sintaxe initialize.
Tema base
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'base'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Tema floresta
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'forest'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Tema escuro
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'dark'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Tema padrão
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'default'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Tema neutro
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'neutral'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
