Oś czasu
Oś czasu to diagram służący do ilustrowania zdarzeń, dat lub okresów. Jest zwykle renderowana graficznie, aby pokazać upływ czasu, i zwykle zorganizowana chronologicznie. Podstawowa oś czasu wymienia zdarzenia chronologicznie, zwykle używając dat jako znaczników. Oś czasu może być również używana do pokazywania relacji między zdarzeniami, na przykład relacji między zdarzeniami z życia danej osoby.
Kopiuj
Osadź
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Składnia
Składnia tworzenia osi czasu jest prosta. Należy zacząć od składni timeline, aby poinformować mermaid, że chcesz utworzyć oś czasu.
Następnie możesz dodać tytuł do osi czasu. Odbywa się to poprzez dodanie składni title, po której następuje tekst tytułu.
Następnie dodaj dane osi czasu; zawsze zaczynają się one od okresu, po którym następuje dwukropek, a następnie tekst zdarzenia. Opcjonalnie możesz dodać kolejny dwukropek, a następnie tekst zdarzenia. Dlatego każdy okres może mieć jedno lub więcej zdarzeń.
Kopiuj
Osadź
{time period} : {event}
lub
Kopiuj
Osadź
{time period} : {event} : {event}
lub
Kopiuj
Osadź
{time period} : {event}
: {event}
: {event}
Uwaga: okresy i zdarzenia to proste teksty, nieograniczone do liczb.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopiuj
Osadź
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
W ten sposób możemy wykorzystać konspekt tekstowy do wygenerowania osi czasu. Kolejność okresów i zdarzeń ma znaczenie, ponieważ zostanie użyta do narysowania osi czasu. Pierwszy okres zostanie umieszczony po lewej stronie osi czasu, a ostatni okres zostanie umieszczony po prawej stronie osi czasu.
Gdy w tym samym okresie występuje wiele zdarzeń, pierwsze zdarzenie znajdzie się na górze tego konkretnego okresu, a ostatnie zdarzenie zostanie umieszczone na dole tego konkretnego okresu.
Grupowanie okresów
Możesz grupować okresy w różne sekcje/epoki. Można to zrobić, dodając składnię section, po której następuje nazwa sekcji.
Wszystkie kolejne okresy będą umieszczane w tej sekcji, dopóki nie zostanie zdefiniowana nowa sekcja.
Jeśli nie zdefiniowano żadnej sekcji, wszystkie okresy zostaną umieszczone w sekcji domyślnej.
mermaid.grammar_timeline_default_see_one_some_part
Kopiuj
Osadź
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 widać, okresy są umieszczane w poszczególnych sekcjach, a sekcje są ułożone w kolejności, w jakiej zostały zdefiniowane.
Wszystkie okresy i zdarzenia w obrębie danej sekcji mają podobny schemat kolorów; zrobiono to, aby łatwiej było dostrzec relacje między okresami i zdarzeniami.
Zawijanie długich okresów lub długich zdarzeń
Domyślnie, jeśli tekst okresu i zdarzenia jest zbyt długi, zostanie automatycznie zawinięty.
Możesz także wymusić zawijanie, używając .
mermaid.grammar_timeline_force_one_this_time_long
Kopiuj
Osadź
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.
Kopiuj
Osadź
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 okresów i zdarzeń
Jak wspomniano wcześniej, każda sekcja ma schemat kolorów, a każdy okres i zdarzenie w obrębie sekcji mają ten sam schemat kolorów.
Ustawianie stylu okresów osobno, tj. każdy okres (i jego odpowiednie zdarzenia) ma własny schemat kolorów.
Kopiuj
Osadź
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Uwaga: nie zdefiniowano żadnej sekcji; każdy okres i jego odpowiednie zdarzenia mają własny schemat kolorów.
Niestandardowy schemat kolorów
Możesz dostosować schemat kolorów za pomocą zmiennych motywu cScale0 do cScale11, co zmieni kolor tła. Mermaid pozwala ustawić unikalne kolory dla maksymalnie 12 sekcji, gdzie zmienna cScale0 kontroluje kolor pierwszej sekcji lub okresu, zmienna cScale1 kontroluje kolor drugiej sekcji, i tak dalej. Jeśli sekcji jest więcej niż 12, schemat kolorów zacznie się powtarzać cyklicznie.
Jeśli chcesz także zmienić kolor pierwszego planu sekcji, możesz to zrobić za pomocą zmiennych motywu odpowiadających zmiennym cScaleLabel0 do cScaleLabel11.
Uwaga: domyślne wartości tych zmiennych motywu są pobierane z wybranego motywu. Jeśli chcesz nadpisać wartości domyślne, możesz użyć składni initialize, aby dodać niestandardowe wartości zmiennych motywu.
Przykład:
Teraz nadpiszmy domyślne wartości zmiennych cScale0 do cScale2:
Kopiuj
Osadź
---
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
Motyw
Mermaid obsługuje wiele predefiniowanych motywów, których możesz użyć, aby dopasować motyw odpowiedni dla siebie. Uwaga: możesz faktycznie nadpisać zmienne istniejącego motywu, aby utworzyć własny niestandardowy motyw.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Uwaga: aby zmienić motyw, możesz użyć składni initialize.
Motyw podstawowy
Kopiuj
Osadź
---
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
Motyw leśny
Kopiuj
Osadź
---
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
Motyw ciemny
Kopiuj
Osadź
---
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
Motyw domyślny
Kopiuj
Osadź
---
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
Motyw neutralny
Kopiuj
Osadź
---
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
