مخطط جانت
مخطط جانت هو مخطط أعمدة يُستخدم لعرض تقدّم المشروع والوقت اللازم لإكمال مشروع معيّن. ويعرض مخطط جانت عدد الأيام بين تاريخَي البداية والإنجاز لعناصر المشروع النهائية وعناصر التجميع.
ملاحظات
يسجّل مخطط جانت كل مهمة مخطط لها كشريط متصل يمتد من اليسار إلى اليمين. ويمثّل المحور x الوقت، ويسجّل المحور y المهام المختلفة وترتيب إنجازها.
والأهم من ذلك، عندما يُستثنى تاريخ مهمة أو عدد أيامها أو مجموعة تواريخ محدّدة، فسيتكيّف مخطط جانت مع هذه التغييرات بتمديد المدة بعدد الأيام نفسه إلى اليمين، بدلًا من إنشاء فجوات داخل المهمة .
نسخ
تضمين
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
ولكن إذا وقعت التواريخ المستثناة بين مهمتين متتاليتين في البداية، فسيُتخطّى التاريخ المستثنى على المخطط ويُترك فارغًا، ثم تبدأ المهمة بعد انتهاء التاريخ المستثنى. كما يلي:
نسخ
تضمين
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
يُعدّ مخطط جانت مفيدًا لتتبّع الوقت اللازم لإكمال المشروع، ومع بعض التعديلات يمكن استخدامه أيضًا لتمثيل "أيام عدم العمل" بصورة رسومية.
الصيغة
نسخ
تضمين
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
تكون المهام متتالية افتراضيًا، ويكون تاريخ بداية المهمة التالية افتراضيًا هو تاريخ انتهاء المهمة السابقة.
يُفصل عنوان المهمة عن بياناته الوصفية بنقطتين (:)، وتُفصل عناصر البيانات الوصفية عن بعضها بفواصل (,). وتشمل التسميات الصالحة active و done و crit و milestone. والتسميات اختيارية، لكن إذا استُخدمت فيجب وضعها في المقدمة. وبعد معالجة التسميات، تُفسَّر عناصر البيانات الوصفية المتبقية كما يلي:
- إذا حُدِّد عنصر واحد، فسيحدّد متى تنتهي المهمة. ويمكن أن يكون تاريخًا أو وقتًا محدّدًا، أو مدة زمنية. وإذا حُدِّدت مدة، فستُضاف إلى تاريخ بداية المهمة لتحديد تاريخ انتهائها، مع مراعاة أي حالات استثناء.
- إذا حُدِّد عنصران، فيُفسَّر العنصر الأخير بالطريقة نفسها كما في الحالة السابقة. ويمكن للعنصر الأول تحديد تاريخ أو وقت بداية صريح (بالتنسيق المحدّد بواسطة dateFormat)، أو الرجوع إلى مهمة أخرى عبر after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. وفي الحالة الأخيرة، سيُعيّن تاريخ بداية المهمة بناءً على آخر تاريخ انتهاء للمهام المشار إليها.
- إذا حُدِّدت ثلاثة عناصر، فيُفسَّر العنصران الأخيران وفق الحالة السابقة. وسيمثّل العنصر الأول معرّف ID المهمة، ويمكن الرجوع إليه بصيغة later <taskID>.
| صيغة البيانات الوصفية | تاريخ البداية | تاريخ النهاية | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate المُفسَّر باستخدام dateformat | endDate المُفسَّر باستخدام dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate المُفسَّر باستخدام dateformat | تاريخ البداية + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | endDate المُفسَّر باستخدام dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | تاريخ البداية + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate المُفسَّر باستخدام dateformat | تاريخ بداية المهمة المحدّدة سابقًا otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | تاريخ بداية المهمة المحدّدة سابقًا otherTaskID | taskID |
| <startDate>, <endDate> | startdate المُفسَّر باستخدام dateformat | 使用 dateformat 解释的 enddate | غير قابل للتطبيق |
| <startDate>, <length> | startdate المُفسَّر باستخدام dateformat | تاريخ البداية + length | غير قابل للتطبيق |
| after <otherTaskID>, <endDate> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | 使用 dateformat 解释的 enddate | غير قابل للتطبيق |
| after <otherTaskID>, <length> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | تاريخ البداية + length | غير قابل للتطبيق |
| <startDate>, until <otherTaskId> | startdate المُفسَّر باستخدام dateformat | تاريخ بداية المهمة المحدّدة سابقًا otherTaskID | غير قابل للتطبيق |
| after <otherTaskId>, until <otherTaskId> | تاريخ انتهاء المهمة المحدّدة سابقًا otherTaskID | تاريخ بداية المهمة المحدّدة سابقًا otherTaskID | غير قابل للتطبيق |
| <endDate> | تاريخ انتهاء المهمة السابقة | 使用 dateformat 解释的 enddate | غير قابل للتطبيق |
| <length> | تاريخ انتهاء المهمة السابقة | تاريخ البداية + length | غير قابل للتطبيق |
| until <otherTaskId> | تاريخ انتهاء المهمة السابقة | تاريخ بداية المهمة المحدّدة سابقًا otherTaskID | غير قابل للتطبيق |
تنسيق المدة
عند تحديد <length>، استخدم رقمًا متبوعًا بأحد لاحقات الوحدات التالية:
| الوحدة | اللاحقة | مثال |
|---|---|---|
| ميلي ثانية | ms | 50ms |
| ثانية | s | 30s |
| دقيقة | m | 30m |
| ساعة | h | 4h |
| يوم | d | 7d |
| أسبوع | w | 3w |
| شهر | m | 2m |
| سنة | y | 1y |
كما تُدعَم القيم العشرية (مثل 2.5d). وتُتجاهل علامات المدة غير الصالحة (مثل 3dX)، وستكون المدة الافتراضية للمهمة صفرًا.
للإيجاز، لا يعرض الجدول المهام المتعددة المسرودة باستخدام صيغة after. وفيما يلي مثال:
نسخ
تضمين
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
العنوان
title سلسلة نصية اختيارية تُعرض في أعلى مخطط جانت، وتُستخدم لوصف المخطط بأكمله.
استثناء
excludes خاصية اختيارية تقبل تاريخًا محدّدًا (بتنسيق YYYY-MM-DD) أو أيام أسبوع (مثل "sunday") أو "weekends"، لكن لا يمكن استخدام كلمة "weekdays". وستُوسَم هذه التواريخ على المخطط وتُستثنى من حساب مدة المهمة. وهذا يعني أنه إذا تضمّنت مدة المهمة تواريخ مستثناة، فسيُضاف عدد الأيام المستثناة إلى وقت انتهاء المهمة، لضمان اتساق مدة المهمة مع ما هو محدّد في الكود.
عطلة نهاية الأسبوع
عند استثناء عطلة نهاية الأسبوع، يمكن تعيين عطلة نهاية الأسبوع إلى الجمعة والسبت، أو السبت والأحد. وافتراضيًا، تكون عطلة نهاية الأسبوع يومَي السبت والأحد. ولمعرفة يوم بداية عطلة نهاية الأسبوع، يمكن إضافة خاصية اختيارية weekend في سطر جديد متبوعة بـ friday أو saturday.
نسخ
تضمين
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
إعلان الجزء
يمكنك تقسيم المخطط إلى أجزاء تفصل بين أجزاء المشروع المختلفة (مثل التطوير والتوثيق).
ولهذا الغرض، استخدم صيغة section في بداية سطر وامنحه اسمًا. يرجى ملاحظة أنه على عكس عنوان المخطط بأكمله، فإن هذا الاسم إلزامي.
معلم
يمكنك إضافة معالم إلى المخطط. وتختلف المعالم عن المهام لأنها تمثّل وقتًا محدّدًا، وتُعرَّف بصيغة milestone. وفيما يلي مثال على استخدام المعالم: يُحدَّد الموضع الدقيق للمعلم بتاريخ بداية المعلم ومدة المهمة، كما يلي:
نسخ
تضمين
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
علامة رأسية
يمثّل vert إضافة خط رأسي في مخطط جانت لإبراز تواريخ مهمة بسهولة، مثل المواعيد النهائية أو الأحداث المهمة أو نقاط التفتيش. وتمتد هذه العلامات عبر المخطط بأكمله، وتُحدَّد مواقعها وفق التاريخ الذي توفّره. وعلى عكس المعالم، لا تشغل العلامات الرأسية سطرًا. وهي نقاط مرجعية بصرية بحتة، تُساعد على تقسيم الخط الزمني لتسهيل التعرّف على اللحظات المهمة.
نسخ
تضمين
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
تعيين التاريخ
يحدّد dateFormat تنسيق إدخال التاريخ لعناصر مخطط جانت، ويحدّد axisFormat تنسيق إخراج التاريخ عند تصيير المخطط.
تنسيق تاريخ الإدخال
تنسيق تاريخ الإدخال الافتراضي هو YYYY-MM-DD، ويمكنك تخصيص dateFormat.
نسخ
تضمين
dateFormat YYYY-MM-DD
تُدعَم خيارات التنسيق التالية:
| 输入 | مثال | الوصف |
|---|---|---|
| YYYY | 2026 | سنة من 4 أرقام |
| YY | 26 | سنة من رقمين |
| Q | 1..4 | رقم الربع |
| M MM | 1..12 | رقم الشهر |
| D DD | 1..31 | يوم من الشهر |
| Do | 1st..31st | يوم من الشهر برقم ترتيبي |
| DDD DDDD | 1..365 | يوم من السنة |
| X | 1410715640.579 | الطابع الزمني Unix |
| x | 1410715640579 | الطابع الزمني Unix بالميلي ثانية |
| H HH | 0..23 | الوقت بنظام 24 ساعة |
| h hh | 1..12 | الوقت بنظام 12 ساعة، يُستخدم مع a A |
| a A | am pm | صباحًا أو مساءً |
| m mm | 0..59 | دقيقة |
| s ss | 0..59 | عدد الثواني |
| S | 0..9 | عُشر الثانية |
| SS | 0..99 | جُزء من مئة من الثانية |
| SSS | 0..999 | جُزء من ألف من الثانية |
| Z ZZ | +12:00 | الإزاحة عن UTC، بالتنسيق +-HH:mm أو +-HHmm أو Z |
تنسيق تاريخ إخراج المحور
تنسيق تاريخ الإخراج الافتراضي هو YYYY-MM-DD. ويمكنك تخصيص axisFormat، مثل 2026-Q1 للدلالة على الربع الأول من عام 2026.
نسخ
تضمين
axisFormat %Y-%m-%d
تُدعَم سلاسل التنسيق التالية:
| التنسيق,التعريف | |
|---|---|
| %a | الاسم المختصر ليوم الأسبوع |
| %A | الاسم الكامل ليوم الأسبوع |
| %b | الاسم المختصر للشهر |
| %B | الاسم الكامل للشهر |
| %c | التاريخ والوقت المحليان |
| %d | التاريخ، رقم عشري [01,31] |
| %e | التاريخ، رقم عشري [1,31] مبطّن بمسافات، يكافئ %_d |
| %H | الساعة (بنظام 24 ساعة)، رقم عشري [00,23] |
| %I | الساعة (بنظام 12 ساعة)، رقم عشري [01,12] |
| %j | اليوم من السنة، رقم عشري [001,366] |
| %m | الشهر، رقم عشري [01,12] |
| %M | الدقيقة، رقم عشري [00,59] |
| %L | الميلي ثانية، رقم عشري [000, 999] |
| %p | صباحًا أو مساءً |
| %S | الثانية، رقم عشري [00,59] |
| %U | أسبوع السنة (مع اعتبار الأحد أول يوم في الأسبوع)، رقم عشري [00,53] |
| %w | يوم الأسبوع، رقم عشري [0,6] مبطّن بمسافات، حيث يمثّل 0 يوم الأحد |
| %W | أسبوع السنة (مع اعتبار الاثنين أول يوم في الأسبوع)، رقم عشري [00,53] |
| %x | تمثيل التاريخ المحلي، مثل: 2026-09-18 |
| %X | تمثيل الوقت المحلي، مثل: 14:30:00 |
| %y | السنة دون قرن، رقم عشري [00,99]، على سبيل المثال 26 يمثّل سنة 2026 |
| %Y | السنة مع القرن، رقم عشري |
| %Z | اختصار اسم المنطقة الزمنية، مثل "-0700" |
| %% | حرف الإفلات، يُستخدم لعرض علامة النسبة المئوية % نفسها |
علامة المحور
الإخراج الافتراضي للعلامات تلقائي. ويمكنك تخصيص tickInterval، مثل 1day أو 1week.
نسخ
تضمين
tickInterval 1day
النمط هو
نسخ
تضمين
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
يبدأ tickInterval المعتمد على الأسبوع افتراضيًا من يوم الأحد. وإذا أردت تحديد يوم آخر لبداية tickInterval، فاستخدم خيار weekday، كما في الكود التالي:
نسخ
تضمين
gantt
tickInterval 1week
weekday monday
إخراج الوضع المضغوط
يتيح لك الوضع المضغوط عرض عدة مهام في السطر نفسه. ويتم التحكم في وضع عرض المخطط من خلال إعداد YAML السابق، لتمكين الوضع المضغوط لمخطط جانت.
نسخ
تضمين
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
يمكن إدخال تعليقات في مخطط جانت، وسيتجاهلها المحلّل. يجب أن يشغل التعليق سطرًا مستقلًا، ويجب أن يبدأ بـ %% (علامتي النسبة المئوية المزدوجة). ويُعدّ أي نص بعد بداية التعليق حتى حرف السطر الجديد التالي تعليقًا، بما في ذلك أي صيغة مخطط.
نسخ
تضمين
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
علامة اليوم
يمكنك تعيين تنسيق لعلامة التاريخ الحالي أو إخفاء هذه العلامة. ولتعيين التنسيق، أضف قيمة إلى مفتاح todayMarker.
نسخ
تضمين
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
لإخفاء العلامة، عيّن todayMarker إلى off.
نسخ
تضمين
todayMarker off
مثال
مخطط جانت العمودي
نسخ
تضمين
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
الخط الزمني (يتضمّن التعليقات وCSS والتكوين المسبق)
نسخ
تضمين
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
