Guia de Sintaxe do Diagrama GitGraph do Mermaid.js

Um diagrama GitGraph é um componente de visualização especializado usado por desenvolvedores, equipes DevOps e redatores técnicos para comunicar claramente estratégias de ramificação Git, gerenciamento de lançamentos e fluxos de trabalho de desenvolvimento. Integrado nativamente ao Mermaid.js, o gitGraphmotor utiliza um modelo de linha do tempo declarativo e sequencial. Isso mapeia comandos de terminal do mundo real diretamente para um mapa visual de linha do tempo preciso, sem exigir edição manual de imagens.

Compreendendo a Matriz de Linha do Tempo GitGraph

Diferentemente dos fluxogramas de sistema de forma livre, um diagrama GitGraph segue uma lógica estrita, sequencial e baseada na ordem de ocorrência, modelando espaços de trabalho reais de controle de versão:

  • Ramificação Automática da Raiz:Todo espaço de trabalho de diagrama inicializado automaticamente cria uma faixa principal de linha do tempo raiz. Por padrão, essa faixa é nomeada main, e todas as ações subsequentes são rastreadas com base nela, a menos que um caminho alternativo de ramificação limpo seja criado.
  • Precedência de Ordem:Os elementos são renderizados ao longo de um eixo cronológico da esquerda para a direita com base na ordem de inserção dos comandos no arquivo fonte do código.

Estrutura Básica da Sintaxe

Toda linha do tempo começa com a palavra-chave em camelCase gitGraphpalavra-chave de declaração. É seguida por uma coluna sequencial de comandos de execução atômicos, como commits, checkouts e merges.

gitGraph
  commit
  commit
  branch feature-login
  checkout feature-login
  commit
  checkout main
  merge feature-login

Referência Completa dos Comandos de Ação Git

O motor de layout interpreta comandos de ação específicos em minúsculas para avançar pesos de linha, dividir faixas ou mesclar pontos finais juntos em toda a área de trabalho do canvas.

Token de Comando Git Modificadores de Argumentos de Parâmetro Comportamento Técnico de Ação e Layout
commit id: "hash", type: TYPE, tag: "v1.0" Acrescenta um novo nó de marco diretamente na linha do caminho da ramificação alvo ativa.
ramificação nome, ordem: Inteiro Cria uma nova divisão de faixa de ramificação. Você pode forçar sua posição de empilhamento vertical usando um valor opcional explícitoordem valor.
checkout / mudar nome-da-ramificacao Desloca o ponteiro do índice de gravação ativo para a linha da ramificação alvo especificada. Ações subsequentes serão rastreadas nesta faixa.
mesclar nome-da-ramificacao-alvo, id: "hash", tag: "v2" Mescla a faixa de ramificação especificada de volta para a ramificação atual, criando um ponto de interseção visual distinto.
cherry-pick id: "hash-do-commit", pai: "hash-do-pai" Duplica um commit específico de uma ramificação externa na faixa de ramificação atual sem mesclar as faixas.

Recursos Avançados: Tipos de Commit e Personalizações de Tag

Para diferenciar entre patches regulares, retornos de sistema ou lançamentos principais, você pode atribuir um explicitamentetipo e tagmodificador de string dentro de um bloco de argumentos usando propriedades de chave-valor semelhantes ao JSON.

Classificações de Forma de Commit Suportadas:

  • tipo: NORMAL: A configuração padrão. Renderiza como um nó circular sólido preenchido ao longo da faixa de linha do tempo.
  • tipo: REVERSE: Destaca uma reversão arquitetônica ou programática. Renderiza como um nó circular sólido cruzado ($X$).
  • tipo: HIGHLIGHT: Chama a atenção para alterações estruturais críticas ou correções de segurança. Renderiza como uma caixa retangular alongada e preenchida.
gitGraph
  commit id: "Inicial"
  commit tipo: HIGHLIGHT id: "Correção-de-Segurança" tag: "v1.0.1"
  commit tipo: REVERSE id: "Reversão-Recursos-X"


Recursos Avançados: Lógica de Cherry-Pick e Restrições Estritas

O cherry-pickcomando copia um nó isolado específico de uma faixa de ramificação diferente para a sua ramificação ativa atual. Para executar um cherry-pick sem gerar falhas de layout do compilador, você deve seguir estas exigências estritas de validação do workspace:

  • Restrição de Exclusão:O ID do commit de destino que você está fazendo cherry-pick *não deve* já existir na faixa de ramificação que você está rastreando atualmente.
  • Histórico Pré-requisito:A linha atual da ramificação ativa deve conter pelo menos um nó de commit válido antes de chamar uma ação de cherry-pick.
  • Requisito de Pai de Mesclagem:Se você estiver fazendo cherry-pick em um nó de mesclagem, você deve passar explicitamente a string de identificação do pai imediato e direto usando o bloco parent: "hash"bloco de modificador.
