Tidslinje
En tidslinje er et diagram som brukes til å illustrere hendelser, datoer eller tidsperioder. Det rendres vanligvis grafisk for å vise tidens gang, og organiseres vanligvis kronologisk. En grunnleggende tidslinje lister opp hendelser kronologisk, vanligvis med datoer som markører. Tidslinjen kan også brukes til å vise forholdet mellom hendelser, for eksempel forholdet mellom hendelser i en persons liv.
Kopier
Bygg inn
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntaks
Syntaksen for å opprette en tidslinje er enkel. Du må begynne med timeline -syntaksen for å la mermaid vite at du vil opprette en tidslinje.
Deretter kan du legge til en tittel på tidslinjen. Dette gjøres ved å legge til title -syntaksen etterfulgt av tittelteksten.
Deretter legger du til tidslinjedata, som alltid begynner med en tidsperiode, etterfulgt av et kolon og deretter tekst for hendelsen. Du kan velge å legge til enda et kolon, etterfulgt av tekst for hendelsen. Derfor kan hver tidsperiode ha én eller flere hendelser.
Kopier
Bygg inn
{time period} : {event}
eller
Kopier
Bygg inn
{time period} : {event} : {event}
eller
Kopier
Bygg inn
{time period} : {event}
: {event}
: {event}
Merk: tidsperioder og hendelser er enkel tekst og er ikke begrenset til tall.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopier
Bygg inn
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
På denne måten kan vi bruke et tekstomriss til å generere en tidslinje. Rekkefølgen av tidsperioder og hendelser er viktig, siden den brukes til å tegne tidslinjen. Den første tidsperioden plasseres på venstre side av tidslinjen, og den siste tidsperioden plasseres på høyre side av tidslinjen.
Når flere hendelser skjer i samme tidsperiode, plasseres den første hendelsen øverst i den bestemte tidsperioden, og den siste hendelsen nederst i den bestemte tidsperioden.
Grupper tidsperioder
Du kan gruppere tidsperioder i ulike seksjoner/epoker. Dette kan gjøres ved å legge til section -syntaksen etterfulgt av seksjonsnavnet.
Alle påfølgende tidsperioder plasseres i denne seksjonen, helt til en ny seksjon defineres.
Hvis ingen seksjon er definert, plasseres alle tidsperioder i standardseksjonen.
mermaid.grammar_timeline_default_see_one_some_part
Kopier
Bygg inn
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, plasseres tidsperiodene i de ulike seksjonene, og seksjonene ordnes i den rekkefølgen de er definert.
Alle tidsperioder og hendelser under en angitt seksjon følger et lignende fargevalg. Dette gjøres for at det skal være lettere å se forholdet mellom tidsperioder og hendelser.
Linjebryting for lange tidsperioder eller hendelser
Som standard brytes teksten automatisk hvis teksten for tidsperioden og hendelsen er for lang.
Du kan også tvinge linjebryting ved å bruke .
mermaid.grammar_timeline_force_one_this_time_long
Kopier
Bygg inn
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.
Kopier
Bygg inn
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 hendelser
Som nevnt tidligere har hver seksjon et fargevalg, og hver tidsperiode og hendelse under hver seksjon følger samme fargevalg.
Angi stilen for tidsperioder individuelt, dvs. at hver tidsperiode (og dens tilhørende hendelser) har sitt eget fargevalg.
Kopier
Bygg inn
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Merk: ingen seksjon er definert, og hver tidsperiode og dens tilhørende hendelser har sitt eget fargevalg.
Egendefinert fargevalg
Du kan tilpasse fargevalget med temavariablene cScale0 til cScale11 , noe som endrer bakgrunnsfargen. Mermaid lar deg angi unike farger for opptil 12 seksjoner, der variabelen cScale0 styrer fargen på den første seksjonen eller tidsperioden, variabelen cScale1 styrer fargen på den andre seksjonen, og så videre. Hvis det er mer enn 12 seksjoner, begynner fargevalget å gå i syklus.
Hvis du også vil endre forgrunnsfargen til en seksjon, kan du bruke temavariablene som tilsvarer variablene cScaleLabel0 til cScaleLabel11 .
Merk: standardverdiene for disse temavariablene hentes fra det valgte temaet. Hvis du vil overstyre standardverdiene, kan du bruke initialize -syntaksen til å legge til egendefinerte verdier for temavariablene.
Eksempel:
La oss nå overstyre standardverdiene for variablene cScale0 til cScale2 :
Kopier
Bygg inn
---
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 støtter mange forhåndsdefinerte temaer, som du kan bruke til å finne et tema som passer deg. Merknad: du kan faktisk overstyre variablene til et eksisterende tema for å lage ditt eget egendefinerte tema.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Merk: for å endre temaet kan du bruke initialize -syntaksen.
Grunnlagstema
Kopier
Bygg inn
---
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
Skogtema
Kopier
Bygg inn
---
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
Kopier
Bygg inn
---
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
Kopier
Bygg inn
---
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
Nøytralt tema
Kopier
Bygg inn
---
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
