Diagrama Git
O gráfico Git é uma expressão visual de commits e operações git em diferentes branches.
O gráfico Git é especialmente útil para desenvolvedores e equipes de operações, podendo ser usado para compartilhar sua estratégia de branches do Git.
O Mermaid pode renderizar gráficos Git
Copiar
Incorporar
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
O Mermaid oferece suporte a operações git básicas, como:
- commit: representa um novo commit no branch atual.
- branch: cria e alterna para um novo branch, definindo-o ao mesmo tempo como o branch atual.
- checkout: alterna para um branch existente e o define como o branch atual.
- merge: mescla o branch existente ao branch atual.
Com essas operações Git, você consegue desenhar gráficos Git no Mermaid de forma muito fácil e rápida. Os nomes de entidade geralmente começam com letra maiúscula, embora não haja um padrão reconhecido para isso, e no Mermaid isso não é obrigatório.
Observação: checkout e switch podem ser usados de forma intercambiável.
Sintaxe
A sintaxe Mermaid do gráfico Git é bastante direta e simples. Ela adota uma abordagem declarativa, e cada commit é desenhado na linha do tempo do gráfico Git na ordem em que aparece no código. Basicamente, segue a ordem de inserção de cada comando.
Primeiro, declare o tipo do seu diagrama com a sintaxe gitGraph. A sintaxe gitGraph informa ao Mermaid que você deseja desenhar um gráfico Git e interpreta o código do diagrama de acordo.
Todo gráfico Git é inicializado com o branch main. A menos que você crie branches diferentes, por padrão os commits vão para o branch principal. Isso é motivado pela forma como o git funciona: no início você sempre começa pelo branch principal. Por padrão, o branch main é definido como o branch atual.
Você pode usar a sintaxe commit para registrar um commit no branch atual; vejamos como isso funciona:
Um gráfico git simples, exibindo três commits no branch padrão main:
Copiar
Incorporar
gitGraph
commit
commit
commit
Se você observar atentamente o exemplo anterior, poderá ver o branch padrão main e os três commits. Observe também que, por padrão, cada commit recebe um ID único e aleatório.
Adicionar um ID de commit personalizado
Para um determinado commit, você pode especificar um ID personalizado com a propriedade id ao declará-lo, seguida de dois-pontos : e do valor personalizado entre aspas duplas.
Vejamos como isso funciona com o diagrama abaixo:
Copiar
Incorporar
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Alterar o tipo de commit
No Mermaid, há três tipos de commit, que são renderizados de forma ligeiramente diferente no diagrama. Esses tipos são:
- NORMAL: tipo de commit padrão, representado por um círculo preenchido
- REVERSE: enfatiza que o commit é um commit reverso, representado por um círculo preenchido com cruz.
- HIGHLIGHT: destaca um commit específico, representado por um retângulo preenchido.
Para um determinado commit, você pode especificar seu tipo ao declarar, usando a propriedade type, seguida de dois-pontos : e da opção de tipo desejada discutida acima. Por exemplo: commit type:
Observação: se o tipo de commit não for especificado, o padrão escolhido é NORMAL
Vejamos, com o diagrama abaixo, como esses diferentes tipos de commit se comportam:
Copiar
Incorporar
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Neste exemplo, especificamos um tipo diferente para cada commit. Além disso, veja como incluímos id e type ao mesmo tempo ao declarar o commit.
Adicionar tags
Para um determinado commit, você pode decorá-lo com tag, semelhante ao conceito de tag ou versão de lançamento no mundo do git. Você pode anexar uma tag personalizada ao declarar o commit, usando a propriedade tag, seguida de dois-pontos : e do valor personalizado entre aspas duplas.
Copiar
Incorporar
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
Neste exemplo, definimos uma tag personalizada para o commit.
Criar um novo branch
No Mermaid, para criar um novo branch, você pode usar a sintaxe branch. Também é necessário fornecer o nome do novo branch. O nome deve ser único e não pode ser o nome de um branch existente.
Quando o Mermaid lê a sintaxe branch, ele cria um novo branch e o define como o branch atual. Equivale a criar um novo branch no gráfico Git e alternar para ele.
Copiar
Incorporar
gitGraph
commit
commit
branch develop
commit
commit
commit
Neste exemplo, pode-se ver como começamos pelo branch padrão main e enviamos dois commits nele. Em seguida, criamos o branch develop, e todos os commits daí em diante foram colocados no branch develop, porque ele se tornou o branch atual.
Fazer checkout de um branch existente
No Mermaid, para alternar para um branch existente, você pode usar a sintaxe checkout, e também precisa fornecer o nome do branch existente. Se não for encontrado um branch com o nome especificado, ocorrerá um erro no console. Exemplo de uso: checkout develop
Quando o Mermaid lê a sintaxe checkout, ele encontra o branch com o nome especificado e o define como o branch atual. Isso equivale a fazer checkout de um branch no Git.
Copiar
Incorporar
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Neste exemplo, começamos pelo branch padrão main e enviamos dois commits nele. Em seguida, criamos o branch develop, e todos os três commits seguintes foram colocados no branch develop, porque ele se tornou o branch atual. Depois, usamos a sintaxe checkout para definir o branch atual como main, e todos os commits subsequentes foram registrados no branch main.
Mesclar dois branches
No Mermaid, para mesclar ou conectar a um branch existente, você precisa usar a sintaxe merge. Ao mesmo tempo, também precisa fornecer o nome de um branch existente a ser mesclado. Se não for encontrado um branch com o nome especificado, será exibido um erro no console. Além disso, só é possível mesclar dois branches independentes, não sendo possível mesclar um branch consigo mesmo.
Exemplo de sintaxe: merge develop
Quando o Mermaid lê a sintaxe merge, ele encontra o branch especificado e seu último commit, e o mescla com o último commit do branch atual. É representado por dois círculos preenchidos.
A seguir está um exemplo de mesclagem de dois branches:
Copiar
Incorporar
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Neste exemplo, começamos pelo branch main e enviamos dois commits nele. Em seguida, criamos o branch develop e enviamos três commits no branch develop. Depois, usamos a sintaxe checkout para definir o branch atual como main, e todos os commits subsequentes foram feitos no branch main. Por fim, mesclamos o branch develop no branch main, gerando um commit de merge. Como o branch atual ainda era main nesse momento, os dois últimos commits foram registrados nesse branch.
Você também pode adicionar atributos semelhantes à sua mesclagem:
- id substitui o ID padrão por um ID personalizado
- tag adiciona uma tag personalizada ao commit de merge
- type substitui o tipo padrão do commit de merge. Você pode usar os outros tipos de commit mencionados anteriormente.
Copiar
Incorporar
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"
Mesclar seletivamente commits de outro branch
O Mermaid oferece suporte à seleção de um commit de outro branch para o branch atual. Você também pode usar a sintaxe cherry-pick para selecionar commits de outro branch.
Para usar a sintaxe cherry-pick, você deve especificar o id com a propriedade id e, após dois-pontos :, escrever o id do commit desejado, entre aspas duplas. Por exemplo:
Aqui estão algumas regras importantes a observar:
- Você precisa fornecer um id para selecionar um commit existente. Se o ID de commit fornecido não existir, ocorrerá um erro. Para isso, use o formato commit id:$value para declarar o commit.
- O commit fornecido não pode existir no branch atual, e o commit selecionado deve sempre vir de um branch diferente do atual.
- O branch atual deve ter pelo menos um commit antes de poder fazer o cherry-pick, caso contrário ocorrerá um erro.
- Ao selecionar um commit de merge, é necessário fornecer o ID do commit pai. Se a propriedade pai for omitida ou um ID de commit pai inválido for fornecido, será gerado um erro.
- O commit pai especificado deve ser o pai direto do commit de merge que está sendo selecionado.
Copiar
Incorporar
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"
Opções de configuração específicas
No gráfico Git do Mermaid, você pode configurar as seguintes opções:
- showBranches: valor booleano, padrão true. Se definido como false, os branches não serão exibidos.
- showCommitLabel: valor booleano, padrão true. Se definido como false, os rótulos de commit não serão exibidos.
- mainBranchName: string, padrão main. O nome do branch padrão.
- mainBranchOrder: a posição do branch principal na lista de branches. Padrão 0, o que significa que, por padrão, o branch main fica em 1º lugar.
- parallelCommits: valor booleano, padrão false. Se definido como true, os commits distantes do pai serão exibidos no mesmo nível.
Ocultar o nome do branch e a linha de conexão
Às vezes você pode querer ocultar o nome do branch e a linha de conexão. Você pode fazer isso com a sintaxe showBranches. Por padrão, seu valor é true, e você pode usar a diretiva para defini-lo como false.
Copiar
Incorporar
---
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 do rótulo de commit: rotacionado ou horizontal
O Mermaid suporta dois tipos de layout de rótulo de commit. O layout padrão é rotacionado, o que significa que o rótulo é colocado abaixo do círculo do commit, rotacionado em 45 graus para melhor legibilidade. Isso é especialmente útil para commits com rótulos longos.
Outro tipo é horizontal, o que significa que o rótulo é colocado abaixo do círculo do commit e centralizado horizontalmente, sem rotação. Isso é especialmente útil para commits com rótulos curtos.
Você pode alterar o layout do rótulo de commit usando a sintaxe rotateCommitLabel na diretiva. O padrão é true, o que indica que os rótulos de commit são rotacionados.
Exemplo de uso: rótulos de commit rotacionados
Copiar
Incorporar
---
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
Exemplo de uso: rótulos de commit horizontais
Copiar
Incorporar
---
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
Ocultar o rótulo de commit
Às vezes você pode querer ocultar os rótulos de commit. Você pode fazer isso com a sintaxe showCommitLabel. Por padrão, seu valor é true, e você pode usar a diretiva para defini-lo como false.
Copiar
Incorporar
---
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
Nome personalizado do branch principal
Às vezes você pode querer personalizar o nome do branch principal. Você pode fazer isso com a sintaxe mainBranchName. Por padrão, seu valor é main, e você pode usar a diretiva para defini-lo como qualquer string.
Copiar
Incorporar
---
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"
Veja o mapa de linha de metrô fictício criado com o Mermaid. Aqui, alteramos o nome do branch principal padrão para MetroLine1.
Ordem personalizada dos branches
No Mermaid, por padrão, os branches são exibidos na ordem em que são definidos ou aparecem no código do gráfico.
Às vezes você pode querer personalizar a ordem dos branches. Você pode fazer isso usando a sintaxe order ao lado da definição do branch, podendo defini-la como um número positivo.
O Mermaid segue a ordem de prioridade dada pela sintaxe order.
- O branch principal é sempre exibido primeiro, pois seu valor de ordem padrão é 0. (A menos que sua ordem tenha sido modificada pela sintaxe mainBranchOrder na configuração e alterada a partir de 0)
- Em seguida, todos os branches sem order serão exibidos na ordem em que aparecem no código do gráfico.
- Em seguida, todos os branches com order serão exibidos na ordem de seu valor order.
Para controlar totalmente a ordem de todos os branches, é necessário definir order para todos eles.
Copiar
Incorporar
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
No diagrama acima, todos os branches seguem a ordem definida.
Copiar
Incorporar
---
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
No diagrama acima, todos os branches sem ordem especificada são desenhados na ordem em que foram definidos. Em seguida, o branch test4 é desenhado, porque sua ordem é 1. Depois, o branch main é desenhado, porque sua ordem é 2. Por fim, o branch test1 é desenhado, porque sua ordem é 3.
Observação: como sobrescrevemos mainBranchOrder para 2, o branch main não é desenhado no início, mas exibido conforme a ordem.
Aqui, alteramos o nome do branch principal padrão para MetroLine1.
Direção
O Mermaid suporta três direções: da esquerda para a direita (padrão), de cima para baixo e de baixo para cima.
Da esquerda para a direita (padrão, LR:)
No Mermaid, a direção padrão é da esquerda para a direita, com os branches empilhados uns sobre os outros.
No entanto, você pode definir isso explicitamente com LR: após a sintaxe gitGraph.
Copiar
Incorporar
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De cima para baixo (TB:)
Na direção de cima para baixo, os commits vão do topo para a base do diagrama, com os branches dispostos lado a lado.
Para orientar o gráfico dessa forma, você precisa adicionar TB: após a sintaxe gitGraph.
Copiar
Incorporar
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De baixo para cima (BT:)
Na direção de baixo para cima, os commits vão da base para o topo do diagrama, com os branches dispostos lado a lado.
Para orientar o gráfico dessa forma, você precisa adicionar BT: após a sintaxe gitGraph.
Copiar
Incorporar
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commit temporário (parallelCommits: false)
Copiar
Incorporar
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commits paralelos (parallelCommits: true)
Copiar
Incorporar
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
O Mermaid oferece suporte a uma série de temas personalizados que você pode usar para encontrar um tema adequado para você. Nota: você pode, na prática, sobrescrever as variáveis de um tema existente para criar o seu próprio tema personalizado.
A seguir estão as diferentes opções de tema personalizado:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Para alterar o tema, você pode usar a sintaxe initialize.
Tema base
Copiar
Incorporar
---
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 floresta
Copiar
Incorporar
---
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 padrão
Copiar
Incorporar
---
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 escuro
Copiar
Incorporar
---
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
Copiar
Incorporar
---
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
Personalizar com variáveis de tema
O Mermaid permite personalizar seu gráfico usando variáveis de tema, que controlam a aparência e o estilo de cada elemento do gráfico.
Para entender, tomemos como exemplo o tema default; os valores padrão das variáveis de tema são selecionados automaticamente a partir do tema.
Usando o tema default para definir a cor do branch:
Copiar
Incorporar
---
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
O Mermaid oferece suporte a variáveis de tema para sobrescrever os valores padrão, podendo cobrir até 8 branches, ou seja, você pode definir a cor de até 8 branches com variáveis de tema. Após 8 branches, as variáveis de tema serão reutilizadas de forma cíclica, ou seja, o 9º branch usará o estilo do 1º branch.
Cor personalizada dos branches
Você pode usar as variáveis de tema git0 a git7 para personalizar as cores dos branches. O Mermaid permite definir a cor de até 8 branches, em que a variável git0 controla a cor do primeiro branch, git1 controla a cor do segundo branch, e assim por diante.
Observação: os valores padrão dessas variáveis de tema são obtidos do tema selecionado. Se você quiser sobrescrever os valores padrão, pode usar a sintaxe initialize para adicionar valores de variáveis de tema personalizados.
Exemplo:
Agora vamos sobrescrever os valores padrão das variáveis git0 a git3:
Copiar
Incorporar
---
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
Cor personalizada do rótulo do branch
Você pode usar as variáveis de tema gitBranchLabel0 a gitBranchLabel7 para personalizar a cor dos rótulos dos branches. O Mermaid permite definir a cor de até 8 branches, em que a variável gitBranchLabel0 controla a cor do rótulo do primeiro branch, a variável gitBranchLabel1 controla a cor do rótulo do segundo branch, e assim por diante.
Vejamos como usar o tema default para definir a cor dos rótulos dos branches:
Agora vamos sobrescrever os valores padrão das variáveis gitBranchLabel0 a gitBranchLabel2:
Copiar
Incorporar
---
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
Aqui, você pode ver que as cores e estilos de branch8 e branch9 são selecionados respectivamente a partir dos branches nas posições de índice 0 (main) e 1 (branch1).
Cor personalizada dos commits
Você pode usar as variáveis de tema commitLabelColor e commitLabelBackground para personalizar, respectivamente, a cor e a cor de fundo dos rótulos de commit.
Exemplo: agora vamos sobrescrever os valores padrão das variáveis commitLabelColor e commitLabelBackground:
Copiar
Incorporar
---
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
Você pode usar a variável de tema commitLabelFontSize para personalizar o tamanho da fonte dos rótulos de commit.
Exemplo: agora vamos sobrescrever o valor padrão da variável commitLabelFontSize:
Copiar
Incorporar
---
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
Tamanho de fonte personalizado do rótulo
Você pode usar a variável de tema tagLabelFontSize para personalizar o tamanho da fonte dos rótulos.
Exemplo: agora vamos sobrescrever o valor padrão da variável tagLabelFontSize:
Copiar
Incorporar
---
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
Cor personalizada do rótulo
Você pode usar as variáveis de tema tagLabelColor, tagLabelBackground e tagLabelBorder para personalizar os rótulos, alterando respectivamente a cor do texto do rótulo, a cor de fundo do rótulo e a borda do rótulo.
Exemplo: agora vamos sobrescrever os valores padrão das variáveis tagLabelColor, tagLabelBackground e tagLabelBorder:
Copiar
Incorporar
---
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
Cor personalizada dos commits em destaque
Você pode usar as variáveis de tema gitInv0 a gitInv7 para personalizar a cor dos commits em destaque de acordo com o branch em que estão. O Mermaid permite definir a cor específica dos commits em destaque para até 8 branches, em que a variável gitInv0 controla a cor do commit em destaque do primeiro branch, a variável gitInv1 controla a cor do commit em destaque do segundo branch, e assim por diante.
Agora vamos sobrescrever os valores padrão das variáveis git0 a git3:
Copiar
Incorporar
---
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
