תרשים Git
תרשים Git הוא ייצוג חזותי של git commits ופעולות 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: מייצג commit חדש בענף הנוכחי.
- branch: יצירת ענף חדש ומעבר אליו תוך הפיכתו לענף הנוכחי.
- checkout: מעבר לענף קיים והפיכתו לענף הנוכחי.
- merge: מיזוג ענף קיים לתוך הענף הנוכחי.
בעזרת פעולות Git אלו, תוכל לשרטט תרשים Git ב-Mermaid בקלות ובמהירות רבה. שמות ישויות מתחילים בדרך כלל באות גדולה, אם כי אין תקן מוסכם לכך, וגם אין חובה בכך ב-Mermaid.
שים לב: checkout ו-switch ניתנים להחלפה.
תחביר
תחביר ה-Mermaid של תרשים Git הוא ישיר ופשוט מאוד. הוא נוקט גישה הצהרתית, וכל commit משורטט על ציר הזמן של תרשים ה-Git לפי סדר הופעתו בקוד. בעצם, הוא עוקב אחר סדר ההכנסה של כל פקודה.
תחילה, הצהר על סוג התרשים שלך באמצעות תחביר gitGraph. תחביר gitGraph אומר ל-Mermaid שאתה רוצה לשרטט תרשים Git, ומפרסר את קוד התרשים בהתאם.
כל תרשים Git מאותחל עם הענף main. אלא אם תיצור ענפים שונים, ה-commits ייכנסו כברירת מחדל לענף הראשי. הדבר נובע מאופן העבודה של git, שבו תמיד מתחילים מהענף הראשי. כברירת מחדל, הענף main מוגדר כענף הנוכחי.
ניתן להשתמש בתחביר commit כדי לרשום commit בענף הנוכחי; הבה נראה כיצד הדבר פועל:
תרשים git פשוט, המציג שלושה commits של ענף ברירת המחדל main:
העתק
הטמעה
gitGraph
commit
commit
commit
אם תסתכל היטב בדוגמה הקודמת, תוכל לראות את ענף ברירת המחדל main ואת שלושת ה-commits. שים לב גם שכברירת מחדל כל commit מקבל ID ייחודי ואקראי.
הוספת ID מותאם אישית ל-commit
עבור commit מסוים, ניתן לציין ID מותאם אישית בעת ההצהרה באמצעות מאפיין id, ואחריו נקודתיים :, ולציין את הערך המותאם אישית בתוך מרכאות כפולות.
הבה נראה בעזרת התרשים שלהלן כיצד הדבר פועל:
העתק
הטמעה
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
שינוי סוג commit
ב-Mermaid קיימים שלושה סוגי commits, והם מרונדרים באופן מעט שונה בתרשים. הסוגים הם:
- NORMAL: סוג commit ברירת מחדל, המיוצג בעיגול מלא
- REVERSE: מדגיש ש-commit הוא commit הפוך, המיוצג בעיגול מלא עם הצלבה.
- HIGHLIGHT: מדגיש commit מסוים, המיוצג במלבן מלא.
עבור commit נתון, ניתן לציין את סוגו בעת ההצהרה באמצעות מאפיין type, ואחריו נקודתיים : ואפשרות הסוג הרצויה שנדונה לעיל. לדוגמה: commit type:
שים לב: אם סוג ה-commit לא צוין, נבחר כברירת מחדל NORMAL
הבה נראה בתרשים שלהלן כיצד מתבצעים סוגי commits שונים אלו:
העתק
הטמעה
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
בדוגמה זו ציינו סוג שונה עבור כל commit. כמו כן, שים לב כיצד כללנו הן id והן type בעת הצהרת ה-commit.
הוספת תגית
עבור commit נתון, ניתן לקשט אותו ב-tag, בדומה למושג תגית או גרסת שחרור בעולם ה-git. ניתן לצרף תגית מותאמת אישית בעת הצהרת ה-commit באמצעות מאפיין 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
בדוגמה זו הגדרנו תגית מותאמת אישית ל-commit.
יצירת ענף חדש
ב-Mermaid, כדי ליצור ענף חדש, ניתן להשתמש בתחביר branch. כמו כן, יש לספק את שם הענף החדש. השם חייב להיות ייחודי, ולא להיות שם של ענף קיים.
כאשר Mermaid קוראת את תחביר branch, היא יוצרת ענף חדש ומגדירה אותו כענף הנוכחי. זה שקול ליצירת ענף חדש בתרשים Git ומעבר אליו.
העתק
הטמעה
gitGraph
commit
commit
branch develop
commit
commit
commit
בדוגמה זו ניתן לראות כיצד התחלנו מענף ברירת המחדל main ודחפנו אליו שני commits. לאחר מכן יצרנו את הענף develop, וכל ה-commits שלאחר מכן הוצבו על הענף develop, מכיוון שהוא הפך לענף הנוכחי.
מעבר לענף קיים
ב-Mermaid, כדי לעבור לענף קיים, ניתן להשתמש בתחביר checkout, ובמקביל יש לספק את שם הענף הקיים. אם לא נמצא ענף בשם שצוין, הדבר יגרום לשגיאה במסוף. דוגמת שימוש: checkout develop
כאשר Mermaid קוראת את תחביר checkout, היא מוצאת את הענף בשם שצוין ומגדירה אותו כענף הנוכחי. זה שקול ל-checkout של ענף ב-Git.
העתק
הטמעה
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
בדוגמה זו התחלנו תחילה מענף ברירת המחדל main ודחפנו אליו שני commits. לאחר מכן יצרנו את הענף develop, וכל שלושת ה-commits הוצבו על הענף develop, מכיוון שהוא הפך לענף הנוכחי. לאחר מכן השתמשנו בתחביר checkout כדי להגדיר את הענף הנוכחי כ-main, וכל ה-commits שלאחר מכן נרשמו על הענף main.
מיזוג שני ענפים
ב-Mermaid, כדי למזג או להתחבר לענף קיים, יש להשתמש בתחביר merge. במקביל, יש לספק את שם הענף הקיים למיזוג. אם לא נמצא ענף בשם שצוין, תוצג שגיאה במסוף. בנוסף, ניתן למזג רק שני ענפים נפרדים, ולא ניתן למזג ענף עם עצמו.
דוגמת תחביר: merge develop
כאשר Mermaid קוראת את תחביר merge, היא מוצאת את הענף שצוין ואת ה-commit האחרון שלו, וממזגת אותו עם ה-commit האחרון של הענף הנוכחי. מיוצג בעיגול כפול מלא.
להלן דוגמה למיזוג שני ענפים:
העתק
הטמעה
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
בדוגמה זו, תחילה התחלנו מענף main ודחפנו אליו שני commits. לאחר מכן יצרנו את הענף develop ודחפנו שלושה commits על הענף develop. לאחר מכן השתמשנו בתחביר checkout כדי להגדיר את הענף הנוכחי כ-main, וכל ה-commits שלאחר מכן בוצעו עבור הענף main. לבסוף, מיזגנו את הענף develop לתוך הענף main, וכך נוצר commit מיזוג. מכיוון שהענף הנוכחי היה עדיין main, שני ה-commits האחרונים נרשמו על ענף זה.
ניתן גם להוסיף מאפיינים דומים למיזוג שלך:
- id עוקף את ה-ID המוגדר כברירת מחדל ב-ID מותאם אישית
- tag מוסיף תגית מותאמת אישית ל-commit המיזוג
- type עוקף את סוג ברירת המחדל של commit המיזוג. ניתן להשתמש בסוגי commits אחרים שהוזכרו לעיל.
העתק
הטמעה
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"
מיזוג סלקטיבי של commits מענף אחר
Mermaid תומכת בבחירה של commit מענף אחד והעברתו לענף הנוכחי. ניתן גם להשתמש בתחביר cherry-pick כדי לבחור commit מענף אחר.
כדי להשתמש בתחביר cherry-pick, עליך לציין id באמצעות מאפיין id, ואחריו נקודתיים : וכתבו את מזהה ה-commit הרצוי, כשהוא עטוף במרכאות כפולות. לדוגמה:
להלן כמה כללים חשובים שיש לשים לב אליהם:
- יש לספק id כדי לבחור commit קיים. אם מזהה ה-commit שצוין אינו קיים, הדבר יגרום לשגיאה. לשם כך, יש להשתמש בפורמט commit id:$value כדי להצהיר על commit.
- ה-commit שצוין אינו יכול להתקיים בענף הנוכחי, וה-commit הנבחר חייב תמיד להגיע מענף השונה מהענף הנוכחי.
- בענף הנוכחי חייב להיות לפחות commit אחד לפני ביצוע cherry-pick, אחרת הדבר יגרום לשגיאה.
- בעת בחירת commit מיזוג, יש לספק ID של commit האב. אם משמיטים את מאפיין האב או מספקים ID של commit אב לא חוקי, תיגרם שגיאה.
- ה-commit האב שצוין חייב להיות ההורה הישיר של commit המיזוג הנבחר.
העתק
הטמעה
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, תגיות ה-commit לא יוצגו.
- mainBranchName: מחרוזת, ברירת מחדל main. שמו של ענף ברירת המחדל.
- mainBranchOrder: מיקומו של הענף הראשי ברשימת הענפים. ברירת מחדל 0, כלומר כברירת מחדל הענף main ממוקם במקום ה-1.
- parallelCommits: ערך בוליאני, ברירת מחדל false. אם מוגדר כ-true, commits המרוחקים מהאב יוצגו באותה רמה.
הסתרת שמות ענפים וקווי חיבור
לעיתים ייתכן שתרצה להסתיר את שמות הענפים ואת קווי החיבור. ניתן לעשות זאת באמצעות תחביר 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
פריסת תגיות commit: מסובב או אופקי
Mermaid תומכת בשני סוגים של פריסת תגיות commit. פריסת ברירת המחדל היא מסובבת, כלומר התגיות ממוקמות מתחת לעיגול ה-commit ומסובבות ב-45 מעלות לקריאות טובה יותר. הדבר שימושי במיוחד עבור commits עם תגיות ארוכות.
הסוג האחר הוא אופקי, כלומר התגיות ממוקמות מתחת לעיגול ה-commit ומוצגות ממורכזות אופקית, ללא סיבוב. הדבר שימושי במיוחד עבור commits עם תגיות קצרות.
ניתן לשנות את פריסת תגיות ה-commit באמצעות תחביר rotateCommitLabel בהוראה. ברירת המחדל היא true, כלומר תגיות ה-commit מסובבות.
דוגמת שימוש: תגיות commit מסובבות
העתק
הטמעה
---
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
דוגמת שימוש: תגיות 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
הסתרת תגיות commit
לעיתים ייתכן שתרצה להסתיר את תגיות ה-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. (אלא אם סדר זה שונה מ-0 באמצעות תחביר mainBranchOrder בתצורה)
- לאחר מכן, כל הענפים ללא 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:)
בכיוון מלמעלה למטה, ה-commits רצים מראש התרשים לתחתיתו, והענפים מסודרים זה לצד זה.
כדי לכוון את הגרף באופן זה, יש להוסיף TB: לאחר תחביר gitGraph.
העתק
הטמעה
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
מלמטה למעלה (BT:)
בכיוון מלמטה למעלה, ה-commits רצים מתחתית התרשים לראשו, והענפים מסודרים זה לצד זה.
כדי לכוון את הגרף באופן זה, יש להוסיף BT: לאחר תחביר gitGraph.
העתק
הטמעה
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
commits זמניים (parallelCommits: false)
העתק
הטמעה
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
commits מקבילים (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).
התאמה אישית של צבע ה-commit
ניתן להשתמש במשתני ערכת הנושא commitLabelColor ו-commitLabelBackground כדי להתאים אישית בנפרד את צבע תווית ה-commit ואת צבע הרקע שלה.
דוגמה: כעת נעקוף את ערכי ברירת המחדל של המשתנים 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 כדי להתאים אישית את גודל הגופן של תווית ה-commit.
דוגמה: כעת נעקוף את ערך ברירת המחדל של המשתנה 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
התאמה אישית של צבע commit המודגש
ניתן להשתמש במשתני ערכת הנושא gitInv0 עד gitInv7 כדי להתאים אישית את צבע commit המודגש בהתאם לענף שבו הוא נמצא. Mermaid מאפשרת להגדיר צבעים של commits מודגשים מסוימים עבור עד 8 ענפים, כאשר המשתנה gitInv0 שולט בצבע commit המודגש של הענף הראשון, המשתנה gitInv1 שולט בצבע commit המודגש של הענף השני, וכן הלאה.
כעת נעקוף את ערכי ברירת המחדל של המשתנים 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
