ציר זמן
ציר זמן הוא תרשים המשמש להמחשת אירועים, תאריכים או תקופות זמן. הוא מרונדר בדרך כלל באופן גרפי כדי להציג את חלוף הזמן, ומאורגן בדרך כלל בסדר כרונולוגי. ציר הזמן הבסיסי מפרט אירועים בסדר כרונולוגי, ובדרך כלל משתמש בתאריכים כסימונים. ניתן להשתמש בציר זמן גם כדי להציג את היחסים בין אירועים, כגון היחסים בין אירועי חייו של אדם.
העתק
הטמעה
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
