Garis Masa
Garis masa ialah sejenis carta yang digunakan untuk menerangkan peristiwa, tarikh atau tempoh masa. Ia biasanya dipaparkan secara grafik untuk menunjukkan perjalanan masa, dan biasanya disusun mengikut urutan kronologi. Garis masa asas menyenaraikan peristiwa mengikut urutan kronologi, biasanya menggunakan tarikh sebagai penanda. Garis masa juga boleh digunakan untuk memaparkan hubungan antara peristiwa, contohnya hubungan antara peristiwa kehidupan seseorang.
Salin
Benamkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Sintaks
Sintaks penciptaan garis masa sangat mudah. Ia perlu bermula dengan sintaks timeline, untuk memberitahu mermaid bahawa anda ingin mencipta garis masa.
Selepas itu, tajuk boleh ditambah pada garis masa. Ini dilakukan dengan menambah sintaks title, diikuti dengan teks tajuk.
Kemudian tambah data garis masa, sentiasa bermula dengan satu tempoh masa, diikuti dengan titik bertindih, kemudian teks peristiwa. Anda boleh memilih untuk menambah satu lagi titik bertindih, kemudian teks peristiwa. Oleh itu, setiap tempoh masa boleh mempunyai satu atau lebih peristiwa.
Salin
Benamkan
{time period} : {event}
atau
Salin
Benamkan
{time period} : {event} : {event}
atau
Salin
Benamkan
{time period} : {event}
: {event}
: {event}
Nota: tempoh masa dan peristiwa kedua-duanya ialah teks mudah, tidak terhad kepada nombor.
mermaid.grammar_timeline_note_see_up_exemport_s
Salin
Benamkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Dengan cara ini kita boleh menggunakan rangka teks untuk menjana garis masa. Susunan tempoh masa dan peristiwa adalah penting, kerana ia akan digunakan untuk melukis garis masa. Tempoh masa pertama akan diletakkan di sebelah kiri garis masa, dan tempoh masa terakhir akan diletakkan di sebelah kanan garis masa.
Apabila berbilang peristiwa berlaku dalam tempoh masa yang sama, peristiwa pertama akan berada di bahagian atas tempoh masa tertentu itu, manakala peristiwa terakhir akan diletakkan di bahagian bawah tempoh masa tertentu itu.
Kumpulkan tempoh masa
Anda boleh mengumpulkan tempoh masa kepada bahagian/era yang berbeza. Ini boleh dicapai dengan menambah sintaks section, diikuti dengan nama bahagian.
Semua tempoh masa seterusnya akan diletakkan dalam bahagian ini, sehingga bahagian baharu ditakrifkan.
Jika tiada bahagian ditakrifkan, semua tempoh masa akan diletakkan dalam bahagian lalai.
mermaid.grammar_timeline_default_see_one_some_part
Salin
Benamkan
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
Seperti yang anda lihat, tempoh masa diletakkan dalam bahagian masing-masing, dan bahagian disusun mengikut susunan ia ditakrifkan.
Semua tempoh masa dan peristiwa di bawah bahagian yang ditentukan mengikuti skema warna yang serupa; ini dilakukan untuk memudahkan melihat hubungan antara tempoh masa dan peristiwa.
Pembalutan tempoh masa atau peristiwa yang panjang
Secara lalai, jika teks tempoh masa dan peristiwa terlalu panjang, ia akan dibalut secara automatik.
Anda juga boleh menggunakan untuk memaksa pembalutan baris.
mermaid.grammar_timeline_force_one_this_time_long
Salin
Benamkan
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.
Salin
Benamkan
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
Gaya tempoh masa dan peristiwa
Seperti yang dinyatakan sebelum ini, setiap bahagian mempunyai satu skema warna, dan setiap tempoh masa dan peristiwa di bawah setiap bahagian mengikuti skema warna yang sama.
Menetapkan gaya tempoh masa secara berasingan, iaitu setiap tempoh masa (dan peristiwa yang sepadan) mempunyai skema warna tersendiri.
Salin
Benamkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Nota: tiada bahagian ditakrifkan, setiap tempoh masa dan peristiwa yang sepadan mempunyai skema warna tersendiri.
Skema warna tersuai
Anda boleh menggunakan pemboleh ubah tema cScale0 hingga cScale11 untuk menyesuaikan skema warna, ini akan menukar warna latar belakang. Mermaid membenarkan anda menetapkan warna unik untuk sehingga 12 bahagian, di mana pemboleh ubah cScale0 mengawal warna bahagian atau tempoh masa pertama, pemboleh ubah cScale1 mengawal warna bahagian kedua, dan seterusnya. Jika bahagian melebihi 12, skema warna akan mula berulang.
Jika anda juga ingin menukar warna latar depan sesuatu bahagian, anda boleh menggunakan pemboleh ubah tema yang sepadan dengan pemboleh ubah cScaleLabel0 hingga cScaleLabel11.
Nota: nilai lalai pemboleh ubah tema ini diambil daripada tema yang dipilih. Jika anda ingin mengatasi nilai lalai, anda boleh menggunakan sintaks initialize untuk menambah nilai pemboleh ubah tema tersuai.
Contoh:
Sekarang mari kita atasi nilai lalai pemboleh ubah cScale0 hingga cScale2:
Salin
Benamkan
---
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 menyokong banyak tema pratakrif, anda boleh menggunakannya untuk memadankan tema yang sesuai untuk anda. Catatan: anda sebenarnya boleh mengatasi pemboleh ubah tema sedia ada untuk mencipta tema tersuai anda sendiri.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Nota: untuk menukar tema, anda boleh menggunakan sintaks initialize.
Tema asas
Salin
Benamkan
---
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
Tema hutan
Salin
Benamkan
---
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
Tema gelap
Salin
Benamkan
---
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
Tema lalai
Salin
Benamkan
---
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
Tema neutral
Salin
Benamkan
---
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
