Tidslinje
En tidslinje är ett diagram för att illustrera händelser, datum eller tidsperioder. Det renderas vanligtvis grafiskt för att visa tidens gång och organiseras oftast kronologiskt. En grundläggande tidslinje listar händelser i kronologisk ordning, vanligtvis med datum som markörer. En tidslinje kan också användas för att visa relationer mellan händelser, till exempel relationer mellan händelser i en persons liv.
Kopiera
Bädda in
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntax
Syntaxen för att skapa en tidslinje är enkel. Den måste börja med timeline -syntaxen så att mermaid vet att du vill skapa en tidslinje.
Därefter kan du lägga till en titel för tidslinjen. Detta görs genom att lägga till title -syntaxen följt av titeltexten.
Lägg sedan till tidslinjedata, som alltid börjar med en tidsperiod följt av ett kolon och sedan händelsens text. Du kan välja att lägga till ytterligare ett kolon följt av händelsens text. Därför kan varje tidsperiod ha en eller flera händelser.
Kopiera
Bädda in
{time period} : {event}
eller
Kopiera
Bädda in
{time period} : {event} : {event}
eller
Kopiera
Bädda in
{time period} : {event}
: {event}
: {event}
Obs: tidsperioder och händelser är enkel text och är inte begränsade till siffror.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopiera
Bädda in
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
På detta sätt kan vi använda en textdisposition för att generera en tidslinje. Ordningen för tidsperioder och händelser är viktig eftersom den används för att rita tidslinjen. Den första tidsperioden placeras till vänster på tidslinjen och den sista tidsperioden placeras till höger på tidslinjen.
När flera händelser inträffar under samma tidsperiod placeras den första händelsen högst upp i den specifika tidsperioden och den sista händelsen längst ned i den specifika tidsperioden.
Gruppera tidsperioder
Du kan gruppera tidsperioder i olika sektioner/epoker. Detta kan göras genom att lägga till section -syntaxen följt av sektionsnamnet.
Alla efterföljande tidsperioder placeras i denna sektion tills en ny sektion definieras.
Om ingen sektion definieras placeras alla tidsperioder i standardsektionen.
mermaid.grammar_timeline_default_see_one_some_part
Kopiera
Bädda in
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 placeras tidsperioder i olika sektioner, och sektionerna ordnas i den ordning de definieras.
Alla tidsperioder och händelser under en angiven sektion följer ett liknande färgschema; detta görs för att det ska vara lättare att se relationerna mellan tidsperioder och händelser.
Radbrytning för långa tidsperioder eller långa händelser
Som standard radbryts texten automatiskt om tidsperiodens och händelsens text är för lång.
Du kan också använda för att tvinga fram en radbrytning.
mermaid.grammar_timeline_force_one_this_time_long
Kopiera
Bädda in
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.
Kopiera
Bädda in
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 för tidsperioder och händelser
Som nämnts tidigare har varje sektion ett färgschema, och varje tidsperiod och händelse under en sektion följer samma färgschema.
Ange stil för tidsperioder individuellt, det vill säga varje tidsperiod (och dess motsvarande händelser) har sitt eget färgschema.
Kopiera
Bädda in
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Obs: ingen sektion är definierad, och varje tidsperiod och dess motsvarande händelser har sitt eget färgschema.
Anpassat färgschema
Du kan anpassa färgschemat med temavariablerna cScale0 till cScale11, vilket ändrar bakgrundsfärgen. Mermaid låter dig ange unika färger för upp till 12 sektioner, där variabeln cScale0 styr färgen för den första sektionen eller tidsperioden, variabeln cScale1 styr färgen för den andra sektionen, och så vidare. Om sektionerna överstiger 12 börjar färgschemat att upprepas cykliskt.
Om du också vill ändra förgrundsfärgen för en sektion kan du använda motsvarande temavariabler cScaleLabel0 till cScaleLabel11.
Obs: standardvärdena för dessa temavariabler hämtas från det valda temat. Om du vill åsidosätta standardvärdena kan du använda initialize -syntaxen för att lägga till anpassade temavariabelvärden.
Exempel:
Låt oss nu åsidosätta standardvärdena för variablerna cScale0 till cScale2:
Kopiera
Bädda in
---
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öder många fördefinierade teman som du kan använda för att matcha ett tema som passar dig. Anmärkning: du kan faktiskt åsidosätta variablerna i ett befintligt tema för att skapa ditt eget anpassade tema.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Obs: för att ändra temat kan du använda initialize -syntaxen.
Bastema
Kopiera
Bädda in
---
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
Skogstema
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
