Git-diagram
Een Git-diagram is een visuele weergave van git-commits en git-bewerkingen op verschillende branches.
Git-diagrammen zijn bijzonder nuttig voor ontwikkelaars en operationele teams, die ze kunnen gebruiken om hun Git-branchstrategie te delen.
Mermaid kan Git-diagrammen renderen
Kopiëren
Insluiten
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid ondersteunt eenvoudige git-bewerkingen, zoals:
- commit : vertegenwoordigt een nieuwe commit op de huidige branch.
- branch : maakt een nieuwe branch aan, schakelt ernaar over en stelt deze als huidige branch in.
- checkout : schakelt over naar een bestaande branch en stelt deze als huidige branch in.
- merge : voegt een bestaande branch samen met de huidige branch.
Met deze Git-bewerkingen kun je heel gemakkelijk en snel een Git-diagram in Mermaid tekenen. Entiteitsnamen beginnen gewoonlijk met een hoofdletter, hoewel er geen erkende standaard voor is en het in Mermaid niet verplicht is.
Let op: checkout en switch zijn onderling verwisselbaar.
Syntaxis
De Mermaid-syntaxis van Git-diagrammen is zeer direct en eenvoudig. Het gebruikt een declaratieve benadering, waarbij elke commit in de volgorde van voorkomen in de code op de tijdlijn van het Git-diagram wordt getekend. In principe volgt het de invoegvolgorde van elk commando.
Declareer eerst je diagramtype met de syntaxis gitGraph. De gitGraph-syntaxis vertelt Mermaid dat je een Git-diagram wilt tekenen en dat de diagramcode dienovereenkomstig moet worden geparseerd.
Elk Git-diagram wordt geïnitialiseerd met de branch main. Tenzij je verschillende branches aanmaakt, komen commits standaard in de hoofdbranch terecht. Dit komt door de manier waarop git werkt: je begint altijd bij de hoofdbranch. Standaard wordt de branch main als huidige branch ingesteld.
Je kunt met de syntaxis commit een commit op de huidige branch registreren; laten we eens kijken hoe dit werkt:
Een eenvoudig git-diagram dat de drie commits van de standaardbranch main toont:
Kopiëren
Insluiten
gitGraph
commit
commit
commit
Als je goed naar het vorige voorbeeld kijkt, zie je de standaardbranch main en drie commits. Merk ook op dat standaard aan elke commit een unieke en willekeurige ID wordt toegewezen.
Een aangepaste commit-ID toevoegen
Voor een bepaalde commit kun je bij de declaratie een aangepaste ID opgeven met de eigenschap id, gevolgd door een dubbele punt :, en de aangepaste waarde tussen dubbele aanhalingstekens.
Laten we aan de hand van het onderstaande diagram kijken hoe het werkt:
Kopiëren
Insluiten
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Het commit-type wijzigen
In Mermaid zijn er drie soorten commits, die er in het diagram iets verschillend uitzien. Deze types zijn:
- NORMAL : het standaard commit-type, weergegeven met een massieve cirkel
- REVERSE : benadrukt dat de commit een omgekeerde commit is, weergegeven met een gekruiste massieve cirkel.
- HIGHLIGHT : markeert een specifieke commit, weergegeven met een massieve rechthoek.
Voor een bepaalde commit kun je bij de declaratie met de eigenschap type het type opgeven, gevolgd door een dubbele punt : en de hierboven besproken gewenste typeoptie. Bijvoorbeeld: commit type:
Let op: als er geen commit-type is opgegeven, wordt standaard NORMAL gekozen
Laten we aan de hand van het onderstaande diagram kijken hoe deze verschillende commit-types verlopen:
Kopiëren
Insluiten
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
In dit voorbeeld hebben we voor elke commit een ander type opgegeven. Kijk ook hoe we bij het declareren van de commits zowel id als type hebben opgenomen.
Een label toevoegen
Voor een bepaalde commit kun je deze met tag versieren, vergelijkbaar met het concept van een label of release in de git-wereld. Je kunt bij de declaratie van de commit een aangepast label toevoegen met de eigenschap tag, gevolgd door een dubbele punt :, en de aangepaste waarde tussen dubbele aanhalingstekens.
Kopiëren
Insluiten
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
In dit voorbeeld hebben we een aangepast label voor de commit ingesteld.
Een nieuwe branch aanmaken
In Mermaid kun je om een nieuwe branch aan te maken de syntaxis branch gebruiken. Je moet ook de naam van de nieuwe branch opgeven. De naam moet uniek zijn en mag geen naam van een bestaande branch zijn.
Wanneer Mermaid de syntaxis branch leest, wordt een nieuwe branch aangemaakt en als huidige branch ingesteld. Dit komt overeen met het aanmaken van een nieuwe branch in een Git-diagram en het overschakelen naar die branch.
Kopiëren
Insluiten
gitGraph
commit
commit
branch develop
commit
commit
commit
In dit voorbeeld kun je zien hoe we beginnen met de standaardbranch main en daarop twee commits pushen. Vervolgens maken we de branch develop aan, en alle daaropvolgende commits komen op de branch develop terecht, omdat deze de huidige branch is geworden.
Een bestaande branch uitchecken
In Mermaid kun je om naar een bestaande branch over te schakelen de syntaxis checkout gebruiken, en je moet ook de naam van de bestaande branch opgeven. Als er geen branch met de opgegeven naam wordt gevonden, ontstaat er een console-fout. Gebruiksvoorbeeld: checkout develop
Wanneer Mermaid de syntaxis checkout leest, wordt de branch met de opgegeven naam gevonden en als huidige branch ingesteld. Dit komt overeen met het uitchecken van een branch in Git.
Kopiëren
Insluiten
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
In dit voorbeeld beginnen we eerst met de standaardbranch main en pushen daarop twee commits. Vervolgens maken we de branch develop aan, waarna alle drie de commits op de branch develop terechtkomen, omdat deze de huidige branch is geworden. Daarna stellen we met de syntaxis checkout de huidige branch in op main, en alle daaropvolgende commits worden geregistreerd op de branch main.
Twee branches samenvoegen
In Mermaid moet je om een bestaande branch samen te voegen of te verbinden de syntaxis merge gebruiken. Je moet ook de naam opgeven van een bestaande branch die moet worden samengevoegd. Als er geen branch met de opgegeven naam wordt gevonden, wordt er een fout in de console weergegeven. Bovendien kun je alleen twee afzonderlijke branches samenvoegen; je kunt een branch niet met zichzelf samenvoegen.
Syntaxisvoorbeeld: merge develop
Wanneer Mermaid de syntaxis merge leest, wordt de opgegeven branch en de laatste commit daarvan gevonden en samengevoegd met de laatste commit van de huidige branch. Weergegeven met een massieve dubbele cirkel.
Hieronder volgt een voorbeeld van het samenvoegen van twee branches:
Kopiëren
Insluiten
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
In dit voorbeeld wordt eerst begonnen met de branch main en worden daarop twee commits gepusht. Vervolgens maken we de branch develop aan en pushen drie commits op de branch develop. Daarna stellen we met de syntaxis checkout de huidige branch in op main, en alle daaropvolgende commits zijn voor de branch main. Ten slotte voegen we de branch develop samen met de branch main, wat een samenvoegcommit oplevert. Omdat de huidige branch op dat moment nog steeds main is, worden de laatste twee commits op die branch geregistreerd.
Je kunt ook vergelijkbare eigenschappen aan je samenvoeging toevoegen:
- id overschrijft de standaard-ID met een aangepaste ID
- tag voegt een aangepast label toe aan de samenvoegcommit
- type overschrijft het standaardtype van de samenvoegcommit. Je kunt de eerder genoemde andere commit-types gebruiken.
Kopiëren
Insluiten
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"
Selectief commits uit een andere branch samenvoegen
Mermaid ondersteunt het oppikken van een commit van een andere branch naar de huidige branch. Je kunt ook de syntaxis cherry-pick gebruiken om een commit uit een andere branch op te pikken.
Om de syntaxis cherry-pick te gebruiken, moet je met de eigenschap id een id opgeven, en na de dubbele punt : de gewenste commit-id schrijven, tussen dubbele aanhalingstekens. Bijvoorbeeld:
Hier zijn enkele belangrijke regels om op te letten:
- Je moet een id opgeven om een bestaande commit te selecteren. Als de opgegeven commit-ID niet bestaat, ontstaat er een fout. Gebruik hiervoor het formaat commit id:$value om een commit te declareren.
- De opgegeven commit mag niet op de huidige branch bestaan; de opgepikte commit moet altijd van een andere branch dan de huidige afkomstig zijn.
- De huidige branch moet ten minste één commit hebben voordat cherry-pick mogelijk is, anders ontstaat er een fout.
- Bij het oppikken van een samenvoegcommit moet een parent-commit-ID worden opgegeven. Als de parent-eigenschap wordt weggelaten of een ongeldige parent-commit-ID wordt opgegeven, wordt een fout veroorzaakt.
- De opgegeven parent-commit moet de directe parent zijn van de samenvoegcommit die wordt opgepikt.
Kopiëren
Insluiten
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"
Specifieke configuratieopties
In een Mermaid Git-diagram kun je de volgende opties configureren:
- showBranches : booleaanse waarde, standaard true. Als deze op false wordt ingesteld, worden branches niet weergegeven.
- showCommitLabel : booleaanse waarde, standaard true. Als deze op false wordt ingesteld, worden commit-labels niet weergegeven.
- mainBranchName : tekenreeks, standaard main. De naam van de standaardbranch.
- mainBranchOrder : de positie van de hoofdbranch in de lijst met branches. Standaard 0, wat betekent dat de branch main standaard op de eerste plaats staat.
- parallelCommits : booleaanse waarde, standaard false. Als deze op true wordt ingesteld, worden commits op dezelfde afstand van de parent op hetzelfde niveau weergegeven.
Branchnamen en verbindingslijnen verbergen
Soms wil je misschien branchnamen en verbindingslijnen verbergen. Dit kun je doen met de syntaxis showBranches. Standaard is de waarde true; je kunt deze met een instructie op false instellen.
Kopiëren
Insluiten
---
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
Lay-out van commit-labels: geroteerd of horizontaal
Mermaid ondersteunt twee soorten lay-outs voor commit-labels. De standaardlay-out is geroteerd, wat betekent dat het label onder de commit-cirkel wordt geplaatst en 45 graden geroteerd voor betere leesbaarheid. Dit is bijzonder nuttig voor commits met lange labels.
Een ander type is horizontaal, wat betekent dat het label onder de commit-cirkel wordt geplaatst en horizontaal gecentreerd wordt weergegeven, zonder rotatie. Dit is bijzonder nuttig voor commits met korte labels.
Je kunt de lay-out van commit-labels wijzigen met de syntaxis rotateCommitLabel in de instructie. Standaard is deze true, wat betekent dat commit-labels worden geroteerd.
Gebruiksvoorbeeld: geroteerde commit-labels
Kopiëren
Insluiten
---
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
Gebruiksvoorbeeld: horizontale commit-labels
Kopiëren
Insluiten
---
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-labels verbergen
Soms wil je misschien commit-labels verbergen. Dit kun je doen met de syntaxis showCommitLabel. Standaard is de waarde true; je kunt deze met een instructie op false instellen.
Kopiëren
Insluiten
---
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
Aangepaste naam van de hoofdbranch
Soms wil je misschien de naam van de hoofdbranch aanpassen. Dit kun je doen met de syntaxis mainBranchName. Standaard is de waarde main; je kunt deze met een instructie op elke willekeurige tekenreeks instellen.
Kopiëren
Insluiten
---
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"
Bekijk het virtuele metrolijndiagram dat met Mermaid is gemaakt. Hier hebben we de standaardnaam van de hoofdbranch gewijzigd in MetroLine1.
Aangepaste branchvolgorde
In Mermaid worden branches standaard weergegeven in de volgorde waarin ze in de diagramcode zijn gedefinieerd of voorkomen.
Soms wil je misschien de branchvolgorde aanpassen. Dit kun je doen met de syntaxis order naast de branchdefinitie, die je op een positief getal kunt instellen.
Mermaid volgt de prioriteitsorde die door de syntaxis order wordt gegeven.
- De hoofdbranch wordt altijd eerst weergegeven, omdat de standaard ordeningswaarde 0 is. (Tenzij de volgorde ervan via de syntaxis mainBranchOrder in de configuratie is gewijzigd en van 0 is veranderd)
- Vervolgens worden alle branches zonder order weergegeven in de volgorde waarin ze in de diagramcode voorkomen.
- Vervolgens worden alle branches met order weergegeven in de volgorde van hun order-waarde.
Om volledige controle te hebben over de volgorde van alle branches, moet voor alle branches een order worden gedefinieerd.
Kopiëren
Insluiten
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
In de bovenstaande afbeelding volgen alle branches de gedefinieerde volgorde.
Kopiëren
Insluiten
---
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
In de bovenstaande afbeelding worden alle branches zonder opgegeven volgorde getekend in de volgorde waarin ze zijn gedefinieerd. Vervolgens wordt de branch test4 getekend, omdat de volgorde 1 is. Daarna wordt de branch main getekend, omdat de volgorde 2 is. Ten slotte wordt de branch test1 getekend, omdat de volgorde 3 is.
Let op: omdat we mainBranchOrder naar 2 hebben overschreven, wordt de branch main niet in het begin getekend, maar in volgorde weergegeven.
Hier wijzigen we de standaardnaam van de hoofdbranch in MetroLine1.
Richting
Mermaid ondersteunt drie richtingen: van links naar rechts (standaard), van boven naar beneden en van beneden naar boven.
Van links naar rechts (standaard, LR:)
In Mermaid loopt de standaardrichting van links naar rechts, waarbij branches op elkaar worden gestapeld.
Je kunt deze waarde echter expliciet instellen met LR: na de syntaxis gitGraph.
Kopiëren
Insluiten
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Van boven naar beneden (TB:)
In de richting van boven naar beneden lopen commits van de bovenkant naar de onderkant van het diagram, en branches worden naast elkaar gerangschikt.
Om de grafiek op deze manier te richten, moet je TB: toevoegen na de syntaxis gitGraph.
Kopiëren
Insluiten
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Van beneden naar boven (BT:)
In de richting van beneden naar boven lopen commits van de onderkant naar de bovenkant van het diagram, en branches worden naast elkaar gerangschikt.
Om de grafiek op deze manier te richten, moet je BT: toevoegen na de syntaxis gitGraph.
Kopiëren
Insluiten
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Tijdelijke commits (parallelCommits: false)
Kopiëren
Insluiten
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallelle commits (parallelCommits: true)
Kopiëren
Insluiten
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Thema
Mermaid ondersteunt een reeks aangepaste thema's die je kunt gebruiken om een thema te vinden dat bij je past. Opmerking: je kunt in feite de variabelen van een bestaand thema overschrijven om je eigen aangepaste thema te maken.
Hieronder volgen de verschillende opties voor aangepaste thema's:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Om het thema te wijzigen kun je de syntaxis initialize gebruiken.
Basisthema
Kopiëren
Insluiten
---
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
Bosthema
Kopiëren
Insluiten
---
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
Standaardthema
Kopiëren
Insluiten
---
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
Donker thema
Kopiëren
Insluiten
---
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
Neutraal thema
Kopiëren
Insluiten
---
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
Aanpassen met themavariabelen
Mermaid staat toe om je diagram aan te passen met themavariabelen, die het uiterlijk en de stijl van de verschillende elementen van het diagram bepalen.
Laten we voor de duidelijkheid het thema default als voorbeeld nemen; de standaardwaarden van de themavariabelen worden automatisch uit het thema gekozen.
Het thema default gebruiken om de kleur van branches in te stellen:
Kopiëren
Insluiten
---
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 ondersteunt themavariabelen om de standaardwaarden te overschrijven, voor maximaal 8 branches; dat wil zeggen dat je met themavariabelen de kleuren van maximaal 8 branches kunt instellen. Na meer dan 8 branches worden de themavariabelen cyclisch hergebruikt, dat wil zeggen dat de 9e branch de stijl van de 1e branch gebruikt.
Aangepaste branchkleur
Je kunt de themavariabelen git0 tot git7 gebruiken om de branchkleuren aan te passen. Mermaid staat toe om de kleuren van maximaal 8 branches in te stellen, waarbij de variabele git0 de kleur van de eerste branch bepaalt, git1 de kleur van de tweede branch, enzovoort.
Let op: de standaardwaarden van deze themavariabelen worden uit het gekozen thema gekozen. Als je de standaardwaarden wilt overschrijven, kun je de syntaxis initialize gebruiken om aangepaste themavariabelewaarden toe te voegen.
Voorbeeld:
Laten we nu de standaardwaarden van de variabelen git0 tot git3 overschrijven:
Kopiëren
Insluiten
---
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
Aangepaste kleur van branchlabels
Je kunt de themavariabelen gitBranchLabel0 tot gitBranchLabel7 gebruiken om de kleur van branchlabels aan te passen. Mermaid staat toe om de kleuren van maximaal 8 branches in te stellen, waarbij de variabele gitBranchLabel0 de kleur van het eerste branchlabel bepaalt, de variabele gitBranchLabel1 de kleur van het tweede branchlabel, enzovoort.
Laten we eens kijken hoe we met het thema default de kleur van branchlabels instellen:
Laten we nu de standaardwaarden van de variabelen gitBranchLabel0 tot gitBranchLabel2 overschrijven:
Kopiëren
Insluiten
---
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
Hier kun je zien dat de kleuren en stijlen van branch8 en branch9 respectievelijk worden overgenomen van de branches op indexpositie 0 (main) en 1 (branch1).
Aangepaste commitkleur
Je kunt de themavariabelen commitLabelColor en commitLabelBackground gebruiken om respectievelijk de kleur en de achtergrondkleur van commit-labels aan te passen.
Voorbeeld: laten we nu de standaardwaarden van de variabelen commitLabelColor tot commitLabelBackground overschrijven:
Kopiëren
Insluiten
---
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
Je kunt de themavariabele commitLabelFontSize gebruiken om de lettergrootte van commit-labels aan te passen.
Voorbeeld: laten we nu de standaardwaarde van de variabele commitLabelFontSize overschrijven:
Kopiëren
Insluiten
---
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
Aangepaste lettergrootte van labels
Je kunt de themavariabele tagLabelFontSize gebruiken om de lettergrootte van labels aan te passen.
Voorbeeld: laten we nu de standaardwaarde van de variabele tagLabelFontSize overschrijven:
Kopiëren
Insluiten
---
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
Aangepaste labelkleur
Je kunt de themavariabelen tagLabelColor, tagLabelBackground en tagLabelBorder gebruiken om labels aan te passen, respectievelijk de kleur van de labeltekst, de achtergrondkleur van het label en de rand van het label.
Voorbeeld: laten we nu de standaardwaarden van de variabelen tagLabelColor, tagLabelBackground en tagLabelBorder overschrijven:
Kopiëren
Insluiten
---
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
Aangepaste kleur van gemarkeerde commits
Je kunt de themavariabelen gitInv0 tot gitInv7 gebruiken om de kleur van gemarkeerde commits aan te passen op basis van de branch waarin ze zich bevinden. Mermaid staat toe om de kleur van specifieke gemarkeerde commits voor maximaal 8 branches in te stellen, waarbij de variabele gitInv0 de kleur van de gemarkeerde commit van de eerste branch bepaalt, de variabele gitInv1 de kleur van de gemarkeerde commit van de tweede branch, enzovoort.
Laten we nu de standaardwaarden van de variabelen git0 tot git3 overschrijven:
Kopiëren
Insluiten
---
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
