Linya ng panahon
Ang timeline ay isang chart na ginagamit upang ilarawan ang mga event, petsa, o time period. Karaniwang ini-render ito nang graphical upang ipakita ang paglipas ng oras, at karaniwang inaayos ayon sa chronological order. Ang basic na timeline ay naglilista ng mga event sa chronological order, kadalasang gumagamit ng petsa bilang marker. Ang timeline ay maaari ring gamitin upang ipakita ang relasyon sa pagitan ng mga event, halimbawa, ang relasyon sa pagitan ng mga kaganapan sa buhay ng isang tao.
Kopyahin
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntax
Ang syntax para sa paggawa ng timeline ay napakasimple. Kailangang magsimula sa timeline syntax, upang malaman ng mermaid na gusto mong gumawa ng timeline.
Pagkatapos, maaari kang magdagdag ng pamagat sa timeline. Ito ay ginagawa sa pamamagitan ng pagdaragdag ng title syntax, na sinusundan ng title text.
Pagkatapos ay idagdag ang timeline data, palaging nagsisimula sa isang time period, na sinusundan ng colon, pagkatapos ay ang teksto ng event. Maaari kang pumili na magdagdag ng isa pang colon, pagkatapos ay ang teksto ng event. Kaya, ang bawat time period ay maaaring may isa o higit pang event.
Kopyahin
Embed
{time period} : {event}
o
Kopyahin
Embed
{time period} : {event} : {event}
o
Kopyahin
Embed
{time period} : {event}
: {event}
: {event}
Tandaan: ang time period at event ay parehong simpleng teksto, hindi limitado sa numero.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopyahin
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Sa ganitong paraan, maaari nating gamitin ang text outline upang bumuo ng timeline. Mahalaga ang pagkakasunod-sunod ng time period at event, dahil gagamitin ito upang iguhit ang timeline. Ang unang time period ay ilalagay sa kaliwang bahagi ng timeline, at ang huling time period ay ilalagay sa kanang bahagi ng timeline.
Kapag maraming event ang nangyari sa parehong time period, ang unang event ay nasa tuktok ng partikular na time period, at ang huling event ay ilalagay sa ibaba ng partikular na time period.
Pagpapangkat ng time period
Maaari mong igrupo ang mga time period sa iba't ibang section/era. Ito ay maaaring gawin sa pamamagitan ng pagdaragdag ng section syntax, na sinusundan ng pangalan ng section.
Ang lahat ng kasunod na time period ay ilalagay sa section na ito, hanggang sa may tukuyin na bagong section.
Kung walang tinukoy na section, ang lahat ng time period ay ilalagay sa default na section.
mermaid.grammar_timeline_default_see_one_some_part
Kopyahin
Embed
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
Tulad ng nakikita mo, ang mga time period ay inilalagay sa iba't ibang section, at ang mga section ay nakaayos ayon sa pagkakasunod-sunod ng kanilang pagkakatukoy.
Ang lahat ng time period at event sa ilalim ng isang tinukoy na section ay sumusunod sa katulad na color scheme, ginagawa ito upang mas madaling makita ang relasyon sa pagitan ng time period at event.
Line break ng mahabang time period o mahabang event
Bilang default, kung ang teksto ng time period at event ay masyadong mahaba, awtomatiko itong mag-line break.
Maaari ka ring gumamit ng upang pilitin ang line break.
mermaid.grammar_timeline_force_one_this_time_long
Kopyahin
Embed
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.
Kopyahin
Embed
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
Estilo ng time period at event
Tulad ng nabanggit, ang bawat section ay may isang color scheme, ang bawat time period at event sa ilalim ng bawat section ay sumusunod sa parehong color scheme.
Hiwalay na pagtatakda ng estilo ng time period, ibig sabihin, ang bawat time period (at ang katumbas na event nito) ay may sariling color scheme.
Kopyahin
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Tandaan: walang tinukoy na section, ang bawat time period at ang katumbas na event nito ay may sariling color scheme.
Custom na color scheme
Maaari mong i-customize ang color scheme gamit ang cScale0 hanggang cScale11 tema variable, babaguhin nito ang background color. Pinapayagan ka ng Mermaid na magtakda ng natatanging kulay para sa hanggang 12 section, kung saan kinokontrol ng cScale0 variable ang kulay ng unang section o time period, kinokontrol ng cScale1 variable ang kulay ng ikalawang section, at iba pa. Kung ang mga section ay lumampas sa 12, magsisimulang umikot ang color scheme.
Kung gusto mo ring baguhin ang foreground color ng isang section, maaari mong gamitin ang tema variable na tumutugma sa cScaleLabel0 hanggang cScaleLabel11 variable.
Tandaan: ang default na halaga ng mga tema variable na ito ay kinuha mula sa piniling tema. Kung gusto mong i-override ang default, maaari mong gamitin ang initialize syntax upang magdagdag ng custom na tema variable value.
Halimbawa:
Ngayon, i-override natin ang default na halaga ng cScale0 hanggang cScale2 variable:
Kopyahin
Embed
---
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
Sinusuportahan ng Mermaid ang maraming predefined na tema, maaari mong gamitin ang mga ito upang tumugma sa temang nababagay sa iyo. Tandaan: maaari mo talagang i-override ang mga variable ng umiiral na tema upang gumawa ng sarili mong custom na tema.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Tandaan: upang baguhin ang tema, maaari mong gamitin ang initialize syntax.
Base na tema
Kopyahin
Embed
---
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
Forest na tema
Kopyahin
Embed
---
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
Dark na tema
Kopyahin
Embed
---
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
Default na tema
Kopyahin
Embed
---
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
Neutral na tema
Kopyahin
Embed
---
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
