مخطط Git
مخطط Git هو تمثيل مرئي لعمليات git وإيداعات git على الفروع المختلفة.
يكون مخطط Git مفيدًا بصفة خاصة للمطوّرين وفرق العمليات، ويمكن استخدامه لمشاركة استراتيجية فروع Git الخاصة بهم.
يمكن لـ Mermaid تصيير مخطط Git
نسخ
تضمين
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
تدعم Mermaid عمليات git الأساسية، على سبيل المثال:
- commit : يمثّل إيداعًا جديدًا على الفرع الحالي.
- branch : ينشئ فرعًا جديدًا وينتقل إليه ويجعله الفرع الحالي.
- checkout : ينتقل إلى فرع موجود ويجعله الفرع الحالي.
- merge : يدمج فرعًا موجودًا في الفرع الحالي.
بفضل عمليات Git هذه، يمكنك رسم مخططات Git في Mermaid بسهولة وسرعة كبيرة. وعادةً ما تبدأ أسماء الكيانات بحرف كبير، رغم عدم وجود معيار متعارف عليه لذلك، ولا يُعدّ ذلك إلزاميًا في Mermaid.
ملاحظة: يمكن استخدام checkout و switch بالتبادل.
الصيغة
صيغة Mermaid لمخطط Git مباشرة وبسيطة جدًا. وتتّبع أسلوبًا تصريحيًا، حيث يُرسم كل إيداع على الخط الزمني لمخطط Git وفق ترتيب ظهوره في الكود. وبشكل أساسي، تتبع ترتيب إدراج كل أمر.
أولًا، أعلن نوع مخططك باستخدام صيغة gitGraph. وتُخبر صيغة gitGraph مخطط Mermaid بأنك تريد رسم مخطط Git، وتحلّل كود المخطط وفق ذلك.
تبدأ كل مخطط Git بفرع main. وإذا لم تُنشئ فروعًا مختلفة، فستذهب الإيداعات افتراضيًا إلى الفرع الرئيسي. وهذا مدفوع بطريقة عمل git، إذ تبدأ دائمًا من الفرع الرئيسي في البداية. وافتراضيًا، يُعيَّن فرع main كالفرع الحالي.
يمكنك تسجيل إيداع على الفرع الحالي باستخدام صيغة commit، ولنرَ كيف يعمل ذلك:
مخطط git بسيط يعرض ثلاثة إيداعات على الفرع الافتراضي main:
نسخ
تضمين
gitGraph
commit
commit
commit
إذا نظرت بعناية في المثال السابق، يمكنك رؤية الفرع الافتراضي main والإيداعات الثلاثة. ولاحظ أيضًا أن كل إيداع يُمنَح افتراضيًا معرّفًا فريدًا وعشوائيًا.
إضافة ID إيداع مخصّص
بالنسبة لإيداع معيّن، يمكنك تحديد ID مخصّص عند الإعلان عبر خاصية id، ثم إضافة نقطتين :، وكتابة القيمة المخصّصة بين علامتي اقتباس مزدوجتين.
لنرَ كيف يعمل ذلك بمساعدة المخطط التالي:
نسخ
تضمين
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
تعديل نوع الإيداع
في Mermaid، هناك ثلاثة أنواع من الإيداعات، وتُصيَّر في المخطط بطريقة مختلفة قليلًا. وهذه الأنواع هي:
- NORMAL : نوع الإيداع الافتراضي، ويُمثَّل بدائرة ممتلئة
- REVERSE : يؤكّد أن الإيداع إيداع عكسي، ويُمثَّل بدائرة ممتلئة متقاطعة.
- HIGHLIGHT : يبرز إيداعًا معيّنًا، ويُمثَّل بمستطيل ممتلئ.
بالنسبة لإيداع معيّن، يمكنك تحديد نوعه عند الإعلان باستخدام خاصية type، متبوعة بنقطتين : وخيار النوع المطلوب المذكور أعلاه. على سبيل المثال: commit type:
ملاحظة: إذا لم يُحدَّد نوع الإيداع، فيُختار NORMAL افتراضيًا
لنرَ عبر المخطط التالي كيف تسير هذه الأنواع المختلفة من الإيداعات:
نسخ
تضمين
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
في هذا المثال، حدّدنا نوعًا مختلفًا لكل إيداع. كما انظر كيف أدرجنا id و type معًا عند الإعلان عن الإيداع.
إضافة وسم
بالنسبة لإيداع معيّن، يمكنك تزيينه بـ tag، على غرار مفهوم الوسوم أو إصدارات النشر في عالم git. ويمكنك عند الإعلان عن الإيداع إرفاق وسم مخصّص بخاصية tag، متبوعة بنقطتين :، وكتابة القيمة المخصّصة بين علامتي اقتباس مزدوجتين.
نسخ
تضمين
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
في هذا المثال، عيّنّا وسمًا مخصّصًا للإيداع.
إنشاء فرع جديد
في Mermaid، لإنشاء فرع جديد، يمكنك استخدام صيغة branch. وتحتاج أيضًا إلى توفير اسم الفرع الجديد. ويجب أن يكون الاسم فريدًا، وألّا يكون اسم فرع موجود.
عند قراءة Mermaid لصيغة branch، تُنشئ فرعًا جديدًا وتُعيِّنه كالفرع الحالي. وهذا يكافئ إنشاء فرع جديد في مخطط Git والانتقال إليه.
نسخ
تضمين
gitGraph
commit
commit
branch develop
commit
commit
commit
في هذا المثال، يمكن رؤية كيف بدأنا من الفرع الافتراضي main ودفعنا إليه إيداعين. ثم أنشأنا الفرع develop، وأُضيفت جميع الإيداعات بعده إلى الفرع develop لأنه صار الفرع الحالي.
الانتقال إلى فرع موجود
في Mermaid، للانتقال إلى فرع موجود، يمكن استخدام صيغة checkout، كما تحتاج إلى توفير اسم فرع موجود. وإذا لم يُعثَر على فرع بالاسم المحدّد، فسيؤدي ذلك إلى خطأ في الطرفية. مثال على الاستخدام: checkout develop
عند قراءة Mermaid لصيغة checkout، تُعثَر على الفرع بالاسم المحدّد وتُعيِّنه كالفرع الحالي. وهذا يكافئ الانتقال إلى فرع في Git.
نسخ
تضمين
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
في هذا المثال، بدأنا أولًا من الفرع الافتراضي main ودفعنا إليه إيداعين. ثم أنشأنا الفرع develop، ثم وُضعت الإيداعات الثلاثة جميعها على الفرع develop لأنه صار الفرع الحالي. بعد ذلك، استخدمنا صيغة checkout لتعيين الفرع الحالي إلى main، وتُسجَّل جميع الإيداعات التالية على الفرع main.
دمج فرعين
في Mermaid، لدمج فرع موجود أو الاتصال به، تحتاج إلى استخدام صيغة merge. وفي الوقت نفسه، تحتاج أيضًا إلى توفير اسم فرع موجود للدمج. وإذا لم يُعثَر على فرع بالاسم المحدّد، فسيُعرض خطأ في الطرفية. بالإضافة إلى ذلك، لا يمكنك دمج سوى فرعين منفصلين، ولا يمكنك دمج فرع مع نفسه.
مثال على الصيغة: merge develop
عند قراءة Mermaid لصيغة merge، تُعثَر على الفرع المحدّد وآخر إيداع فيه، وتدمجه مع آخر إيداع في الفرع الحالي. ويُمثَّل بدائرة مزدوجة ممتلئة.
فيما يلي مثال على دمج فرعين:
نسخ
تضمين
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
في هذا المثال، بدأنا أولًا من الفرع main ودفعنا إليه إيداعين. ثم أنشأنا الفرع develop ودفعنا ثلاثة إيداعات إلى الفرع develop. بعد ذلك، استخدمنا صيغة checkout لتعيين الفرع الحالي إلى main، ووُجّهت جميع الإيداعات التالية إلى الفرع main. وأخيرًا، دمجنا الفرع develop في الفرع main، مما أنتج إيداع دمج. ولأن الفرع الحالي ظلّ main، سيُسجَّل الإيداعان الأخيران على هذا الفرع.
يمكنك أيضًا إضافة خصائص مشابهة إلى عملية الدمج:
- id يستبدل المعرّف الافتراضي بمعرّف مخصّص
- tag يضيف وسمًا مخصّصًا إلى إيداع الدمج
- type يستبدل النوع الافتراضي لإيداع الدمج. ويمكنك استخدام أنواع الإيداع الأخرى المذكورة سابقًا.
نسخ
تضمين
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
دمج إيداعات انتقائيًا من فرع آخر
تدعم Mermaid انتقاء إيداع من فرع آخر إلى الفرع الحالي. ويمكنك أيضًا استخدام صيغة cherry-pick لانتقاء إيداع من فرع آخر.
لاستخدام صيغة cherry-pick، يجب تحديد id باستخدام خاصية id، ثم كتابة معرّف الإيداع المطلوب بعد النقطتين :، محاطًا بعلامتي اقتباس مزدوجتين. على سبيل المثال:
فيما يلي بعض القواعد المهمة التي يجب الانتباه إليها:
- تحتاج إلى توفير id لتحديد إيداع موجود. وإذا لم يكن ID الإيداع المعطى موجودًا، فسيؤدي ذلك إلى خطأ. ولهذا الغرض، استخدم تنسيق commit id:$value للإعلان عن الإيداع.
- يجب ألّا يكون الإيداع المعطى موجودًا على الفرع الحالي، ويجب أن يأتي الإيداع المنتقى دائمًا من فرع مختلف عن الفرع الحالي.
- يجب أن يحتوي الفرع الحالي على إيداع واحد على الأقل قبل إجراء cherry-pick، وإلا فسيؤدي ذلك إلى خطأ.
- عند انتقاء إيداع دمج، يجب توفير ID الإيداع الأصل. وإذا حُذفت خاصية الأصل أو وُفِّر ID إيداع أصل غير صالح، فسيُثار خطأ.
- يجب أن يكون الإيداع الأصل المحدّد هو الأصل المباشر لإيداع الدمج الذي يجري انتقاؤه.
نسخ
تضمين
gitGraph
commit id: "ZERO"
branch develop
branch release
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"MERGE"
commit id:"TWO"
checkout release
cherry-pick id:"MERGE" parent:"B"
commit id:"THREE"
checkout develop
commit id:"C"
خيارات التكوين المحدّدة
في مخطط Git في Mermaid يمكنك تكوين الخيارات التالية:
- showBranches : قيمة منطقية، الافتراضي true. إذا عُيِّنت إلى false، فلا تُعرض الفروع.
- showCommitLabel : قيمة منطقية، الافتراضي true. إذا عُيِّنت إلى false، فلا يُعرض وسم الإيداع.
- mainBranchName : سلسلة نصية، الافتراضي main. اسم الفرع الافتراضي.
- mainBranchOrder : موضع الفرع الرئيسي في قائمة الفروع. الافتراضي 0، وهذا يعني أن فرع main يحتل الموضع الأول افتراضيًا.
- parallelCommits : قيمة منطقية، الافتراضي false. إذا عُيِّنت إلى true، فستُعرض الإيداعات البعيدة عن الأصل في المستوى نفسه.
إخفاء اسم الفرع وخط التوصيل
قد ترغب أحيانًا في إخفاء اسم الفرع وخط التوصيل. ويمكنك إتمام ذلك باستخدام صيغة showBranches. وقيمتها افتراضيًا true، ويمكنك تعيينها إلى false بالتعليمة.
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
تخطيط وسم الإيداع: دوران أو أفقي
تدعم Mermaid نوعين من تخطيط وسم الإيداع. والتخطيط الافتراضي هو الدوران، أي أن التسمية تُوضع أسفل دائرة الإيداع وتُدار 45 درجة لتحسين قابلية القراءة. وهذا مفيد بصفة خاصة للإيداعات ذات الوسوم الطويلة.
النوع الآخر هو الأفقي، أي أن التسمية تُوضع أسفل دائرة الإيداع وتُعرض في الوسط أفقيًا دون دوران. وهذا مفيد بصفة خاصة للإيداعات ذات الوسوم القصيرة.
يمكنك تغيير تخطيط وسم الإيداع باستخدام صيغة rotateCommitLabel في التعليمة. وقيمتها افتراضيًا true، وهذا يعني أن وسم الإيداع يدور.
مثال على الاستخدام: دوران وسم الإيداع
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: true
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
مثال على الاستخدام: وسم الإيداع الأفقي
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
rotateCommitLabel: false
---
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
إخفاء وسم الإيداع
قد ترغب أحيانًا في إخفاء وسم الإيداع. ويمكنك إتمام ذلك باستخدام صيغة showCommitLabel. وقيمتها افتراضيًا true، ويمكنك تعيينها إلى false بالتعليمة.
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: false
showCommitLabel: false
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
تخصيص اسم الفرع الرئيسي
قد ترغب أحيانًا في تخصيص اسم الفرع الرئيسي. ويمكنك إتمام ذلك باستخدام صيغة mainBranchName. وقيمتها افتراضيًا main، ويمكنك تعيينها إلى أي سلسلة نصية بالتعليمة.
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchName: 'MetroLine1'
---
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
انظر إلى مخطط خط مترو افتراضي أُنشئ باستخدام Mermaid. هنا غيّرنا اسم الفرع الرئيسي الافتراضي إلى MetroLine1.
تخصيص ترتيب الفروع
في Mermaid، تُعرض الفروع افتراضيًا بالترتيب الذي عُرِّفت أو ظهرت به في كود المخطط.
قد ترغب أحيانًا في تخصيص ترتيب الفروع. ويمكنك تحقيق ذلك باستخدام صيغة order بجوار تعريف الفرع، ويمكنك تعيينها إلى رقم موجب.
تتّبع Mermaid ترتيب الأولوية الذي تحدّده صيغة order.
- يُعرض الفرع الرئيسي دائمًا أولًا لأن قيمة ترتيبه الافتراضية هي 0. (إلا إذا عُدِّل ترتيبه عبر صيغة mainBranchOrder في التكوين وغُيِّرت قيمته عن 0)
- بعد ذلك، ستُعرض جميع الفروع التي لا تحتوي على order بالترتيب الذي تظهر به في كود المخطط.
- بعد ذلك، ستُعرض جميع الفروع التي تحتوي على order وفق ترتيب قيم order الخاصة بها.
للتحكّم الكامل في ترتيب جميع الفروع، يجب تعريف order لجميع الفروع.
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
في المخطط أعلاه، تتبع جميع الفروع الترتيب المعرَّف.
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
mainBranchOrder: 2
---
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
في المخطط أعلاه، تُرسم جميع الفروع التي لم يُحدَّد لها ترتيب وفق ترتيب تعريفها. بعد ذلك، يُرسم الفرع test4 لأن ترتيبه 1. ثم يُرسم الفرع main لأن ترتيبه 2. وأخيرًا يُرسم الفرع test1 لأن ترتيبه 3.
ملاحظة: لأننا استبدلنا mainBranchOrder بالقيمة 2، فلن يُرسم الفرع main في البداية، بل يُعرض وفق الترتيب.
هنا، غيّرنا اسم الفرع الرئيسي الافتراضي إلى MetroLine1.
الاتجاه
تدعم Mermaid ثلاثة اتجاهات: من اليسار إلى اليمين (افتراضي)، ومن الأعلى إلى الأسفل، ومن الأسفل إلى الأعلى.
من اليسار إلى اليمين (افتراضي، LR:)
في Mermaid، الاتجاه الافتراضي هو من اليسار إلى اليمين، وتُكدَّس الفروع فوق بعضها.
لكن يمكنك تعيين هذه القيمة صراحةً باستخدام LR: بعد صيغة gitGraph.
نسخ
تضمين
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
من الأعلى إلى الأسفل (TB:)
في اتجاه من الأعلى إلى الأسفل، تسير الإيداعات من أعلى المخطط إلى أسفله، وتُرتَّب الفروع جنبًا إلى جنب.
لتوجيه المخطط بهذه الطريقة، تحتاج إلى إضافة TB: بعد صيغة gitGraph.
نسخ
تضمين
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
من الأسفل إلى الأعلى (BT:)
في اتجاه من الأسفل إلى الأعلى، تسير الإيداعات من أسفل المخطط إلى أعلاه، وتُرتَّب الفروع جنبًا إلى جنب.
لتوجيه المخطط بهذه الطريقة، تحتاج إلى إضافة BT: بعد صيغة gitGraph.
نسخ
تضمين
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
إيداعات مؤقّتة (parallelCommits: false)
نسخ
تضمين
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
إيداعات متوازية (parallelCommits: true)
نسخ
تضمين
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
السمة
تدعم Mermaid مجموعة من السمات المخصّصة، ويمكنك استخدامها لإيجاد السمة المناسبة لك. ملاحظة: يمكنك فعليًا تجاوز متغيّرات سمة موجودة لإنشاء سمتك المخصّصة الخاصة.
فيما يلي خيارات السمات المخصّصة المختلفة:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
لتغيير السمة، يمكنك استخدام صيغة initialize.
السمة الأساسية
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'base'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
سمة الغابة
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'forest'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
السمة الافتراضية
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
السمة الداكنة
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'dark'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
السمة المحايدة
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
التخصيص باستخدام متغيّرات السمة
تتيح لك Mermaid تخصيص مخططك باستخدام متغيّرات السمة، وهذه المتغيّرات تتحكّم في مظهر وأسلوب عناصر المخطط المختلفة.
للفهم، لنأخذ السمة default كمثال، فالقيم الافتراضية لمتغيّرات السمة تُختار تلقائيًا من السمة.
استخدام السمة default لتعيين لون الفروع:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
تدعم Mermaid متغيّرات السمة لتجاوز القيم الافتراضية، بما يصل إلى 8 فروع، أي يمكنك تعيين ألوان حتى 8 فروع باستخدام متغيّرات السمة. وبعد تجاوز 8 فروع، تُعاد متغيّرات السمة استخدامها على نحو دوري، أي سيستخدم الفرع التاسع نمط الفرع الأول.
تخصيص لون الفرع
يمكنك استخدام متغيّرات السمة من git0 إلى git7 لتخصيص ألوان الفروع. وتتيح لك Mermaid تعيين ألوان حتى 8 فروع، حيث يتحكّم المتغيّر git0 في لون الفرع الأول، ويتحكّم git1 في لون الفرع الثاني، وهكذا.
ملاحظة: تُؤخذ القيم الافتراضية لمتغيّرات السمة هذه من السمة المختارة. وإذا أردت تجاوز القيم الافتراضية، فيمكنك استخدام صيغة initialize لإضافة قيم متغيّرات سمة مخصّصة.
مثال:
الآن لنستبدل القيم الافتراضية للمتغيّرات من git0 إلى git3:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'git0': '#ff0000'
'git1': '#00ff00'
'git2': '#0000ff'
'git3': '#ff00ff'
'git4': '#00ffff'
'git5': '#ffff00'
'git6': '#ff00ff'
'git7': '#00ffff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
تخصيص لون تسمية الفرع
يمكنك تخصيص لون وسم الفرع باستخدام متغيّرات السمة من gitBranchLabel0 إلى gitBranchLabel7. وتتيح لك Mermaid تعيين ألوان حتى 8 فروع، حيث يتحكّم المتغيّر gitBranchLabel0 في لون وسم الفرع الأول، ويتحكّم المتغيّر gitBranchLabel1 في لون وسم الفرع الثاني، وهكذا.
لنرَ كيف نعيّن لون وسم الفرع باستخدام السمة default:
الآن لنستبدل القيم الافتراضية للمتغيّرات من gitBranchLabel0 إلى gitBranchLabel2:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitBranchLabel0': '#ffffff'
'gitBranchLabel1': '#ffffff'
'gitBranchLabel2': '#ffffff'
'gitBranchLabel3': '#ffffff'
'gitBranchLabel4': '#ffffff'
'gitBranchLabel5': '#ffffff'
'gitBranchLabel6': '#ffffff'
'gitBranchLabel7': '#ffffff'
'gitBranchLabel8': '#ffffff'
'gitBranchLabel9': '#ffffff'
---
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
هنا، يمكنك رؤية أن لون ونمط branch8 و branch9 مأخوذان من الفرعين عند الموضعين 0 (main) و 1 (branch1) على الترتيب.
تخصيص لون الإيداع
يمكنك استخدام متغيّري السمة commitLabelColor و commitLabelBackground لتخصيص لون وسم الإيداع ولون خلفيته على التوالي.
مثال: الآن لنستبدل القيم الافتراضية للمتغيّرين commitLabelColor و commitLabelBackground:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
mermaid.grammar_mermaid_commit_label_define_label_font_big_small
يمكنك استخدام متغيّر السمة commitLabelFontSize لتخصيص حجم خط وسم الإيداع.
مثال: الآن لنستبدل القيمة الافتراضية للمتغيّر commitLabelFontSize:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
commitLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
تخصيص حجم خط التسمية
يمكنك استخدام متغيّر السمة tagLabelFontSize لتخصيص حجم خط الوسم.
مثال: الآن لنستبدل القيمة الافتراضية للمتغيّر tagLabelFontSize:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
commitLabelColor: '#ff0000'
commitLabelBackground: '#00ff00'
tagLabelFontSize: '16px'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
تخصيص لون التسمية
يمكنك تخصيص الوسم باستخدام متغيّرات السمة tagLabelColor و tagLabelBackground و tagLabelBorder، لتغيير لون نص الوسم ولون خلفية الوسم وإطار الوسم على التوالي.
مثال: الآن لنستبدل القيم الافتراضية للمتغيّرات tagLabelColor و tagLabelBackground و tagLabelBorder:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
tagLabelColor: '#ff0000'
tagLabelBackground: '#00ff00'
tagLabelBorder: '#0000ff'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
تخصيص لون إبراز الإيداع
يمكنك استخدام متغيّرات السمة من gitInv0 إلى gitInv7 لتخصيص لون الإيداع المُبرَز وفق الفرع الذي يقع فيه. وتتيح لك Mermaid تعيين لون إيداع مُبرَز محدّد لما يصل إلى 8 فروع، حيث يتحكّم المتغيّر gitInv0 في لون الإيداع المُبرَز للفرع الأول، ويتحكّم المتغيّر gitInv1 في لون الإيداع المُبرَز للفرع الثاني، وهكذا.
الآن لنستبدل القيم الافتراضية للمتغيّرات من git0 إلى git3:
نسخ
تضمين
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
'gitInv0': '#ff0000'
---
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
