Časová osa
Časová osa je diagram sloužící k znázornění událostí, dat nebo časových období. Obvykle se vykresluje graficky pro zobrazení plynutí času a obvykle je uspořádán chronologicky. Základní časová osa uvádí události v chronologickém pořadí, obvykle s daty jako značkami. Časovou osu lze použít také k zobrazení vztahů mezi událostmi, například vztahů mezi událostmi v životě člověka.
Kopírovat
Vložení
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntaxe
Syntaxe pro vytvoření časové osy je jednoduchá. Je třeba začít syntaxí timeline, aby mermaid věděl, že chcete vytvořit časovou osu.
Poté můžete časové ose přidat název. To se provede přidáním syntaxe title následované textem názvu.
Poté přidejte data časové osy, která vždy začínají časovým obdobím, za nímž následuje dvojtečka a poté text události. Volitelně můžete přidat další dvojtečku a poté text události. Každé časové období tedy může mít jednu nebo více událostí.
Kopírovat
Vložení
{time period} : {event}
nebo
Kopírovat
Vložení
{time period} : {event} : {event}
nebo
Kopírovat
Vložení
{time period} : {event}
: {event}
: {event}
Poznámka: časová období a události jsou jednoduché texty, neomezují se na čísla.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopírovat
Vložení
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Tímto způsobem můžeme pomocí textového přehledu generovat časovou osu. Pořadí časových období a událostí je důležité, protože se použije pro vykreslení časové osy. První časové období bude umístěno na levou stranu časové osy a poslední časové období na pravou stranu časové osy.
Pokud ve stejném časovém období nastane více událostí, první událost bude v horní části daného časového období a poslední událost ve spodní části daného časového období.
Seskupení časových období
Časová období můžete seskupit do různých částí/epoch. Lze toho dosáhnout přidáním syntaxe section následované názvem části.
Všechna následující časová období budou umístěna do této části, dokud není definována nová část.
Pokud není definována žádná část, všechna časová období budou umístěna do výchozí části.
mermaid.grammar_timeline_default_see_one_some_part
Kopírovat
Vložení
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
Jak můžete vidět, časová období jsou umístěna v jednotlivých částech a jednotlivé části jsou uspořádány v pořadí, v jakém byly definovány.
Všechna časová období a události v rámci určité části se řídí podobným barevným schématem; to usnadňuje vidět vztahy mezi časovými obdobími a událostmi.
Zalomení dlouhých časových období nebo dlouhých událostí
Ve výchozím nastavení se text časových období a událostí automaticky zalomí, pokud je příliš dlouhý.
Zalomení můžete také vynutit.
mermaid.grammar_timeline_force_one_this_time_long
Kopírovat
Vložení
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.
Kopírovat
Vložení
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
Styl časových období a událostí
Jak již bylo uvedeno, každá část má barevné schéma a každé časové období a událost v rámci každé části se řídí stejným barevným schématem.
Samostatné nastavení stylu časového období, tj. každé časové období (a jeho příslušné události) má vlastní barevné schéma.
Kopírovat
Vložení
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Poznámka: není definována žádná část, každé časové období a jeho příslušné události mají vlastní barevné schéma.
Vlastní barevné schéma
Barevné schéma můžete přizpůsobit pomocí proměnných tématu cScale0 až cScale11, což změní barvu pozadí. Mermaid umožňuje nastavit jedinečné barvy až pro 12 částí, přičemž proměnná cScale0 řídí barvu první části nebo časového období, proměnná cScale1 barvu druhé části atd. Pokud částí je více než 12, barevné schéma se začne opakovat.
Pokud chcete změnit také barvu popředí určité části, můžete to provést pomocí proměnných tématu odpovídajících proměnným cScaleLabel0 až cScaleLabel11.
Poznámka: výchozí hodnoty těchto proměnných tématu se přebírají z vybraného tématu. Pokud chcete přepsat výchozí hodnoty, můžete pomocí syntaxe initialize přidat vlastní hodnoty proměnných tématu.
Příklad:
Nyní přepišme výchozí hodnoty proměnných cScale0 až cScale2:
Kopírovat
Vložení
---
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
Téma
Mermaid podporuje mnoho předdefinovaných témat, která můžete použít k nalezení vhodného tématu. Poznámka: můžete skutečně přepsat proměnné existujícího tématu a vytvořit si vlastní téma.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Poznámka: chcete-li změnit téma, můžete použít syntaxi initialize.
Základní téma
Kopírovat
Vložení
---
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
Lesní téma
Kopírovat
Vložení
---
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
Tmavé téma
Kopírovat
Vložení
---
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
Výchozí téma
Kopírovat
Vložení
---
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
Neutrální téma
Kopírovat
Vložení
---
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
