Garis Waktu
Garis waktu adalah sejenis diagram yang digunakan untuk menjelaskan peristiwa, tanggal, atau periode. Biasanya dirender secara grafis untuk menunjukkan berlalunya waktu, dan umumnya diatur secara kronologis. Garis waktu dasar mencantumkan peristiwa secara kronologis, biasanya menggunakan tanggal sebagai penanda. Garis waktu juga dapat digunakan untuk menunjukkan hubungan antar peristiwa, misalnya hubungan antar peristiwa dalam kehidupan seseorang.
Salin
Sematkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Sintaks
Sintaks untuk membuat garis waktu sederhana. Perlu diawali dengan sintaks timeline, agar mermaid mengetahui bahwa Anda ingin membuat garis waktu.
Setelah itu, Anda dapat menambahkan judul pada garis waktu. Hal ini dilakukan dengan menambahkan sintaks title, diikuti teks judul.
Kemudian tambahkan data garis waktu, selalu dimulai dengan satu periode, diikuti titik dua, lalu teks peristiwa. Anda dapat memilih untuk menambahkan satu titik dua lagi, lalu teks peristiwa. Oleh karena itu, setiap periode dapat memiliki satu atau lebih peristiwa.
Salin
Sematkan
{time period} : {event}
atau
Salin
Sematkan
{time period} : {event} : {event}
atau
Salin
Sematkan
{time period} : {event}
: {event}
: {event}
Catatan: periode dan peristiwa keduanya adalah teks sederhana, tidak terbatas pada angka.
mermaid.grammar_timeline_note_see_up_exemport_s
Salin
Sematkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Dengan cara ini kita dapat memanfaatkan kerangka teks untuk menghasilkan garis waktu. Urutan periode dan peristiwa penting, karena akan digunakan untuk menggambar garis waktu. Periode pertama akan ditempatkan di sisi kiri garis waktu, dan periode terakhir akan ditempatkan di sisi kanan garis waktu.
Ketika beberapa peristiwa terjadi pada periode yang sama, peristiwa pertama akan berada di bagian atas periode tertentu tersebut, sedangkan peristiwa terakhir akan ditempatkan di bagian bawah periode tertentu tersebut.
Mengelompokkan periode
Anda dapat mengelompokkan periode ke dalam bagian/era yang berbeda. Hal ini dapat dilakukan dengan menambahkan sintaks section, diikuti nama bagian.
Semua periode berikutnya akan ditempatkan di bagian ini, hingga bagian baru didefinisikan.
Jika tidak ada bagian yang didefinisikan, semua periode akan ditempatkan di bagian bawaan.
mermaid.grammar_timeline_default_see_one_some_part
Salin
Sematkan
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 dapat Anda lihat, periode ditempatkan dalam berbagai bagian, dan bagian-bagian tersebut diatur sesuai urutan pendefinisiannya.
Semua periode dan peristiwa di bawah bagian yang ditentukan mengikuti skema warna yang serupa; hal ini dilakukan agar lebih mudah melihat hubungan antar periode dan peristiwa.
Pembungkusan periode atau peristiwa yang panjang
Secara bawaan, jika teks periode dan peristiwa terlalu panjang, maka akan dibungkus secara otomatis.
Anda juga dapat menggunakan untuk memaksa pembungkusan baris.
mermaid.grammar_timeline_force_one_this_time_long
Salin
Sematkan
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
Sematkan
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 periode dan peristiwa
Seperti yang disebutkan sebelumnya, setiap bagian memiliki skema warna, dan setiap periode dan peristiwa di bawah setiap bagian mengikuti skema warna yang sama.
Mengatur gaya periode secara terpisah, yaitu setiap periode (dan peristiwa yang sesuai) memiliki skema warnanya sendiri.
Salin
Sematkan
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Catatan: tidak ada bagian yang didefinisikan, setiap periode dan peristiwa yang sesuai memiliki skema warnanya sendiri.
Skema warna khusus
Anda dapat menyesuaikan skema warna menggunakan variabel tema cScale0 hingga cScale11, ini akan mengubah warna latar belakang. Mermaid memungkinkan Anda menetapkan warna unik untuk hingga 12 bagian, di mana variabel cScale0 mengontrol warna bagian atau periode pertama, variabel cScale1 mengontrol warna bagian kedua, dan seterusnya. Jika bagian melebihi 12, skema warna akan mulai berulang.
Jika Anda juga ingin mengubah warna latar depan suatu bagian, Anda dapat melakukannya menggunakan variabel tema yang sesuai dengan variabel cScaleLabel0 hingga cScaleLabel11.
Catatan: nilai bawaan variabel tema ini diambil dari tema yang dipilih. Jika Anda ingin menimpa nilai bawaan, Anda dapat menggunakan sintaks initialize untuk menambahkan nilai variabel tema khusus.
Contoh:
Sekarang mari kita timpa nilai bawaan variabel cScale0 hingga cScale2:
Salin
Sematkan
---
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 mendukung banyak tema yang telah ditentukan sebelumnya, yang dapat Anda gunakan untuk menemukan tema yang sesuai untuk Anda. Catatan: Anda sebenarnya dapat menimpa variabel tema yang ada untuk membuat tema khusus 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
Catatan: untuk mengubah tema, Anda dapat menggunakan sintaks initialize.
Tema dasar
Salin
Sematkan
---
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
Sematkan
---
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
Sematkan
---
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 bawaan
Salin
Sematkan
---
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 netral
Salin
Sematkan
---
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
