เส้นเวลา
ไทม์ไลน์เป็นแผนภาพที่ใช้อธิบายเหตุการณ์ วันที่ หรือช่วงเวลา มักเรนเดอร์เป็นกราฟิกเพื่อแสดงการผ่านไปของเวลา และมักจัดเรียงตามลำดับเวลา ไทม์ไลน์พื้นฐานจะแสดงเหตุการณ์ตามลำดับเวลา โดยมักใช้วันที่เป็นเครื่องหมาย ไทม์ไลน์ยังใช้แสดงความสัมพันธ์ระหว่างเหตุการณ์ได้ด้วย เช่น ความสัมพันธ์ระหว่างเหตุการณ์ในชีวิตของบุคคลหนึ่ง
คัดลอก
ฝัง
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
ไวยากรณ์
ไวยากรณ์สำหรับสร้างไทม์ไลน์นั้นเรียบง่าย ต้องขึ้นต้นด้วยไวยากรณ์ timeline เพื่อให้ mermaid รู้ว่าคุณต้องการสร้างไทม์ไลน์
หลังจากนั้น สามารถเพิ่มชื่อเรื่องให้กับไทม์ไลน์ได้ ทำได้โดยเพิ่มไวยากรณ์ title ตามด้วยข้อความชื่อเรื่อง
จากนั้นเพิ่มข้อมูลไทม์ไลน์ โดยเริ่มต้นด้วยช่วงเวลาหนึ่งเสมอ ตามด้วยเครื่องหมายทวิภาค แล้วจึงเป็นข้อความของเหตุการณ์ คุณสามารถเลือกเพิ่มเครื่องหมายทวิภาคอีกหนึ่งตัว แล้วตามด้วยข้อความของเหตุการณ์ ดังนั้น แต่ละช่วงเวลาสามารถมีเหตุการณ์ได้หนึ่งเหตุการณ์หรือมากกว่า
คัดลอก
ฝัง
{time period} : {event}
หรือ
คัดลอก
ฝัง
{time period} : {event} : {event}
หรือ
คัดลอก
ฝัง
{time period} : {event}
: {event}
: {event}
หมายเหตุ: ช่วงเวลาและเหตุการณ์เป็นเพียงข้อความธรรมดา ไม่จำกัดเฉพาะตัวเลข
mermaid.grammar_timeline_note_see_up_exemport_s
คัดลอก
ฝัง
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
ด้วยวิธีนี้ เราสามารถใช้โครงร่างข้อความเพื่อสร้างไทม์ไลน์ได้ ลำดับของช่วงเวลาและเหตุการณ์นั้นสำคัญ เพราะจะถูกใช้ในการวาดไทม์ไลน์ ช่วงเวลาแรกจะถูกวางไว้ทางด้านซ้ายของไทม์ไลน์ และช่วงเวลาสุดท้ายจะถูกวางไว้ทางด้านขวาของไทม์ไลน์
เมื่อช่วงเวลาเดียวกันมีเหตุการณ์หลายเหตุการณ์ เหตุการณ์แรกจะอยู่ที่ด้านบนของช่วงเวลานั้น ส่วนเหตุการณ์สุดท้ายจะอยู่ที่ด้านล่างของช่วงเวลานั้น
จัดกลุ่มช่วงเวลา
คุณสามารถจัดกลุ่มช่วงเวลาไว้ในส่วน/ยุคสมัยต่าง ๆ ได้ ทำได้โดยเพิ่มไวยากรณ์ section ตามด้วยชื่อส่วน
ช่วงเวลาที่ตามมาทั้งหมดจะถูกวางไว้ในส่วนนี้ จนกว่าจะกำหนดส่วนใหม่
หากไม่ได้กำหนดส่วนใด ช่วงเวลาทั้งหมดจะถูกวางไว้ในส่วนเริ่มต้น
mermaid.grammar_timeline_default_see_one_some_part
คัดลอก
ฝัง
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
ดังที่คุณเห็น ช่วงเวลาจะถูกวางไว้ในส่วนต่าง ๆ และส่วนต่าง ๆ จะเรียงตามลำดับที่ถูกกำหนด
ช่วงเวลาและเหตุการณ์ทั้งหมดภายใต้ส่วนที่ระบุจะปฏิบัติตามชุดสีที่คล้ายกัน ทำเช่นนี้เพื่อให้เห็นความสัมพันธ์ระหว่างช่วงเวลาและเหตุการณ์ได้ง่ายขึ้น
การขึ้นบรรทัดใหม่ของช่วงเวลาหรือเหตุการณ์ที่ยาว
โดยค่าเริ่มต้น หากข้อความของช่วงเวลาและเหตุการณ์ยาวเกินไป จะขึ้นบรรทัดใหม่โดยอัตโนมัติ
คุณยังสามารถใช้การบังคับขึ้นบรรทัดใหม่ได้
mermaid.grammar_timeline_force_one_this_time_long
คัดลอก
ฝัง
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.
คัดลอก
ฝัง
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
สไตล์ของช่วงเวลาและเหตุการณ์
ดังที่กล่าวไว้ก่อนหน้านี้ แต่ละส่วนมีชุดสีของตัวเอง โดยแต่ละช่วงเวลาและเหตุการณ์ภายใต้ส่วนนั้นจะปฏิบัติตามชุดสีเดียวกัน
กำหนดสไตล์ของช่วงเวลาแยกกัน นั่นคือแต่ละช่วงเวลา (และเหตุการณ์ที่สอดคล้องกัน) มีชุดสีของตัวเอง
คัดลอก
ฝัง
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
หมายเหตุ: ไม่ได้กำหนดส่วนใด แต่ละช่วงเวลาและเหตุการณ์ที่สอดคล้องกันมีชุดสีของตัวเอง
ชุดสีแบบกำหนดเอง
คุณสามารถใช้ตัวแปรธีม cScale0 ถึง cScale11 เพื่อกำหนดชุดสีเอง ซึ่งจะเปลี่ยนสีพื้นหลัง Mermaid อนุญาตให้คุณตั้งค่าสีเฉพาะได้สูงสุด 12 ส่วน โดยตัวแปร cScale0 ควบคุมสีของส่วนหรือช่วงเวลาแรก ตัวแปร cScale1 ควบคุมสีของส่วนที่สอง เป็นต้น หากส่วนเกิน 12 ส่วน ชุดสีจะเริ่มวนซ้ำ
หากคุณต้องการเปลี่ยนสีพื้นหน้าของส่วนใดด้วย สามารถใช้ตัวแปรธีมที่สอดคล้องกับตัวแปร cScaleLabel0 ถึง cScaleLabel11 ได้
หมายเหตุ: ค่าเริ่มต้นของตัวแปรธีมเหล่านี้มาจากธีมที่เลือก หากคุณต้องการเขียนทับค่าเริ่มต้น สามารถใช้ไวยากรณ์ initialize เพื่อเพิ่มค่าตัวแปรธีมแบบกำหนดเองได้
ตัวอย่าง:
ตอนนี้เรามาเขียนทับค่าเริ่มต้นของตัวแปร cScale0 ถึง cScale2 กัน:
คัดลอก
ฝัง
---
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
ธีม
Mermaid รองรับธีมที่กำหนดไว้ล่วงหน้าหลายธีม คุณสามารถใช้เพื่อจับคู่กับธีมที่เหมาะกับคุณได้ หมายเหตุ: คุณสามารถเขียนทับตัวแปรของธีมที่มีอยู่เพื่อสร้างธีมแบบกำหนดเองของคุณเองได้
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
หมายเหตุ: หากต้องการเปลี่ยนธีม คุณสามารถใช้ไวยากรณ์ initialize ได้
ธีมพื้นฐาน
คัดลอก
ฝัง
---
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
ธีมป่า
คัดลอก
ฝัง
---
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
ธีมมืด
คัดลอก
ฝัง
---
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
ธีมเริ่มต้น
คัดลอก
ฝัง
---
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
ธีมเป็นกลาง
คัดลอก
ฝัง
---
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
