Tidslinje
En tidslinje er et diagram, der bruges til at illustrere hændelser, datoer eller tidsperioder. Det rendres typisk grafisk for at vise tidens gang og organiseres normalt i kronologisk rækkefølge. En grundlæggende tidslinje oplister hændelser i kronologisk rækkefølge, ofte med datoer som markeringer. En tidslinje kan også bruges til at vise relationer mellem hændelser, f.eks. mellem begivenheder i en persons liv.
Kopiér
Integrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntaks
Syntaksen til at oprette en tidslinje er enkel. Du skal begynde med timeline-syntaksen, så mermaid ved, at du vil oprette en tidslinje.
Bagefter kan du tilføje en titel til tidslinjen. Dette gøres ved at tilføje title-syntaksen efterfulgt af titelteksten.
Derefter tilføjer du tidslinjedata, som altid begynder med en tidsperiode efterfulgt af et kolon og derefter hændelsens tekst. Du kan vælge at tilføje endnu et kolon efterfulgt af hændelsens tekst. Derfor kan hver tidsperiode have en eller flere hændelser.
Kopiér
Integrer
{time period} : {event}
eller
Kopiér
Integrer
{time period} : {event} : {event}
eller
Kopiér
Integrer
{time period} : {event}
: {event}
: {event}
Bemærk: Tidsperioder og hændelser er simpel tekst og er ikke begrænset til tal.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopiér
Integrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
På denne måde kan vi bruge en tekstdisposition til at generere en tidslinje. Rækkefølgen af tidsperioder og hændelser er vigtig, fordi den bruges til at tegne tidslinjen. Den første tidsperiode placeres i venstre side af tidslinjen, og den sidste tidsperiode placeres i højre side af tidslinjen.
Når flere hændelser finder sted i samme tidsperiode, placeres den første hændelse øverst i den pågældende tidsperiode, og den sidste hændelse placeres nederst i den pågældende tidsperiode.
Gruppering af tidsperioder
Du kan gruppere tidsperioder i forskellige sektioner/epoker. Dette kan gøres ved at tilføje section-syntaksen efterfulgt af sektionsnavnet.
Alle efterfølgende tidsperioder placeres i denne sektion, indtil der defineres en ny sektion.
Hvis der ikke er defineret nogen sektion, placeres alle tidsperioder i standardsektionen.
mermaid.grammar_timeline_default_see_one_some_part
Kopiér
Integrer
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
Som du kan se, placeres tidsperioderne i de enkelte sektioner, og sektionerne ordnes i den rækkefølge, de blev defineret i.
Alle tidsperioder og hændelser under en given sektion følger en lignende farveskala; dette gøres for lettere at kunne se sammenhængen mellem tidsperioder og hændelser.
Ombrydning af lange tidsperioder eller lange hændelser
Som standard ombrydes teksten automatisk, hvis teksten for en tidsperiode eller hændelse er for lang.
Du kan også fremtvinge et linjeskift.
mermaid.grammar_timeline_force_one_this_time_long
Kopiér
Integrer
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.
Kopiér
Integrer
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
Stil for tidsperioder og hændelser
Som tidligere nævnt har hver sektion en farveskala, og hver tidsperiode og hændelse under en sektion følger den samme farveskala.
Style hver tidsperiode individuelt, dvs. hver tidsperiode (og dens tilhørende hændelser) har sin egen farveskala.
Kopiér
Integrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Bemærk: Der er ikke defineret nogen sektion, og hver tidsperiode og dens tilhørende hændelser har sin egen farveskala.
Brugerdefineret farveskala
Du kan tilpasse farveskalaen med temavariablerne cScale0 til cScale11, hvilket ændrer baggrundsfarven. Mermaid giver dig mulighed for at angive unikke farver for op til 12 sektioner, hvor variablen cScale0 styrer farven på den første sektion eller tidsperiode, variablen cScale1 styrer farven på den anden sektion og så videre. Hvis der er mere end 12 sektioner, begynder farveskalaen at gentage sig cyklisk.
Hvis du også vil ændre forgrundsfarven for en sektion, kan du gøre det med de temavariabler, der svarer til variablerne cScaleLabel0 til cScaleLabel11.
Bemærk: Standardværdierne for disse temavariabler hentes fra det valgte tema. Hvis du vil tilsidesætte standardværdierne, kan du bruge initialize-syntaksen til at tilføje brugerdefinerede temavariabelværdier.
Eksempel:
Lad os nu tilsidesætte standardværdierne for variablerne cScale0 til cScale2:
Kopiér
Integrer
---
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 understøtter mange foruddefinerede temaer, som du kan bruge til at finde et tema, der passer til dig. Bemærk: Du kan faktisk tilsidesætte variablerne i et eksisterende tema for at oprette dit eget brugerdefinerede tema.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Bemærk: For at ændre temaet kan du bruge initialize-syntaksen.
Grundtema
Kopiér
Integrer
---
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
Skotema
Kopiér
Integrer
---
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
Mørkt tema
Kopiér
Integrer
---
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
Standardtema
Kopiér
Integrer
---
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
Neutralt tema
Kopiér
Integrer
---
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
