टाइमलाइन
टाइमलाइन एक ऐसा चार्ट है जिसका उपयोग घटनाओं, तिथियों या समय अवधियों को समझाने के लिए किया जाता है। यह आमतौर पर समय के बीतने को दिखाने के लिए ग्राफ़िक रूप से रेंडर किया जाता है, और आमतौर पर कालक्रम में व्यवस्थित होता है। बुनियादी टाइमलाइन घटनाओं को कालक्रम में सूचीबद्ध करती है, आमतौर पर तिथि को मार्कर के रूप में उपयोग करती है। टाइमलाइन का उपयोग घटनाओं के बीच संबंध दिखाने के लिए भी किया जा सकता है, जैसे किसी व्यक्ति के जीवन की घटनाओं के बीच संबंध।
कॉपी करें
एम्बेड
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
