Timeline
La timeline è un tipo di diagramma che illustra eventi, date o periodi di tempo. Di solito viene renderizzata graficamente per mostrare il passare del tempo ed è organizzata in ordine cronologico. La timeline di base elenca gli eventi in ordine cronologico, di solito usando le date come marcatori. La timeline può essere usata anche per mostrare le relazioni tra gli eventi, ad esempio le relazioni tra gli eventi della vita di una persona.
Copia
Incorpora
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Sintassi
La sintassi per creare una timeline è semplice. Devi iniziare con la sintassi timeline, per far sapere a Mermaid che vuoi creare una timeline.
Successivamente, puoi aggiungere un titolo alla timeline. Questo si fa aggiungendo la sintassi title, seguita dal testo del titolo.
Poi aggiungi i dati della timeline, che iniziano sempre con un periodo di tempo, seguito da due punti e poi dal testo dell'evento. Puoi scegliere di aggiungere un altro paio di punti, seguito dal testo dell'evento. Pertanto, ogni periodo di tempo può avere uno o più eventi.
Copia
Incorpora
{time period} : {event}
oppure
Copia
Incorpora
{time period} : {event} : {event}
oppure
Copia
Incorpora
{time period} : {event}
: {event}
: {event}
Nota: periodo di tempo ed evento sono entrambi semplice testo e non sono limitati ai numeri.
mermaid.grammar_timeline_note_see_up_exemport_s
Copia
Incorpora
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
In questo modo possiamo usare uno schema testuale per generare una timeline. L'ordine dei periodi di tempo e degli eventi è importante, perché viene usato per disegnare la timeline. Il primo periodo di tempo sarà posizionato a sinistra della timeline, l'ultimo periodo di tempo sarà posizionato a destra della timeline.
Quando nello stesso periodo di tempo si verificano più eventi, il primo evento sarà nella parte superiore di quel periodo, mentre l'ultimo evento sarà posizionato nella parte inferiore di quel periodo.
Raggruppare i periodi di tempo
Puoi raggruppare i periodi di tempo in sezioni/epoche diverse. Questo si può ottenere aggiungendo la sintassi section, seguita dal nome della sezione.
Tutti i periodi di tempo successivi saranno collocati in questa sezione, finché non viene definita una nuova sezione.
Se non viene definita alcuna sezione, tutti i periodi di tempo saranno collocati nella sezione predefinita.
mermaid.grammar_timeline_default_see_one_some_part
Copia
Incorpora
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
Come puoi vedere, i periodi di tempo sono collocati nelle sezioni, e le sezioni sono disposte nell'ordine in cui sono state definite.
Tutti i periodi di tempo e gli eventi sotto una determinata sezione seguono una combinazione di colori simile; questo viene fatto per rendere più facile vedere le relazioni tra i periodi di tempo e gli eventi.
Andata a capo di periodi di tempo o eventi lunghi
Per impostazione predefinita, se il testo di un periodo di tempo o di un evento è troppo lungo, va automaticamente a capo.
Puoi anche forzare l'andata a capo.
mermaid.grammar_timeline_force_one_this_time_long
Copia
Incorpora
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.
Copia
Incorpora
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
Stile dei periodi di tempo e degli eventi
Come detto in precedenza, ogni sezione ha una combinazione di colori, e ogni periodo di tempo ed evento sotto ciascuna sezione segue la stessa combinazione di colori.
Impostare lo stile di un periodo di tempo singolarmente, cioè ogni periodo di tempo (e il suo evento corrispondente) ha una propria combinazione di colori.
Copia
Incorpora
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Nota: non essendo stata definita alcuna sezione, ogni periodo di tempo e il suo evento corrispondente hanno una propria combinazione di colori.
Combinazione di colori personalizzata
Puoi personalizzare la combinazione di colori usando le variabili del tema da cScale0 a cScale11; questo cambierà il colore di sfondo. Mermaid ti consente di impostare colori unici per un massimo di 12 sezioni, dove la variabile cScale0 controlla il colore della prima sezione o del primo periodo di tempo, la variabile cScale1 controlla il colore della seconda sezione, e così via. Se le sezioni superano 12, la combinazione di colori inizia a ripetersi in modo ciclico.
Se vuoi anche cambiare il colore di primo piano di una sezione, puoi farlo usando la variabile del tema corrispondente alle variabili da cScaleLabel0 a cScaleLabel11.
Nota: i valori predefiniti di queste variabili del tema sono presi dal tema selezionato. Se vuoi sovrascrivere i valori predefiniti, puoi usare la sintassi initialize per aggiungere valori personalizzati alle variabili del tema.
Esempio:
Ora sovrascriviamo i valori predefiniti delle variabili da cScale0 a cScale2:
Copia
Incorpora
---
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
Mermaid supporta molti temi predefiniti, che puoi usare per trovare il tema adatto a te. Nota: puoi effettivamente sovrascrivere le variabili di un tema esistente per creare il tuo tema personalizzato.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Nota: per cambiare tema, puoi usare la sintassi initialize.
Tema di base
Copia
Incorpora
---
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 foresta
Copia
Incorpora
---
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 scuro
Copia
Incorpora
---
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 predefinito
Copia
Incorpora
---
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
Copia
Incorpora
---
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