gitGraph
  commit id: "configuração"
  branch staging
  checkout staging
  commit id: "correção-de-recursos"
  checkout main
  commit id: "base"
  cherry-pick id: "correção-de-recursos"


Recurso Avançado: Configurações de Parâmetros de Frontmatter

Você pode ajustar comportamentos visuais globais (como alternar rótulos de ramificação, modificar índices de linha ou empilhar cronologias) declarando um %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'config': { 'gitGraph': { ... } } } }%% bloco de diretiva de configuração no topo absoluto do seu script de gráfico.

Matriz de Parâmetros Configuráveis

String da Chave de Configuração Definição de Tipo Valor Padrão Resultado da Alteração na Interface Visual
showBranches Booleano true Alternar a visibilidade dos rótulos individuais de rastreamento de ramificações no lado esquerdo da grade da tela.
showCommitLabel Booleano true Alternar a renderização de títulos de texto e hashes alfanuméricos diretamente sobre os nós individuais da cronologia.
mainBranchName String "main" Altera o texto padrão de rastreamento do nome da ramificação raiz inicial (por exemplo, trocando para "master" ou "trunk").
mainBranchOrder Inteiro 0 Define o índice de posição da ordem de empilhamento vertical de cima para baixo para a faixa principal de rastreamento da cronologia raiz.
parallelCommits Booleano falso Se modificado para verdadeiro, os commits separados que compartilham distâncias idênticas de passos pais se alinham simetricamente no mesmo nível vertical.

Plano Prático do Mundo Real: Pipeline de Gerenciamento de Lançamento Enterprise Git-Flow

Este plano abrangente para empresas demonstra uma pipeline de lançamento de produção padrão. Ele substitui parâmetros de configuração para renomear a faixa raiz para trunk, estabelece uma hierarquia fixa de ordem de ramificações, usa várias faixas de ramificação (develop e feature-auth), executa mesclagens, aplica tags personalizadas e implanta formas de commit de destaque de alta prioridade.

%%{init: { 'gitGraph': { 'mainBranchName': 'trunk', 'showCommitLabel': true } } }%%
gitGraph
  commit id: "Inicial-Core" tag: "v1.0.0"
  commit id: "Configuração-CI"
  branch develop
  checkout develop
  commit id: "Base-Sprint-1"
  branch feature-auth
  checkout feature-auth
  commit id: "Lógica-JWT"
  commit id: "Lógica-MFA" type: HIGHLIGHT
  checkout develop
  merge feature-auth id: "Mesclagem-Auth"
  commit id: "Beta-Compilado"
  checkout trunk
  merge develop id: "Lançamento-Prod" tag: "v2.0.0"


Armadilhas Comuns de Sintaxe & Restrições do Sistema

Ao compilar gráficos precisos de controle de versão, tenha em mente estes parâmetros de solução de problemas para evitar erros de cálculo de layout:

  • Falhas de Sensibilidade a Caixa Alta: A declaração principal de inicialização deve ser escrita em camelCase explícito como gitGraph. Escrevê-lo tudo em minúsculas como gitgraph causará uma falha de análise do compilador.
  • Identificadores Alfanuméricos Não Citados: Ao passar parâmetros personalizados de commit (por exemplo, id: core_init), os valores que contêm hífens, espaços ou pontos *devem* ser colocados entre aspas duplas. Esquecer os blocos de aspas causará erros de compilação de validação.
  • Destinos de Checkout Inválidos: Chamando um checkout branch_name ação em uma identidade de string que não foi inicializada anteriormente usando o branch branch_namecomando irá instantaneamente interromper a construção do gráfico.
  • Colisões de Ordenação de Ramificações: Ao utilizar o ordemtag de configuração em ramificações, certifique-se de que múltiplos rastreamentos não sejam mapeados para inteiros idênticos, a menos que deseje rastreamentos de caminho de tela sobrepostos. Mantenha os números de rastreamento de ramificação únicos.
  • Falhas na Separação por Espaço: Certifique-se de que espaços claros para argumentos existam ao separar propriedades dentro de matrizes de parâmetros entre parênteses (por exemplo, use id: "1", tipo: DESTACAR). A ausência de vírgulas ou espaços pode causar exceções de análise.
Scroll to Top