Tijdlijn
Een tijdlijn is een diagram dat wordt gebruikt om gebeurtenissen, datums of tijdsperioden te illustreren. Het wordt meestal grafisch gerenderd om het verstrijken van de tijd weer te geven en is doorgaans chronologisch georganiseerd. Een basistijdlijn somt gebeurtenissen chronologisch op, meestal met datums als markeringen. Een tijdlijn kan ook worden gebruikt om de relaties tussen gebeurtenissen weer te geven, bijvoorbeeld de relaties tussen gebeurtenissen in het leven van een persoon.
Kopiëren
Insluiten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntaxis
De syntaxis voor het maken van een tijdlijn is eenvoudig. Je moet beginnen met de syntaxis timeline, zodat mermaid weet dat je een tijdlijn wilt maken.
Daarna kun je een titel aan de tijdlijn toevoegen. Dit gebeurt door de syntaxis title toe te voegen, gevolgd door de titeltekst.
Voeg vervolgens de tijdlijngegevens toe; deze beginnen altijd met een tijdsperiode, gevolgd door een dubbele punt en dan de tekst van de gebeurtenis. Je kunt optioneel nog een dubbele punt toevoegen, gevolgd door de tekst van de gebeurtenis. Zo kan elke tijdsperiode een of meer gebeurtenissen hebben.
Kopiëren
Insluiten
{time period} : {event}
of
Kopiëren
Insluiten
{time period} : {event} : {event}
of
Kopiëren
Insluiten
{time period} : {event}
: {event}
: {event}
Let op: tijdsperioden en gebeurtenissen zijn eenvoudige tekst en beperken zich niet tot getallen.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopiëren
Insluiten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Zo kunnen we een tekstoutline gebruiken om een tijdlijn te genereren. De volgorde van tijdsperioden en gebeurtenissen is belangrijk, omdat deze wordt gebruikt om de tijdlijn te tekenen. De eerste tijdsperiode wordt aan de linkerkant van de tijdlijn geplaatst en de laatste tijdsperiode wordt aan de rechterkant van de tijdlijn geplaatst.
Wanneer meerdere gebeurtenissen in dezelfde tijdsperiode plaatsvinden, staat de eerste gebeurtenis bovenaan die specifieke tijdsperiode en wordt de laatste gebeurtenis onderaan die specifieke tijdsperiode geplaatst.
Tijdsperioden groeperen
Je kunt tijdsperioden groeperen in verschillende secties/tijdperken. Dit kan door de syntaxis section toe te voegen, gevolgd door de sectienaam.
Alle volgende tijdsperioden worden in deze sectie geplaatst totdat een nieuwe sectie wordt gedefinieerd.
Als er geen sectie is gedefinieerd, worden alle tijdsperioden in de standaardsectie geplaatst.
mermaid.grammar_timeline_default_see_one_some_part
Kopiëren
Insluiten
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
Zoals je kunt zien, worden tijdsperioden in de verschillende secties geplaatst, en de secties worden geordend op de volgorde waarin ze zijn gedefinieerd.
Alle tijdsperioden en gebeurtenissen onder een opgegeven sectie volgen een vergelijkbaar kleurenschema; dit is gedaan om de relatie tussen tijdsperioden en gebeurtenissen gemakkelijker te kunnen zien.
Regeleinden bij lange tijdsperioden of gebeurtenissen
Standaard wordt de tekst van tijdsperioden en gebeurtenissen automatisch afgebroken als deze te lang is.
Je kunt ook een geforceerde regeleinde gebruiken.
mermaid.grammar_timeline_force_one_this_time_long
Kopiëren
Insluiten
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ëren
Insluiten
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
Stijl van tijdsperioden en gebeurtenissen
Zoals eerder vermeld heeft elke sectie een kleurenschema, en elke tijdsperiode en gebeurtenis onder een sectie volgt hetzelfde kleurenschema.
De stijl van tijdsperioden afzonderlijk instellen, dat wil zeggen dat elke tijdsperiode (en de bijbehorende gebeurtenissen) een eigen kleurenschema heeft.
Kopiëren
Insluiten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Let op: er is geen sectie gedefinieerd, dus elke tijdsperiode en de bijbehorende gebeurtenissen hebben een eigen kleurenschema.
Aangepast kleurenschema
Je kunt het kleurenschema aanpassen met de themavariabelen cScale0 tot cScale11, wat de achtergrondkleur wijzigt. Mermaid staat toe om unieke kleuren voor maximaal 12 secties in te stellen, waarbij de variabele cScale0 de kleur van de eerste sectie of tijdsperiode bepaalt, de variabele cScale1 de kleur van de tweede sectie, enzovoort. Als er meer dan 12 secties zijn, begint het kleurenschema te herhalen.
Als je ook de voorgrondkleur van een sectie wilt wijzigen, kun je de bijbehorende themavariabelen cScaleLabel0 tot cScaleLabel11 gebruiken.
Let op: de standaardwaarden van deze themavariabelen zijn afkomstig van het gekozen thema. Als je de standaardwaarden wilt overschrijven, kun je de syntaxis initialize gebruiken om aangepaste themavariabelewaarden toe te voegen.
Voorbeeld:
Laten we nu de standaardwaarden van de variabelen cScale0 tot cScale2 overschrijven:
Kopiëren
Insluiten
---
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
Thema
Mermaid ondersteunt veel voorgedefinieerde thema's die je kunt gebruiken om een thema te vinden dat bij je past. Opmerking: je kunt in feite de variabelen van een bestaand thema overschrijven om je eigen aangepaste thema te maken.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Let op: om het thema te wijzigen kun je de syntaxis initialize gebruiken.
Basisthema
Kopiëren
Insluiten
---
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
Bosthema
Kopiëren
Insluiten
---
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
Donker thema
Kopiëren
Insluiten
---
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
Standaardthema
Kopiëren
Insluiten
---
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
Neutraal thema
Kopiëren
Insluiten
---
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
