Git-diagram
Et Git-diagram er en visuel fremstilling af git-commits og git-operationer på forskellige branches.
Git-diagrammer er særligt nyttige for udviklere og driftsteams og kan bruges til at dele deres Git-branchstrategi.
Mermaid kan rendere Git-diagrammer
Kopiér
Integrer
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid understøtter grundlæggende git-operationer, f.eks.:
- commit : repræsenterer en ny commit på den aktuelle branch.
- branch : opretter og skifter til en ny branch og gør den samtidig til den aktuelle branch.
- checkout : skifter til en eksisterende branch og gør den til den aktuelle branch.
- merge : fletter en eksisterende branch ind i den aktuelle branch.
Med disse Git-operationer kan du meget nemt og hurtigt tegne Git-diagrammer i Mermaid. Entitetsnavne begynder normalt med stort bogstav, selvom der ikke findes nogen anerkendt standard for dette, og det heller ikke er obligatorisk i Mermaid.
Bemærk: checkout og switch kan bruges i flæng.
Syntaks
Mermaids syntaks for Git-diagrammer er meget direkte og enkel. Den bruger en deklarativ tilgang, hvor hver commit tegnes på Git-diagrammets tidslinje i den rækkefølge, den optræder i koden. Grundlæggende følger den indsættelsesrækkefølgen for hver kommando.
Først deklarerer du din diagramtype med gitGraph-syntaksen. gitGraph-syntaksen fortæller Mermaid, at du ønsker at tegne et Git-diagram, og diagramkoden parses derefter.
Hvert Git-diagram initialiseres med en main-branch. Medmindre du opretter forskellige branches, går commits som standard til hovedbranchen. Dette er drevet af, hvordan git fungerer: i begyndelsen starter du altid fra hovedbranchen. Som standard sættes main-branchen som den aktuelle branch.
Du kan registrere en commit på den aktuelle branch med commit-syntaksen; lad os se, hvordan det fungerer:
Et simpelt git-diagram, der viser tre commits på standardbranchen main:
Kopiér
Integrer
gitGraph
commit
commit
commit
Hvis du ser nøje på det foregående eksempel, kan du se standardbranchen main samt tre commits. Bemærk også, at hver commit som standard tildeles et unikt og tilfældigt ID.
Tilføj et brugerdefineret commit-ID
For en given commit kan du angive et brugerdefineret ID med id-egenskaben ved deklarationen, derefter et kolon : og den brugerdefinerede værdi i dobbelte anførselstegn.
Lad os se på figuren nedenfor for at forstå, hvordan det fungerer:
Kopiér
Integrer
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Ændr commit-type
I Mermaid findes der tre typer commits, som rendres lidt forskelligt i diagrammet. Disse typer er:
- NORMAL : standard-committypen, vist som en udfyldt cirkel
- REVERSE : understreger, at commit'en er en omvendt commit, vist som en udfyldt cirkel med kryds.
- HIGHLIGHT : fremhæver en bestemt commit, vist som et udfyldt rektangel.
For en given commit kan du angive dens type med type-egenskaben ved deklarationen, efterfulgt af et kolon : og den ønskede typeindstilling nævnt ovenfor. For eksempel: commit type:
Bemærk: Hvis der ikke angives en commit-type, vælges NORMAL som standard
Lad os se på figuren nedenfor for at se, hvordan disse forskellige typer commits ser ud:
Kopiér
Integrer
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
I dette eksempel har vi angivet en forskellig type for hver commit. Læg også mærke til, hvordan vi angiver både id og type samtidig ved deklarationen af commit'en.
Tilføj et tag
For en given commit kan du dekorere den med tag, svarende til begrebet tag eller udgivelse i git-verdenen. Du kan knytte et brugerdefineret tag med tag-egenskaben ved deklarationen af commit'en efterfulgt af et kolon : og den brugerdefinerede værdi i dobbelte anførselstegn.
Kopiér
Integrer
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
I dette eksempel har vi angivet et brugerdefineret tag for commit'en.
Opret en ny branch
I Mermaid kan du oprette en ny branch med branch-syntaksen. Du skal også angive navnet på den nye branch. Navnet skal være unikt og må ikke være navnet på en eksisterende branch.
Når Mermaid læser branch-syntaksen, opretter den en ny branch og sætter den som den aktuelle branch. Det svarer til at oprette en ny branch i et Git-diagram og skifte til den.
Kopiér
Integrer
gitGraph
commit
commit
branch develop
commit
commit
commit
I dette eksempel kan man se, hvordan vi starter fra standardbranchen main og skubber to commits til den. Derefter opretter vi develop-branchen, og alle efterfølgende commits placeres på develop-branchen, fordi den blev den aktuelle branch.
Check ud en eksisterende branch
I Mermaid kan du skifte til en eksisterende branch med checkout-syntaksen, og du skal også angive navnet på den eksisterende branch. Hvis der ikke findes en branch med det angivne navn, opstår der en konsolfejl. Anvendelseseksempel: checkout develop
Når Mermaid læser checkout-syntaksen, finder den branchen med det angivne navn og sætter den som den aktuelle branch. Det svarer til at checke en branch ud i Git.
Kopiér
Integrer
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
I dette eksempel starter vi først fra standardbranchen main og skubber to commits til den. Derefter opretter vi develop-branchen, og alle tre efterfølgende commits placeres på develop-branchen, fordi den blev den aktuelle branch. Derefter bruger vi checkout-syntaksen til at sætte den aktuelle branch til main, og alle efterfølgende commits registreres på main-branchen.
Flet to branches
I Mermaid skal du bruge merge-syntaksen for at flette eller forbinde til en eksisterende branch. Du skal også angive navnet på en eksisterende branch, der skal flettes. Hvis der ikke findes en branch med det angivne navn, vises der en fejl i konsollen. Desuden kan du kun flette to uafhængige branches og kan ikke flette en branch med sig selv.
Syntakseksempel: merge develop
Når Mermaid læser merge-syntaksen, finder den den angivne branch og dens seneste commit og fletter den med den aktuelle branchs seneste commit. Vises som en udfyldt dobbeltcirkel.
Nedenfor er et eksempel på fletning af to branches:
Kopiér
Integrer
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
I dette eksempel starter vi først fra main-branchen og skubber to commits til den. Derefter opretter vi develop-branchen og skubber tre commits til develop-branchen. Derefter bruger vi checkout-syntaksen til at sætte den aktuelle branch til main, og alle efterfølgende commits udføres på main-branchen. Til sidst fletter vi develop-branchen ind i main-branchen, hvilket giver en merge-commit. Da den aktuelle branch stadig er main på dette tidspunkt, registreres de sidste to commits på denne branch.
Du kan også tilføje lignende egenskaber til din fletning:
- id tilsidesætter standard-ID'et med et brugerdefineret ID
- tag tilføjer et brugerdefineret tag til merge-commit'en
- type tilsidesætter standardtypen for merge-commit'en. Du kan bruge de andre commit-typer nævnt tidligere.
Kopiér
Integrer
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"
Selektiv fletning af commits fra en anden branch
Mermaid understøtter at vælge en commit fra en anden branch ind i den aktuelle branch. Du kan også bruge cherry-pick-syntaksen til at vælge en commit fra en anden branch.
For at bruge cherry-pick-syntaksen skal du angive et id med id-egenskaben og derefter skrive det commit-id, du ønsker, efter kolon : og omslutte det med dobbelte anførselstegn. For eksempel:
Her er nogle vigtige regler at være opmærksom på:
- Du skal angive et id for at vælge en eksisterende commit. Hvis det angivne commit-ID ikke findes, opstår der en fejl. Brug formatet commit id:$value til at deklarere commit'en.
- Den angivne commit må ikke findes på den aktuelle branch, og den valgte commit skal altid komme fra en anden branch end den aktuelle.
- Den aktuelle branch skal have mindst én commit, før der kan udføres cherry-pick, ellers opstår der en fejl.
- Når der vælges en merge-commit, skal der angives et parent-commit-ID. Hvis parent-egenskaben udelades, eller der angives et ugyldigt parent-commit-ID, opstår der en fejl.
- Det angivne parent-commit skal være den direkte forælder til den merge-commit, der vælges.
Kopiér
Integrer
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"
Specifikke konfigurationsmuligheder
I Mermaid Git-diagrammer kan du konfigurere følgende indstillinger:
- showBranches : boolsk værdi, standard er true. Hvis den sættes til false, vises branches ikke.
- showCommitLabel : boolsk værdi, standard er true. Hvis den sættes til false, vises commit-etiketter ikke.
- mainBranchName : streng, standard er main. Navnet på standardbranchen.
- mainBranchOrder : hovedbranchens placering i branchlisten. Standard er 0, hvilket betyder, at main-branchen som standard er nummer 1.
- parallelCommits : boolsk værdi, standard er false. Hvis den sættes til true, vises commits, der er forskudt fra forælderen, på samme niveau.
Skjul branchnavne og forbindelseslinjer
Nogle gange vil du måske skjule branchnavne og forbindelseslinjer. Du kan gøre dette med showBranches-syntaksen. Dens værdi er som standard true, og du kan sætte den til false med en instruktion.
Kopiér
Integrer
---
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
Layout for commit-etiketter: roteret eller vandret
Mermaid understøtter to typer layout for commit-etiketter. Standardlayoutet er roteret, hvilket betyder, at etiketten placeres under commit-cirklen og roteres 45 grader for bedre læsbarhed. Dette er særligt nyttigt for commits med lange etiketter.
En anden type er vandret, hvilket betyder, at etiketten placeres under commit-cirklen og vises vandret centreret uden rotation. Dette er særligt nyttigt for commits med korte etiketter.
Du kan ændre layoutet for commit-etiketter ved at bruge rotateCommitLabel-syntaksen i en instruktion. Den er som standard true, hvilket betyder, at commit-etiketterne roteres.
Anvendelseseksempel: roterede commit-etiketter
Kopiér
Integrer
---
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
Anvendelseseksempel: vandrette commit-etiketter
Kopiér
Integrer
---
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
Skjul commit-etiketter
Nogle gange vil du måske skjule commit-etiketter. Du kan gøre dette med showCommitLabel-syntaksen. Dens værdi er som standard true, og du kan sætte den til false med en instruktion.
Kopiér
Integrer
---
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
Tilpas hovedbranchens navn
Nogle gange vil du måske tilpasse hovedbranchens navn. Du kan gøre dette med mainBranchName-syntaksen. Dens værdi er som standard main, og du kan sætte den til en vilkårlig streng med en instruktion.
Kopiér
Integrer
---
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"
Se et virtuelt metrolinjekort oprettet med Mermaid. Her ændrer vi standardnavnet på hovedbranchen til MetroLine1.
Tilpas branchrækkefølgen
I Mermaid vises branches som standard i den rækkefølge, de er defineret eller optræder i diagramkoden.
Nogle gange vil du måske tilpasse branchrækkefølgen. Du kan gøre dette ved at bruge order-syntaksen ved siden af branchdefinitionen, og du kan sætte den til et positivt tal.
Mermaid følger den prioritetsrækkefølge, der er angivet med order-syntaksen.
- Hovedbranchen vises altid først, fordi dens standardordenværdi er 0. (Medmindre dens rækkefølge er ændret med mainBranchOrder-syntaksen i konfigurationen og flyttet væk fra 0)
- Dernæst vises alle branches uden order i den rækkefølge, de optræder i diagramkoden.
- Dernæst vises alle branches med order i rækkefølgen af deres order-værdi.
For fuldt at kontrollere rækkefølgen af alle branches skal der defineres order for alle branches.
Kopiér
Integrer
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
I figuren ovenfor følger alle branches den definerede rækkefølge.
Kopiér
Integrer
---
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
I figuren ovenfor tegnes alle branches uden angivet rækkefølge i den definerede rækkefølge. Derefter tegnes test4-branchen, fordi dens rækkefølge er 1. Derefter tegnes main-branchen, fordi dens rækkefølge er 2. Til sidst tegnes test1-branchen, fordi dens rækkefølge er 3.
Bemærk: Fordi vi har tilsidesat mainBranchOrder til 2, tegnes main-branchen ikke i begyndelsen, men vises i rækkefølge.
Her ændrer vi standardnavnet på hovedbranchen til MetroLine1.
Retning
Mermaid understøtter tre retninger: fra venstre til højre (standard), fra top til bund og fra bund til top.
Fra venstre til højre (standard, LR:)
I Mermaid kører standardretningen fra venstre til højre, og branches stables oven på hinanden.
Du kan dog eksplicit angive dette ved at bruge LR: efter gitGraph-syntaksen.
Kopiér
Integrer
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Fra top til bund (TB:)
I retningen fra top til bund løber commits fra diagrammets top til bund, og branches arrangeres side om side.
For at orientere grafen på denne måde skal du tilføje TB: efter gitGraph-syntaksen.
Kopiér
Integrer
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Fra bund til top (BT:)
I retningen fra bund til top løber commits fra diagrammets bund til top, og branches arrangeres side om side.
For at orientere grafen på denne måde skal du tilføje BT: efter gitGraph-syntaksen.
Kopiér
Integrer
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Midlertidige commits (parallelCommits: false)
Kopiér
Integrer
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallelle commits (parallelCommits: true)
Kopiér
Integrer
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid understøtter en række brugerdefinerede temaer, som du kan bruge til at finde et tema, der passer til dig. Bemærk: Du kan faktisk tilsidesætte variablerne i et eksisterende tema for at oprette dit eget brugerdefinerede tema.
Følgende er de forskellige muligheder for brugerdefinerede temaer:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
For at ændre temaet kan du bruge initialize-syntaksen.
Grundtema
Kopiér
Integrer
---
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
Skotema
Kopiér
Integrer
---
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
Standardtema
Kopiér
Integrer
---
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
Mørkt tema
Kopiér
Integrer
---
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
Neutralt tema
Kopiér
Integrer
---
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
Tilpas med temavariable
Mermaid giver dig mulighed for at tilpasse dit diagram med temavariable, som styrer udseendet og stilen af diagrammets enkelte elementer.
For at forstå det bruger vi temaet default som eksempel; temavariablernes standardværdier hentes automatisk fra temaet.
Brug temaet default til at angive branchens farve:
Kopiér
Integrer
---
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 understøtter temavariable til at tilsidesætte standardværdier for op til 8 branches, dvs. du kan angive farver for op til 8 branches med temavariable. Efter mere end 8 branches genbruges temavariablerne cyklisk, dvs. den 9. branch bruger stilen fra den 1. branch.
Tilpas branchfarve
Du kan bruge temavariablerne git0 til git7 til at tilpasse branchfarver. Mermaid giver dig mulighed for at angive farver for op til 8 branches, hvor variablen git0 styrer farven på den første branch, git1 styrer farven på den anden branch og så videre.
Bemærk: Standardværdierne for disse temavariabler hentes fra det valgte tema. Hvis du vil tilsidesætte standardværdierne, kan du bruge initialize-syntaksen til at tilføje brugerdefinerede temavariabelværdier.
Eksempel:
Lad os nu tilsidesætte standardværdierne for variablerne git0 til git3:
Kopiér
Integrer
---
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
Tilpas branchetiketfarve
Du kan tilpasse farven på branchetiketter med temavariablerne gitBranchLabel0 til gitBranchLabel7. Mermaid giver dig mulighed for at angive farver for op til 8 branches, hvor variablen gitBranchLabel0 styrer farven på den første branchetiket, variablen gitBranchLabel1 styrer farven på den anden branchetiket og så videre.
Lad os se, hvordan man bruger temaet default til at angive farven på branchetiketter:
Lad os nu tilsidesætte standardværdierne for variablerne gitBranchLabel0 til gitBranchLabel2:
Kopiér
Integrer
---
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
Her kan du se, at farverne og stilen for branch8 og branch9 hentes fra branchene med indeksposition 0 (main) og 1 (branch1).
Tilpas commit-farve
Du kan bruge temavariablerne commitLabelColor og commitLabelBackground til henholdsvis at tilpasse farven og baggrundsfarven for commit-etiketter.
Eksempel: Lad os nu tilsidesætte standardværdierne for variablerne commitLabelColor til commitLabelBackground:
Kopiér
Integrer
---
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
Du kan bruge temavariablen commitLabelFontSize til at tilpasse skriftstørrelsen for commit-etiketter.
Eksempel: Lad os nu tilsidesætte standardværdien for variablen commitLabelFontSize:
Kopiér
Integrer
---
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
Tilpas etiketternes skriftstørrelse
Du kan bruge temavariablen tagLabelFontSize til at tilpasse etiketternes skriftstørrelse.
Eksempel: Lad os nu tilsidesætte standardværdien for variablen tagLabelFontSize:
Kopiér
Integrer
---
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
Tilpas etiketfarve
Du kan bruge temavariablerne tagLabelColor, tagLabelBackground og tagLabelBorder til at tilpasse etiketter og ændre henholdsvis etiketternes tekstfarve, baggrundsfarve og kant.
Eksempel: Lad os nu tilsidesætte standardværdierne for variablerne tagLabelColor, tagLabelBackground og tagLabelBorder:
Kopiér
Integrer
---
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
Tilpas farven på fremhævede commits
Du kan bruge temavariablerne gitInv0 til gitInv7 til at tilpasse farven på fremhævede commits afhængigt af branchen. Mermaid giver dig mulighed for at angive farven på bestemte fremhævede commits for op til 8 branches, hvor variablen gitInv0 styrer farven på den første branchs fremhævede commit, variablen gitInv1 styrer farven på den anden branchs fremhævede commit og så videre.
Lad os nu tilsidesætte standardværdierne for variablerne git0 til git3:
Kopiér
Integrer
---
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
