Diagramma Git
Il grafico Git è una rappresentazione visiva dei commit git e delle operazioni git sui diversi rami.
Il grafico Git è particolarmente utile per sviluppatori e team di operations, e può essere usato per condividere la loro strategia di ramificazione Git.
Mermaid può renderizzare il grafico Git
Copia
Incorpora
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid supporta le operazioni git di base, come:
- commit : rappresenta un nuovo commit sul ramo corrente.
- branch : crea e passa a un nuovo ramo, impostandolo come ramo corrente.
- checkout : passa a un ramo esistente e lo imposta come ramo corrente.
- merge : unisce un ramo esistente al ramo corrente.
Con queste operazioni Git, puoi disegnare un grafico Git in Mermaid in modo molto semplice e rapido. I nomi delle entità di solito iniziano con la lettera maiuscola, anche se non esiste uno standard universalmente riconosciuto per questo e non è obbligatorio in Mermaid.
Nota: checkout e switch possono essere usati in modo intercambiabile.
Sintassi
La sintassi Mermaid del grafico Git è molto diretta e semplice. Adotta un approccio dichiarativo: ogni commit viene disegnato sulla timeline del grafico Git secondo l'ordine in cui compare nel codice. Fondamentalmente, segue l'ordine di inserimento di ogni comando.
Innanzitutto, dichiara il tipo di diagramma con la sintassi gitGraph. La sintassi gitGraph dice a Mermaid che vuoi disegnare un grafico Git e analizza di conseguenza il codice del diagramma.
Ogni grafico Git viene inizializzato con il ramo main. A meno che tu non crei rami diversi, per impostazione predefinita i commit vanno nel ramo principale. Questo è determinato dal modo in cui funziona git: all'inizio si parte sempre dal ramo principale. Per impostazione predefinita, il ramo main è impostato come ramo corrente.
Puoi registrare un commit sul ramo corrente usando la sintassi commit; vediamo come funziona:
Un semplice grafico git, che mostra tre commit del ramo predefinito main:
Copia
Incorpora
gitGraph
commit
commit
commit
Se osservi attentamente l'esempio precedente, puoi vedere il ramo predefinito main e tre commit. Nota anche che, per impostazione predefinita, a ogni commit viene assegnato un ID univoco e casuale.
Aggiungere un ID di commit personalizzato
Per un determinato commit, puoi specificare un ID personalizzato al momento della dichiarazione con la proprietà id, seguita da due punti :, e indicare il valore personalizzato tra virgolette doppie.
Vediamo come funziona con l'aiuto del diagramma seguente:
Copia
Incorpora
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Modificare il tipo di commit
In Mermaid, i commit sono di tre tipi, che vengono renderizzati in modo leggermente diverso nel diagramma. Questi tipi sono:
- NORMAL : tipo di commit predefinito, rappresentato con un cerchio pieno
- REVERSE : sottolinea che il commit è un commit inverso, rappresentato con un cerchio pieno con croce.
- HIGHLIGHT : evidenzia un commit specifico, rappresentato con un rettangolo pieno.
Per un determinato commit, puoi specificare il suo tipo al momento della dichiarazione usando la proprietà type, seguita dai due punti : e dall'opzione di tipo desiderata discussa sopra. Ad esempio: commit type:
Nota: se il tipo di commit non è specificato, viene scelto per impostazione predefinita NORMAL
Vediamo con il diagramma seguente come procedono questi diversi tipi di commit:
Copia
Incorpora
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
In questo esempio, abbiamo specificato un tipo diverso per ogni commit. Inoltre, osserva come abbiamo incluso sia id sia type al momento della dichiarazione del commit.
Aggiungere un tag
Per un determinato commit, puoi decorarlo con un tag, in modo simile al concetto di tag o versione di rilascio nel mondo git. Puoi allegare un tag personalizzato al momento della dichiarazione del commit con la proprietà tag, seguita da due punti :, e indicare il valore personalizzato tra virgolette doppie.
Copia
Incorpora
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 questo esempio, abbiamo impostato un tag personalizzato per il commit.
Creare un nuovo ramo
In Mermaid, per creare un nuovo ramo, puoi usare la sintassi branch. Devi anche fornire il nome del nuovo ramo. Il nome deve essere univoco e non può essere il nome di un ramo esistente.
Quando Mermaid legge la sintassi branch, crea un nuovo ramo e lo imposta come ramo corrente. Equivale a creare un nuovo ramo nel grafico Git e passare a quel ramo.
Copia
Incorpora
gitGraph
commit
commit
branch develop
commit
commit
commit
In questo esempio, puoi vedere come siamo partiti dal ramo predefinito main e vi abbiamo effettuato due commit. Poi abbiamo creato il ramo develop, dopodiché tutti i commit successivi sono stati inseriti sul ramo develop, perché è diventato il ramo corrente.
Eseguire il checkout di un ramo esistente
In Mermaid, per passare a un ramo esistente, puoi usare la sintassi checkout; devi anche fornire il nome del ramo esistente. Se non viene trovato un ramo con il nome specificato, si verificherà un errore in console. Esempio d'uso: checkout develop
Quando Mermaid legge la sintassi checkout, trova il ramo con il nome specificato e lo imposta come ramo corrente. Equivale a eseguire il checkout di un ramo in Git.
Copia
Incorpora
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
In questo esempio, siamo partiti dal ramo predefinito main e vi abbiamo effettuato due commit. Poi abbiamo creato il ramo develop, dopodiché tutti e tre i commit successivi sono stati inseriti sul ramo develop, perché è diventato il ramo corrente. Successivamente, abbiamo usato la sintassi checkout per impostare il ramo corrente su main, e tutti i commit successivi sono stati registrati sul ramo main.
Unire due rami
In Mermaid, per unire o collegare un ramo esistente, devi usare la sintassi merge. Devi anche fornire il nome di un ramo esistente da unire. Se non viene trovato un ramo con il nome specificato, verrà mostrato un errore in console. Inoltre, puoi unire solo due rami indipendenti e non puoi unire un ramo con se stesso.
Esempio di sintassi: merge develop
Quando Mermaid legge la sintassi merge, trova il ramo specificato e il suo ultimo commit, e li unisce all'ultimo commit del ramo corrente. È rappresentato con un doppio cerchio pieno.
Di seguito è riportato un esempio di unione di due rami:
Copia
Incorpora
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
In questo esempio, si parte dal ramo main e vi si effettuano due commit. Poi creiamo il ramo develop e vi effettuiamo tre commit. Successivamente, usiamo la sintassi checkout per impostare il ramo corrente su main, e tutti i commit successivi riguardano il ramo main. Infine, uniamo il ramo develop al ramo main, generando un commit di merge. Poiché in quel momento il ramo corrente è ancora main, gli ultimi due commit vengono registrati su quel ramo.
Puoi anche aggiungere attributi simili al tuo merge:
- id sovrascrive l'ID predefinito con un ID personalizzato
- tag aggiunge un tag personalizzato al commit di merge
- type sovrascrive il tipo predefinito del commit di merge. Puoi usare gli altri tipi di commit menzionati in precedenza.
Copia
Incorpora
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"
Unire selettivamente i commit da un altro ramo
Mermaid supporta la selezione di un commit da un altro ramo verso quello corrente. Puoi anche usare la sintassi cherry-pick per selezionare un commit da un altro ramo.
Per usare la sintassi cherry-pick, devi specificare un id con la proprietà id, poi scrivere dopo i due punti : l'id del commit desiderato, racchiuso tra virgolette doppie. Ad esempio:
Ecco alcune regole importanti da tenere presente:
- Devi fornire un id per selezionare un commit esistente. Se l'ID del commit specificato non esiste, si verificherà un errore. A questo scopo, dichiara il commit usando il formato commit id:$value.
- Il commit specificato non deve esistere sul ramo corrente; il commit selezionato deve provenire sempre da un ramo diverso da quello corrente.
- Il ramo corrente deve avere almeno un commit prima di poter eseguire cherry-pick, altrimenti si verificherà un errore.
- Quando si seleziona un commit di merge, è necessario fornire l'ID del commit padre. Se si omette l'attributo parent o si fornisce un ID di commit padre non valido, verrà generato un errore.
- Il commit padre specificato deve essere il padre diretto del commit di merge che si sta selezionando.
Copia
Incorpora
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"
Opzioni di configurazione specifiche
In un grafico Git di Mermaid puoi configurare le seguenti opzioni:
- showBranches : valore booleano, impostazione predefinita true. Se impostato su false, i rami non vengono mostrati.
- showCommitLabel : valore booleano, impostazione predefinita true. Se impostato su false, l'etichetta del commit non viene mostrata.
- mainBranchName : stringa, impostazione predefinita main. Il nome del ramo predefinito.
- mainBranchOrder : la posizione del ramo principale nell'elenco dei rami. Impostazione predefinita 0, il che significa che per impostazione predefinita il ramo main è al primo posto.
- parallelCommits : valore booleano, impostazione predefinita false. Se impostato su true, i commit distanti dal padre vengono mostrati allo stesso livello.
Nascondere il nome del ramo e la linea di collegamento
A volte potresti voler nascondere il nome del ramo e la linea di collegamento. Puoi farlo usando la sintassi showBranches. Per impostazione predefinita il suo valore è true; puoi impostarlo su false con una direttiva.
Copia
Incorpora
---
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 dell'etichetta del commit: ruotata o orizzontale
Mermaid supporta due tipi di layout dell'etichetta del commit. Il layout predefinito è ruotato, il che significa che l'etichetta è posizionata sotto il cerchio del commit e ruotata di 45 gradi per una migliore leggibilità. Questo è particolarmente utile per i commit con etichette lunghe.
L'altro tipo è orizzontale, il che significa che l'etichetta è posizionata sotto il cerchio del commit e centrata orizzontalmente, senza rotazione. Questo è particolarmente utile per i commit con etichette brevi.
Puoi cambiare il layout dell'etichetta del commit usando la sintassi rotateCommitLabel in una direttiva. Il valore predefinito è true, il che significa che l'etichetta del commit viene ruotata.
Esempio d'uso: etichetta del commit ruotata
Copia
Incorpora
---
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
Esempio d'uso: etichetta del commit orizzontale
Copia
Incorpora
---
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
Nascondere l'etichetta del commit
A volte potresti voler nascondere l'etichetta del commit. Puoi farlo usando la sintassi showCommitLabel. Per impostazione predefinita il suo valore è true; puoi impostarlo su false con una direttiva.
Copia
Incorpora
---
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
Personalizzare il nome del ramo principale
A volte potresti voler personalizzare il nome del ramo principale. Puoi farlo usando la sintassi mainBranchName. Per impostazione predefinita il suo valore è main; puoi impostarlo su qualsiasi stringa con una direttiva.
Copia
Incorpora
---
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"
Dai un'occhiata al grafico di una linea metropolitana virtuale creato con Mermaid. Qui abbiamo cambiato il nome del ramo principale predefinito in MetroLine1.
Personalizzare l'ordine dei rami
In Mermaid, per impostazione predefinita, i rami sono mostrati nell'ordine in cui sono definiti o compaiono nel codice del diagramma.
A volte potresti voler personalizzare l'ordine dei rami. Puoi farlo usando la sintassi order accanto alla definizione del ramo; puoi impostarla su un numero positivo.
Mermaid rispetta l'ordine di priorità dato dalla sintassi order.
- Il ramo principale viene sempre mostrato per primo, poiché il suo valore di ordine predefinito è 0. (A meno che il suo ordine non sia stato modificato tramite la sintassi mainBranchOrder nella configurazione, cambiandolo da 0)
- Successivamente, tutti i rami senza order vengono mostrati nell'ordine in cui compaiono nel codice del diagramma.
- Successivamente, tutti i rami con order vengono mostrati nell'ordine del loro valore order.
Per controllare completamente l'ordine di tutti i rami, devi definire order per tutti i rami.
Copia
Incorpora
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Nel diagramma sopra, tutti i rami seguono l'ordine definito.
Copia
Incorpora
---
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
Nel diagramma sopra, tutti i rami senza ordine specificato vengono disegnati nell'ordine definito. Successivamente, viene disegnato il ramo test4, perché il suo ordine è 1. Poi viene disegnato il ramo main, perché il suo ordine è 2. Infine viene disegnato il ramo test1, perché il suo ordine è 3.
Nota: poiché abbiamo sovrascritto mainBranchOrder con 2, il ramo main non viene disegnato all'inizio, ma mostrato in base al suo ordine.
Qui abbiamo cambiato il nome del ramo principale predefinito in MetroLine1.
Direzione
Mermaid supporta tre direzioni: da sinistra verso destra (predefinita), dall'alto verso il basso e dal basso verso l'alto.
Da sinistra verso destra (predefinita, LR:)
In Mermaid, la direzione predefinita va da sinistra verso destra, con i rami impilati uno sopra l'altro.
Tuttavia, puoi impostarlo esplicitamente con LR: dopo la sintassi gitGraph.
Copia
Incorpora
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dall'alto verso il basso (TB:)
Nella direzione dall'alto verso il basso, i commit vanno dalla parte superiore a quella inferiore del diagramma e i rami sono disposti uno accanto all'altro.
Per orientare il grafico in questo modo, devi aggiungere TB: dopo la sintassi gitGraph.
Copia
Incorpora
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dal basso verso l'alto (BT:)
Nella direzione dal basso verso l'alto, i commit vanno dalla parte inferiore a quella superiore del diagramma e i rami sono disposti uno accanto all'altro.
Per orientare il grafico in questo modo, devi aggiungere BT: dopo la sintassi gitGraph.
Copia
Incorpora
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commit temporanei (parallelCommits: false)
Copia
Incorpora
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commit paralleli (parallelCommits: true)
Copia
Incorpora
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid supporta una serie di temi personalizzati, che puoi usare per trovare il tema adatto a te. Nota: puoi effettivamente sovrascrivere le variabili di un tema esistente per creare il tuo tema personalizzato.
Di seguito sono riportate le diverse opzioni di tema personalizzato:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Per cambiare tema, puoi usare la sintassi initialize.
Tema di base
Copia
Incorpora
---
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
Tema foresta
Copia
Incorpora
---
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
Tema predefinito
Copia
Incorpora
---
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
Tema scuro
Copia
Incorpora
---
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
Tema neutro
Copia
Incorpora
---
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
Personalizzare con le variabili del tema
Mermaid ti permette di personalizzare i tuoi diagrammi usando le variabili del tema; queste variabili controllano l'aspetto e lo stile dei vari elementi del diagramma.
Per capire, prendiamo come esempio il tema default; i valori predefiniti delle variabili del tema vengono presi automaticamente dal tema.
Usare il tema default per impostare il colore dei rami:
Copia
Incorpora
---
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 supporta le variabili del tema, usate per sovrascrivere i valori predefiniti, per un massimo di 8 rami, cioè puoi impostare il colore di un massimo di 8 rami con le variabili del tema. Superati gli 8 rami, le variabili del tema vengono riutilizzate in modo ciclico, cioè il nono ramo userà lo stile del primo ramo.
Personalizzare il colore dei rami
Puoi personalizzare il colore dei rami usando le variabili del tema da git0 a git7. Mermaid ti consente di impostare il colore di un massimo di 8 rami, dove la variabile git0 controlla il colore del primo ramo, git1 controlla il colore del secondo ramo, e così via.
Nota: i valori predefiniti di queste variabili del tema sono presi dal tema selezionato. Se vuoi sovrascrivere i valori predefiniti, puoi usare la sintassi initialize per aggiungere valori personalizzati alle variabili del tema.
Esempio:
Ora sovrascriviamo i valori predefiniti delle variabili da git0 a git3:
Copia
Incorpora
---
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
Personalizzare il colore dell'etichetta dei rami
Puoi personalizzare il colore dell'etichetta dei rami usando le variabili del tema da gitBranchLabel0 a gitBranchLabel7. Mermaid ti consente di impostare il colore di un massimo di 8 rami, dove la variabile gitBranchLabel0 controlla il colore dell'etichetta del primo ramo, la variabile gitBranchLabel1 controlla il colore dell'etichetta del secondo ramo, e così via.
Vediamo come usare il tema default per impostare il colore dell'etichetta dei rami:
Ora sovrascriviamo i valori predefiniti delle variabili da gitBranchLabel0 a gitBranchLabel2:
Copia
Incorpora
---
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
Qui puoi vedere che i colori e gli stili di branch8 e branch9 sono presi rispettivamente dai rami con indice 0 (main) e 1 (branch1).
Personalizzare il colore del commit
Puoi usare le variabili del tema commitLabelColor e commitLabelBackground per personalizzare rispettivamente il colore e il colore di sfondo dell'etichetta del commit.
Esempio: ora sovrascriviamo i valori predefiniti delle variabili da commitLabelColor a commitLabelBackground:
Copia
Incorpora
---
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
Puoi usare la variabile del tema commitLabelFontSize per personalizzare la dimensione del carattere dell'etichetta del commit.
Esempio: ora sovrascriviamo il valore predefinito della variabile commitLabelFontSize:
Copia
Incorpora
---
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
Personalizzare la dimensione del carattere dell'etichetta
Puoi usare la variabile del tema tagLabelFontSize per personalizzare la dimensione del carattere dell'etichetta.
Esempio: ora sovrascriviamo il valore predefinito della variabile tagLabelFontSize:
Copia
Incorpora
---
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
Personalizzare il colore dell'etichetta
Puoi usare le variabili del tema tagLabelColor, tagLabelBackground e tagLabelBorder per personalizzare l'etichetta, modificando rispettivamente il colore del testo, il colore di sfondo e il bordo dell'etichetta.
Esempio: ora sovrascriviamo i valori predefiniti delle variabili tagLabelColor, tagLabelBackground e tagLabelBorder:
Copia
Incorpora
---
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
Personalizzare il colore dei commit evidenziati
Puoi usare le variabili del tema da gitInv0 a gitInv7 per personalizzare il colore dei commit evidenziati in base al ramo di appartenenza. Mermaid ti consente di impostare il colore di commit evidenziati specifici per un massimo di 8 rami, dove la variabile gitInv0 controlla il colore dei commit evidenziati del primo ramo, la variabile gitInv1 controlla il colore dei commit evidenziati del secondo ramo, e così via.
Ora sovrascriviamo i valori predefiniti delle variabili da git0 a git3:
Copia
Incorpora
---
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
