مخطط زمني
الخط الزمني مخطط يُستخدم لتوضيح الأحداث أو التواريخ أو الفترات الزمنية. ويُصيَّر عادةً بشكل رسومي لعرض مرور الوقت، ويُنظَّم عادةً ترتيبًا زمنيًا. ويسرد الخط الزمني الأساسي الأحداث ترتيبًا زمنيًا، ويستخدم عادةً التواريخ كعلامات. ويمكن استخدام الخط الزمني أيضًا لعرض العلاقات بين الأحداث، مثل العلاقات بين أحداث حياة شخص ما.
نسخ
تضمين
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
