Git-diagram
Et Git-diagram er en visuell framstilling av git-commits og git-operasjoner på ulike grener.
Git-diagrammet er spesielt nyttig for utviklere og driftsteam, og kan brukes til å dele deres Git-grenstrategi.
Mermaid kan rendre Git-diagrammer
Kopier
Bygg inn
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid støtter grunnleggende git-operasjoner, for eksempel:
- commit : representerer en ny commit på gjeldende gren.
- branch : oppretter og bytter til en ny gren og gjør den samtidig til gjeldende gren.
- checkout : bytter til en eksisterende gren og gjør den til gjeldende gren.
- merge : slår sammen en eksisterende gren inn i gjeldende gren.
Med disse Git-operasjonene kan du svært enkelt og raskt tegne Git-diagrammer i Mermaid. Entitetsnavn begynner vanligvis med stor bokstav, selv om det ikke finnes noen allment anerkjent standard for dette, og det er heller ikke obligatorisk i Mermaid.
Merk: checkout og switch kan brukes om hverandre.
Syntaks
Mermaids syntaks for Git-diagrammer er svært direkte og enkel. Den bruker en deklarativ tilnærming, der hver commit tegnes på Git-diagrammets tidslinje i den rekkefølgen den forekommer i koden. I praksis følger den innsettingsrekkefølgen til hver kommando.
Først deklarerer du diagramtypen med gitGraph -syntaksen. gitGraph -syntaksen forteller Mermaid at du ønsker å tegne et Git-diagram, og tolker diagramkoden deretter.
Hvert Git-diagram initialiseres med grenen main . Med mindre du oppretter en annen gren, går commits som standard inn i hovedgrenen. Dette drives av måten git fungerer på, der du alltid begynner med hovedgrenen. Som standard settes grenen main som gjeldende gren.
Du kan bruke commit -syntaksen til å registrere en commit på gjeldende gren. La oss se hvordan dette fungerer:
Et enkelt git-diagram som viser tre commits på standardgrenen main :
Kopier
Bygg inn
gitGraph
commit
commit
commit
Hvis du ser nøye på det forrige eksempelet, kan du se standardgrenen main og tre commits. Legg også merke til at hver commit som standard gis en unik og tilfeldig ID.
Legg til en egendefinert commit-ID
For en gitt commit kan du angi en egendefinert ID med id -egenskapen ved deklarering, deretter legge til et kolon : , og angi den egendefinerte verdien i doble anførselstegn.
La oss se hvordan dette fungerer med hjelp av diagrammet nedenfor:
Kopier
Bygg inn
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Endre commit-type
I Mermaid finnes det tre typer commits, som rendres litt ulikt i diagrammet. Disse typene er:
- NORMAL : standard commit-type, representert med en fylt sirkel
- REVERSE : framhever at commiten er en omvendt commit, representert med en krysset fylt sirkel.
- HIGHLIGHT : uthever en bestemt commit, representert med en fylt rektangel.
For en gitt commit kan du angi typen med type -egenskapen ved deklarering, etterfulgt av et kolon : og det ønskede typealternativet som er diskutert ovenfor. For eksempel: commit type:
Merk: hvis commit-typen ikke er angitt, velges NORMAL som standard
La oss se hvordan disse ulike typene commits fungerer ved hjelp av diagrammet nedenfor:
Kopier
Bygg inn
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
I dette eksempelet angav vi en ulik type for hver commit. Legg også merke til hvordan vi inkluderte både id og type samtidig når vi deklarerte commitene.
Legg til en tag
For en gitt commit kan du dekorere den med tag , lik konseptet med tagger eller utgivelsesversjoner i git world. Du kan legge til en egendefinert tag med tag -egenskapen når du deklarerer commiten, etterfulgt av et kolon : , og angi den egendefinerte verdien i doble anførselstegn.
Kopier
Bygg inn
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 eksempelet satte vi en egendefinert tag for commiten.
Opprett en ny gren
I Mermaid kan du bruke branch -syntaksen for å opprette en ny gren. Du må også oppgi navnet på den nye grenen. Navnet må være unikt og kan ikke være navnet på en eksisterende gren.
Når Mermaid leser branch -syntaksen, opprettes en ny gren og settes som gjeldende gren. Dette tilsvarer å opprette en ny gren i Git-diagrammet og bytte til den grenen.
Kopier
Bygg inn
gitGraph
commit
commit
branch develop
commit
commit
commit
I dette eksempelet kan du se hvordan vi starter fra standardgrenen main og pusher to commits til den. Deretter oppretter vi grenen develop , og alle påfølgende commits legges på grenen develop , siden den ble gjeldende gren.
Sjekk ut en eksisterende gren
I Mermaid kan du bruke checkout -syntaksen for å bytte til en eksisterende gren, og du må også oppgi navnet på den eksisterende grenen. Hvis det ikke finnes en gren med det angitte navnet, oppstår det en konsollfeil. Brukseksempel: checkout develop
Når Mermaid leser checkout -syntaksen, finner den grenen med det angitte navnet og setter den som gjeldende gren. Dette tilsvarer å sjekke ut en gren i Git.
Kopier
Bygg inn
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
I dette eksempelet starter vi først fra standardgrenen main og pusher to commits til den. Deretter oppretter vi grenen develop , og etterpå legges alle tre commitene på grenen develop , siden den ble gjeldende gren. Senere bruker vi checkout -syntaksen til å sette gjeldende gren til main , og alle påfølgende commits registreres på grenen main .
Slå sammen to grener
I Mermaid må du bruke merge -syntaksen for å slå sammen eller koble til en eksisterende gren. Du må også oppgi navnet på en eksisterende gren som skal slås sammen. Hvis det ikke finnes en gren med det angitte navnet, vises en feil i konsollen. I tillegg kan du bare slå sammen to uavhengige grener, og du kan ikke slå sammen en gren med seg selv.
Syntakseksempel: merge develop
Når Mermaid leser merge -syntaksen, finner den den angitte grenen og dens siste commit, og slår den sammen med gjeldende grens siste commit. Dette vises med en fylt dobbel sirkel.
Følgende er et eksempel på sammenslåing av to grener:
Kopier
Bygg inn
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
I dette eksempelet starter vi først fra grenen main og pusher to commits til den. Deretter oppretter vi grenen develop og pusher tre commits til grenen develop . Senere bruker vi checkout -syntaksen til å sette gjeldende gren til main , og alle påfølgende commits gjøres mot grenen main . Til slutt slår vi grenen develop sammen inn i grenen main , noe som gir en sammenslåingscommit. Siden gjeldende gren fortsatt er main , registreres de to siste commitene på den grenen.
Du kan også legge til lignende egenskaper for sammenslåingen:
- id overstyrer standard-ID-en med en egendefinert ID
- tag legger til en egendefinert tag på sammenslåingscommiten
- type overstyrer standardtypen for sammenslåingscommiten. Du kan bruke de andre commit-typene som er nevnt tidligere.
Kopier
Bygg inn
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 sammenslåing av commits fra en annen gren
Mermaid støtter å plukke en commit fra en annen gren inn i gjeldende gren. Du kan også bruke cherry-pick -syntaksen til å plukke commits fra en annen gren.
For å bruke cherry-pick -syntaksen må du angi id-en med id -egenskapen, og deretter skrive den ønskede commit-id-en etter kolon : , omsluttet av doble anførselstegn. For eksempel:
Her er noen viktige regler å merke seg:
- Du må oppgi en id for å velge en eksisterende commit. Hvis den angitte commit-ID-en ikke finnes, oppstår det en feil. For å gjøre dette bruker du formatet commit id:$value for å deklarere commiten.
- Den angitte commiten må ikke finnes på gjeldende gren. Den plukkede commiten må alltid komme fra en annen gren enn gjeldende gren.
- Gjeldende gren må ha minst én commit før cherry-pick kan utføres, ellers oppstår det en feil.
- Når du plukker en sammenslåingscommit, må du oppgi foreldrecommitens ID. Hvis du utelater foreldre-egenskapen eller oppgir en ugyldig foreldrecommit-ID, utløses en feil.
- Den angitte foreldrecommiten må være den direkte foreldren til sammenslåingscommiten som plukkes.
Kopier
Bygg inn
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"
Bestemte konfigurasjonsalternativer
I et Mermaid Git-diagram kan du konfigurere følgende alternativer:
- showBranches : boolsk verdi, standard er true . Hvis den settes til false , vises ikke grenene.
- showCommitLabel : boolsk verdi, standard er true . Hvis den settes til false , vises ikke commit-etikettene.
- mainBranchName : streng, standard er main . Navnet på standardgrenen.
- mainBranchOrder : hovedgrenens plassering i grenelisten. Standard er 0, noe som betyr at grenen main som standard står på 1. plass.
- parallelCommits : boolsk verdi, standard er false . Hvis den settes til true , vises commits på samme nivå som foreldrenoden på samme nivå.
Skjul grenenavn og forbindelseslinjer
Noen ganger vil du kanskje skjule grenenavn og forbindelseslinjer. Du kan gjøre dette med showBranches -syntaksen. Som standard er verdien true , og du kan sette den til false med en instruks.
Kopier
Bygg inn
---
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
Oppsett for commit-tagger: rotert eller horisontalt
Mermaid støtter to typer oppsett for commit-tagger. Standardoppsettet er rotert, noe som betyr at taggen plasseres under commit-sirkelen og roteres 45 grader for bedre lesbarhet. Dette er spesielt nyttig for commits med lange tagger.
En annen type er horisontal, noe som betyr at taggen plasseres under commit-sirkelen og vises horisontalt sentrert, uten rotasjon. Dette er spesielt nyttig for commits med korte tagger.
Du kan endre oppsettet for commit-tagger ved å bruke rotateCommitLabel -syntaksen i en instruks. Standard er true , noe som betyr at commit-taggene roteres.
Brukseksempel: roterte commit-tagger
Kopier
Bygg inn
---
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
Brukseksempel: horisontale commit-tagger
Kopier
Bygg inn
---
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-tagger
Noen ganger vil du kanskje skjule commit-taggene. Du kan gjøre dette med showCommitLabel -syntaksen. Som standard er verdien true , og du kan sette den til false med en instruks.
Kopier
Bygg inn
---
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
Egendefinert navn på hovedgrenen
Noen ganger vil du kanskje tilpasse navnet på hovedgrenen. Du kan gjøre dette med mainBranchName -syntaksen. Som standard er verdien main , og du kan sette den til en hvilken som helst streng med en instruks.
Kopier
Bygg inn
---
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 på et virtuelt t-banelinjediagram opprettet med Mermaid. Her endrer vi standardnavnet på hovedgrenen til MetroLine1 .
Egendefinert grenerekkefølge
I Mermaid vises grener som standard i den rekkefølgen de er definert eller forekommer i diagramkoden.
Noen ganger vil du kanskje tilpasse grenerekkefølgen. Du kan gjøre dette ved å bruke order -syntaksen ved siden av grenedefinisjonen, og du kan sette den til et positivt tall.
Mermaid følger prioritetsrekkefølgen gitt av order -syntaksen.
- Hovedgrenen vises alltid først, fordi dens standard rekkefølgeverdi er 0. (Med mindre rekkefølgen er endret fra 0 via mainBranchOrder -syntaksen i konfigurasjonen)
- Deretter vises alle grener uten order i den rekkefølgen de forekommer i diagramkoden.
- Deretter vises alle grener med order i rekkefølgen av deres order -verdi.
For å ha full kontroll over rekkefølgen til alle grener må du definere order for alle grener.
Kopier
Bygg inn
---
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 diagrammet ovenfor følger alle grenene den definerte rekkefølgen.
Kopier
Bygg inn
---
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 diagrammet ovenfor tegnes alle grener uten angitt rekkefølge i den rekkefølgen de er definert. Deretter tegnes grenen test4 , fordi dens rekkefølge er 1. Så tegnes grenen main , fordi dens rekkefølge er 2. Til slutt tegnes grenen test1 , fordi dens rekkefølge er 3.
Merk: fordi vi har overstyrt mainBranchOrder til 2, tegnes ikke grenen main i begynnelsen, men vises i den angitte rekkefølgen.
Her endrer vi standardnavnet på hovedgrenen til MetroLine1 .
Retning
Mermaid støtter tre retninger: fra venstre til høyre (standard), fra topp til bunn og fra bunn til topp.
Fra venstre til høyre (standard, LR: )
I Mermaid går standardretningen fra venstre til høyre, med grenene stablet oppå hverandre.
Du kan imidlertid angi dette eksplisitt med LR: etter gitGraph -syntaksen.
Kopier
Bygg inn
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Fra topp til bunn ( TB: )
I retningen fra topp til bunn går commits fra toppen til bunnen av diagrammet, og grenene ordnes side ved side.
For å rette grafen på denne måten må du legge til TB: etter gitGraph -syntaksen.
Kopier
Bygg inn
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Fra bunn til topp ( BT: )
I retningen fra bunn til topp går commits fra bunnen til toppen av diagrammet, og grenene ordnes side ved side.
For å rette grafen på denne måten må du legge til BT: etter gitGraph -syntaksen.
Kopier
Bygg inn
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Midlertidige commits (parallelCommits: false)
Kopier
Bygg inn
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallelle commits (parallelCommits: true)
Kopier
Bygg inn
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid støtter en rekke egendefinerte temaer, som du kan bruke til å finne et tema som passer for deg. Merknad: du kan faktisk overstyre variablene til et eksisterende tema for å lage ditt eget egendefinerte tema.
Følgende er de ulike alternativene for egendefinerte temaer:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
For å endre temaet kan du bruke initialize -syntaksen.
Grunnlagstema
Kopier
Bygg inn
---
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
Skogtema
Kopier
Bygg inn
---
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
Kopier
Bygg inn
---
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
Kopier
Bygg inn
---
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
Nøytralt tema
Kopier
Bygg inn
---
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
Tilpass med temavariabler
Mermaid lar deg tilpasse diagrammet ditt med temavariabler, som styrer utseendet og stilen til de ulike elementene i diagrammet.
For å forstå dette bruker vi temaet default som eksempel. Standardverdiene for temavariablene hentes automatisk fra temaet.
Bruk temaet default til å angi fargen på grenene:
Kopier
Bygg inn
---
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øtter temavariabler for å overstyre standardverdier, med opptil 8 grener, dvs. du kan angi farger for opptil 8 grener med temavariabler. Etter mer enn 8 grener gjenbrukes temavariablene syklisk, dvs. at den 9. grenen bruker stilen til den 1. grenen.
Egendefinert grenfarge
Du kan tilpasse grenfarger med temavariablene git0 til git7 . Mermaid lar deg angi farger for opptil 8 grener, der variabelen git0 styrer fargen på den første grenen, git1 styrer fargen på den andre grenen, og så videre.
Merk: standardverdiene for disse temavariablene hentes fra det valgte temaet. Hvis du vil overstyre standardverdiene, kan du bruke initialize -syntaksen til å legge til egendefinerte verdier for temavariablene.
Eksempel:
La oss nå overstyre standardverdiene for variablene git0 til git3 :
Kopier
Bygg inn
---
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
Egendefinert farge for grenetiketter
Du kan tilpasse fargen på grenetiketter med temavariablene gitBranchLabel0 til gitBranchLabel7 . Mermaid lar deg angi farger for opptil 8 grener, der variabelen gitBranchLabel0 styrer fargen på den første grenetiketten, variabelen gitBranchLabel1 styrer fargen på den andre grenetiketten, og så videre.
La oss se hvordan du bruker temaet default til å angi fargen på grenetikettene:
La oss nå overstyre standardverdiene for variablene gitBranchLabel0 til gitBranchLabel2 :
Kopier
Bygg inn
---
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 fargen og stilen til branch8 og branch9 hentes fra grenene med indeksposisjon 0 ( main ) og 1 ( branch1 ).
Egendefinert commit-farge
Du kan bruke temavariablene commitLabelColor og commitLabelBackground til å tilpasse henholdsvis fargen og bakgrunnsfargen til commit-etikettene.
Eksempel: la oss nå overstyre standardverdiene for variablene commitLabelColor til commitLabelBackground :
Kopier
Bygg inn
---
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 bruke temavariabelen commitLabelFontSize til å tilpasse skriftstørrelsen på commit-etikettene.
Eksempel: la oss nå overstyre standardverdien for variabelen commitLabelFontSize :
Kopier
Bygg inn
---
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
Egendefinert skriftstørrelse for etiketter
Du kan bruke temavariabelen tagLabelFontSize til å tilpasse skriftstørrelsen på etikettene.
Eksempel: la oss nå overstyre standardverdien for variabelen tagLabelFontSize :
Kopier
Bygg inn
---
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
Egendefinert etikettfarge
Du kan bruke temavariablene tagLabelColor , tagLabelBackground og tagLabelBorder til å tilpasse etikettene, og endre henholdsvis etikettens tekstfarge, bakgrunnsfarge og ramme.
Eksempel: la oss nå overstyre standardverdiene for variablene tagLabelColor , tagLabelBackground og tagLabelBorder :
Kopier
Bygg inn
---
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
Egendefinert farge for uthevede commits
Du kan bruke temavariablene gitInv0 til gitInv7 til å tilpasse fargen på uthevede commits basert på hvilken gren de er på. Mermaid lar deg angi fargen på bestemte uthevede commits for opptil 8 grener, der variabelen gitInv0 styrer fargen på den uthevede commiten i den første grenen, variabelen gitInv1 styrer fargen på den uthevede commiten i den andre grenen, og så videre.
La oss nå overstyre standardverdiene for variablene git0 til git3 :
Kopier
Bygg inn
---
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
