Git-diagram
Git-diagram är en visuell representation av git-commits och git-operationer på olika grenar.
Git-diagram är särskilt användbara för utvecklare och driftsteam, och kan användas för att dela sin Git-grenstrategi.
Mermaid kan rendera Git-diagram
Kopiera
Bädda in
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid stöder grundläggande git-operationer, till exempel:
- commit : representerar en ny commit på den aktuella grenen.
- branch : skapar och växlar till en ny gren samtidigt som den görs till aktuell gren.
- checkout : växlar till en befintlig gren och gör den till aktuell gren.
- merge : slår samman en befintlig gren med den aktuella grenen.
Med hjälp av dessa Git-operationer kan du mycket enkelt och snabbt rita Git-diagram i Mermaid. Entitetsnamn börjar vanligtvis med versaler, även om det inte finns någon erkänd standard för detta och det inte heller är obligatoriskt i Mermaid.
Obs: checkout och switch kan användas omväxlande.
Syntax
Mermaid-syntaxen för Git-diagram är mycket direkt och enkel. Den använder en deklarativ metod, och varje commit ritas på Git-diagrammets tidslinje i den ordning de förekommer i koden. I grund och botten följer den infogningsordningen för varje kommando.
Deklarera först din diagramtyp med gitGraph -syntaxen. gitGraph -syntaxen talar om för Mermaid att du vill rita ett Git-diagram och tolkar diagramkoden därefter.
Varje Git-diagram initieras med grenen main . Om du inte skapar olika grenar hamnar commits på huvudgrenen som standard. Detta drivs av hur git fungerar; i början börjar du alltid från huvudgrenen. Som standard är grenen main inställd som aktuell gren.
Du kan registrera en commit på den aktuella grenen med commit -syntaxen; låt oss se hur detta fungerar:
Ett enkelt git-diagram som visar tre commits på standardgrenen main :
Kopiera
Bädda in
gitGraph
commit
commit
commit
Om du tittar noga på föregående exempel kan du se standardgrenen main och tre commits. Notera också att varje commit som standard tilldelas ett unikt och slumpmässigt ID.
Lägg till ett anpassat commit-ID
För en viss commit kan du ange ett anpassat ID med egenskapen id vid deklarationen, följt av ett kolon : och ett anpassat värde inom dubbla citattecken.
Låt oss se hur det fungerar med hjälp av figuren nedan:
Kopiera
Bädda in
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Ändra commit-typ
I Mermaid finns det tre typer av commits, som renderas något olika i diagrammet. Dessa typer är:
- NORMAL : standardtyp av commit, representeras av en fylld cirkel
- REVERSE : betonar att commiten är en omvänd commit, representeras av en korsad fylld cirkel.
- HIGHLIGHT : markerar en specifik commit, representeras av en fylld rektangel.
För en given commit kan du ange dess typ med egenskapen type vid deklarationen, följt av ett kolon : och önskat typalternativ som diskuterats ovan. Till exempel: commit type:
Obs: om ingen commit-typ anges väljs NORMAL som standard
Låt oss se hur dessa olika typer av commits fungerar genom figuren nedan:
Kopiera
Bädda in
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
I detta exempel har vi angett en annan typ för varje commit. Se också hur vi inkluderar både id och type när vi deklarerar commiten.
Lägg till en tagg
För en given commit kan du dekorera den med tag , liknande konceptet med taggar eller utgåvor i git-världen. Du kan bifoga en anpassad tagg med egenskapen tag vid deklarationen av commiten, följt av ett kolon : och ett anpassat värde inom dubbla citattecken.
Kopiera
Bädda in
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 detta exempel har vi angett en anpassad tagg för commiten.
Skapa en ny gren
För att skapa en ny gren i Mermaid kan du använda branch -syntaxen. Du måste också ange namnet på den nya grenen. Namnet måste vara unikt och får inte vara namnet på en befintlig gren.
När Mermaid läser branch -syntaxen skapas en ny gren och görs till aktuell gren. Det motsvarar att du skapar en ny gren i ett Git-diagram och växlar till den.
Kopiera
Bädda in
gitGraph
commit
commit
branch develop
commit
commit
commit
I detta exempel kan du se hur vi börjar från standardgrenen main och gör två commits på den. Sedan skapar vi grenen develop, och alla efterföljande commits hamnar på grenen develop eftersom den blev aktuell gren.
Checka ut en befintlig gren
För att växla till en befintlig gren i Mermaid kan du använda checkout -syntaxen, och du måste också ange namnet på den befintliga grenen. Om ingen gren med det angivna namnet hittas uppstår ett konsolfel. Användningsexempel: checkout develop
När Mermaid läser checkout -syntaxen hittar den grenen med det angivna namnet och gör den till aktuell gren. Detta motsvarar att checka ut en gren i Git.
Kopiera
Bädda in
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
I detta exempel börjar vi först från standardgrenen main och gör två commits på den. Sedan skapar vi grenen develop, och alla tre efterföljande commits hamnar på grenen develop eftersom den blev aktuell gren. Därefter använder vi checkout -syntaxen för att ställa in den aktuella grenen till main, och alla efterföljande commits registreras på grenen main.
Slå samman två grenar
För att slå samman eller ansluta till en befintlig gren i Mermaid behöver du använda merge -syntaxen. Du måste också ange namnet på en befintlig gren som ska slås samman. Om ingen gren med det angivna namnet hittas visas ett fel i konsolen. Dessutom kan du bara slå samman två separata grenar; du kan inte slå samman en gren med sig själv.
Syntaxexempel: merge develop
När Mermaid läser merge -syntaxen hittar den den angivna grenen och dess senaste commit och slår samman den med den aktuella grenens senaste commit. Representeras av en fylld dubbelcirkel.
Följande är ett exempel på att slå samman två grenar:
Kopiera
Bädda in
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
I detta exempel börjar vi först från grenen main och gör två commits på den. Sedan skapar vi grenen develop och gör tre commits på grenen develop. Därefter använder vi checkout -syntaxen för att ställa in den aktuella grenen till main, och alla efterföljande commits görs mot grenen main. Slutligen slår vi samman grenen develop med grenen main, vilket skapar en sammanslagningscommit. Eftersom den aktuella grenen fortfarande är main registreras de två sista commits på den grenen.
Du kan också lägga till liknande egenskaper för din sammanslagning:
- id åsidosätter standard-ID:t med ett anpassat ID
- tag lägger till en anpassad tagg till sammanslagningscommiten
- type åsidosätter standardtypen för sammanslagningscommiten. Du kan använda de andra commit-typerna som nämnts tidigare.
Kopiera
Bädda in
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 sammanslagning av commits från en annan gren
Mermaid stöder att plocka en commit från en annan gren till den aktuella grenen. Du kan också använda cherry-pick -syntaxen för att plocka en commit från en annan gren.
För att använda cherry-pick -syntaxen måste du ange id med egenskapen id och sedan skriva önskat commit-id efter kolonet : , omgivet av dubbla citattecken. Till exempel:
Här finns några viktiga regler att observera:
- Du måste ange id för att välja en befintlig commit. Om det angivna commit-ID:t inte finns uppstår ett fel. Använd formatet commit id:$value för att deklarera en commit.
- Den angivna commiten får inte finnas på den aktuella grenen; den plockade commiten måste alltid komma från en annan gren än den aktuella grenen.
- Den aktuella grenen måste ha minst en commit innan cherry-pick kan utföras, annars uppstår ett fel.
- När en sammanslagningscommit plockas måste föräldracommit-ID:t anges. Om föräldraegenskapen utelämnas eller ett ogiltigt föräldracommit-ID anges uppstår ett fel.
- Den angivna föräldracommiten måste vara den direkta föräldern till den sammanslagningscommit som plockas.
Kopiera
Bädda in
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"
Specifika konfigurationsalternativ
I Mermaid Git-diagram kan du konfigurera följande alternativ:
- showBranches : booleskt värde, standardvärdet är true. Om den är inställd på false visas inga grenar.
- showCommitLabel : booleskt värde, standardvärdet är true. Om den är inställd på false visas inga commit-etiketter.
- mainBranchName : sträng, standardvärdet är main. Namnet på standardgrenen.
- mainBranchOrder : huvudgrenens position i grenlistan. Standardvärdet är 0, vilket innebär att grenen main som standard ligger på första plats.
- parallelCommits : booleskt värde, standardvärdet är false. Om den är inställd på true visas commits på avstånd från föräldern på samma nivå.
Dölj grennamn och förbindelselinjer
Ibland kanske du vill dölja grennamn och förbindelselinjer. Du kan göra detta med showBranches -syntaxen. Som standard är dess värde true, och du kan ställa in det på false med ett direktiv.
Kopiera
Bädda in
---
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 för commit-etiketter: roterad eller horisontell
Mermaid stöder två typer av layout för commit-etiketter. Standardlayouten är roterad, vilket innebär att etiketten placeras nedanför commit-cirkeln och roteras 45 grader för bättre läsbarhet. Detta är särskilt användbart för commits med långa etiketter.
Den andra typen är horisontell, vilket innebär att etiketten placeras nedanför commit-cirkeln och visas horisontellt centrerad, utan rotation. Detta är särskilt användbart för commits med korta etiketter.
Du kan ändra layouten för commit-etiketter med rotateCommitLabel -syntaxen i ett direktiv. Standardvärdet är true, vilket innebär att commit-etiketterna roteras.
Användningsexempel: roterade commit-etiketter
Kopiera
Bädda in
---
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
Användningsexempel: horisontella commit-etiketter
Kopiera
Bädda in
---
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
Dölj commit-etiketter
Ibland kanske du vill dölja commit-etiketter. Du kan göra detta med showCommitLabel -syntaxen. Som standard är dess värde true, och du kan ställa in det på false med ett direktiv.
Kopiera
Bädda in
---
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
Anpassa huvudgrenens namn
Ibland kanske du vill anpassa huvudgrenens namn. Du kan göra detta med mainBranchName -syntaxen. Som standard är dess värde main, och du kan ställa in det på vilken sträng som helst med ett direktiv.
Kopiera
Bädda in
---
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"
Titta på ett virtuellt tunnelbanediagram skapat med Mermaid. Här ändrar vi standardnamnet på huvudgrenen till MetroLine1.
Anpassa grenordningen
I Mermaid visas grenar som standard i den ordning de definieras eller förekommer i diagramkoden.
Ibland kanske du vill anpassa grenordningen. Du kan göra detta med order -syntaxen bredvid grendefinitionen, och du kan ställa in den på ett positivt tal.
Mermaid följer den prioritetsordning som ges av order -syntaxen.
- Huvudgrenen visas alltid först, eftersom dess standardordningsvärde är 0. (Om inte dess ordning har ändrats från 0 via mainBranchOrder -syntaxen i konfigurationen)
- Därefter visas alla grenar utan order i den ordning de förekommer i diagramkoden.
- Därefter visas alla grenar med order i ordning efter sina order -värden.
För att helt styra ordningen för alla grenar måste order definieras för alla grenar.
Kopiera
Bädda in
---
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 ovan följer alla grenar den definierade ordningen.
Kopiera
Bädda in
---
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 ovan ritas alla grenar utan angiven ordning i den ordning de definieras. Därefter ritas grenen test4, eftersom dess ordning är 1. Sedan ritas grenen main, eftersom dess ordning är 2. Slutligen ritas grenen test1, eftersom dess ordning är 3.
Obs: eftersom vi har åsidosatt mainBranchOrder till 2 ritas grenen main inte i början, utan visas i ordning.
Här ändrar vi standardnamnet på huvudgrenen till MetroLine1.
Riktning
Mermaid stöder tre riktningar: vänster till höger (standard), uppifrån och ned samt nedifrån och upp.
Vänster till höger (standard, LR:)
I Mermaid går standardriktningen från vänster till höger, med grenarna staplade ovanpå varandra.
Men du kan explicit ställa in detta värde med LR: efter gitGraph -syntaxen.
Kopiera
Bädda in
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Uppifrån och ned (TB:)
I riktningen uppifrån och ned går commits från diagrammets överkant till nederkant, och grenarna ordnas sida vid sida.
För att orientera figuren på detta sätt behöver du lägga till TB: efter gitGraph -syntaxen.
Kopiera
Bädda in
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Nedifrån och upp (BT:)
I riktningen nedifrån och upp går commits från diagrammets nederkant till överkant, och grenarna ordnas sida vid sida.
För att orientera figuren på detta sätt behöver du lägga till BT: efter gitGraph -syntaxen.
Kopiera
Bädda in
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Tillfälliga commits (parallelCommits: false)
Kopiera
Bädda in
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallella commits (parallelCommits: true)
Kopiera
Bädda in
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid stöder en rad anpassade teman som du kan använda för att hitta ett tema som passar dig. Anmärkning: du kan faktiskt åsidosätta variablerna i ett befintligt tema för att skapa ditt eget anpassade tema.
Följande är de olika anpassade temaalternativen:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
För att ändra temat kan du använda initialize -syntaxen.
Bastema
Kopiera
Bädda in
---
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
Skogstema
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
Kopiera
Bädda in
---
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
Anpassa med temavariabler
Mermaid låter dig anpassa ditt diagram med temavariabler, som styr utseendet och stilen för diagrammets olika element.
För att förstå detta tar vi temat default som exempel; standardvärdena för temavariablerna hämtas automatiskt från temat.
Använd temat default för att ställa in grenens färg:
Kopiera
Bädda in
---
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 stöder temavariabler för att åsidosätta standardvärden, med upp till 8 grenar, det vill säga du kan ange färger för upp till 8 grenar med temavariabler. Efter fler än 8 grenar återanvänds temavariablerna cykliskt, det vill säga den 9:e grenen använder den 1:a grenens stil.
Anpassa grenfärg
Du kan anpassa grenfärger med temavariablerna git0 till git7. Mermaid låter dig ange färger för upp till 8 grenar, där variabeln git0 styr färgen för den första grenen, git1 styr färgen för den andra grenen, och så vidare.
Obs: standardvärdena för dessa temavariabler hämtas från det valda temat. Om du vill åsidosätta standardvärdena kan du använda initialize -syntaxen för att lägga till anpassade temavariabelvärden.
Exempel:
Låt oss nu åsidosätta standardvärdena för variablerna git0 till git3:
Kopiera
Bädda in
---
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
Anpassa färgen på grenetiketter
Du kan anpassa färgen på grenetiketter med temavariablerna gitBranchLabel0 till gitBranchLabel7. Mermaid låter dig ange färger för upp till 8 grenar, där variabeln gitBranchLabel0 styr färgen för den första grenetiketten, variabeln gitBranchLabel1 styr färgen för den andra grenetiketten, och så vidare.
Låt oss se hur man använder temat default för att ställa in färgen på grenetiketter:
Låt oss nu åsidosätta standardvärdena för variablerna gitBranchLabel0 till gitBranchLabel2:
Kopiera
Bädda in
---
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
Här kan du se att färgen och stilen för branch8 och branch9 hämtas från grenarna med indexposition 0 (main) respektive 1 (branch1).
Anpassa commit-färg
Du kan använda temavariablerna commitLabelColor och commitLabelBackground för att anpassa färgen respektive bakgrundsfärgen för commit-etiketter.
Exempel: låt oss nu åsidosätta standardvärdena för variablerna commitLabelColor till commitLabelBackground:
Kopiera
Bädda in
---
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 anpassa teckenstorleken för commit-etiketter med temavariabeln commitLabelFontSize.
Exempel: låt oss nu åsidosätta standardvärdet för variabeln commitLabelFontSize:
Kopiera
Bädda in
---
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
Anpassa etikettens teckenstorlek
Du kan anpassa teckenstorleken för etiketter med temavariabeln tagLabelFontSize.
Exempel: låt oss nu åsidosätta standardvärdet för variabeln tagLabelFontSize:
Kopiera
Bädda in
---
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
Anpassa etikettfärg
Du kan anpassa etiketter med temavariablerna tagLabelColor, tagLabelBackground och tagLabelBorder, vilka ändrar etikettens textfärg, bakgrundsfärg respektive kant.
Exempel: låt oss nu åsidosätta standardvärdena för variablerna tagLabelColor, tagLabelBackground och tagLabelBorder:
Kopiera
Bädda in
---
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
Anpassa färgen för markerade commits
Du kan anpassa färgen för markerade commits utifrån vilken gren de tillhör med temavariablerna gitInv0 till gitInv7. Mermaid låter dig ange specifika färger för markerade commits för upp till 8 grenar, där variabeln gitInv0 styr färgen för den första grenens markerade commit, variabeln gitInv1 styr färgen för den andra grenens markerade commit, och så vidare.
Låt oss nu åsidosätta standardvärdena för variablerna git0 till git3:
Kopiera
Bädda in
---
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
