Diagrama Git
El diagrama de Git es una representación visual de las confirmaciones de git y las operaciones de git en distintas ramas.
El diagrama de Git resulta especialmente útil para desarrolladores y equipos de operaciones, y puede usarse para compartir su estrategia de ramas de Git.
Mermaid puede renderizar diagramas de Git
Copiar
Insertar
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid admite operaciones básicas de git, por ejemplo:
- commit : representa una nueva confirmación en la rama actual.
- branch : crea y cambia a una nueva rama, estableciéndola como rama actual.
- checkout : cambia a una rama ya existente y la establece como rama actual.
- merge : fusiona una rama existente en la rama actual.
Con estas operaciones de Git, puedes dibujar diagramas de Git en Mermaid de forma muy sencilla y rápida. Los nombres de entidad normalmente empiezan por mayúscula, aunque no hay un estándar reconocido para ello y en Mermaid tampoco es obligatorio.
Nota: checkout y switch pueden usarse indistintamente.
Sintaxis
La sintaxis de Mermaid para el diagrama de Git es muy directa y sencilla. Adopta un enfoque declarativo: cada confirmación se dibuja en la línea de tiempo del diagrama de Git según el orden en que aparece en el código. Básicamente, sigue el orden de inserción de cada comando.
En primer lugar, declara el tipo de gráfico con la sintaxis gitGraph. La sintaxis gitGraph indica a Mermaid que quieres dibujar un diagrama de Git y que analice el código del gráfico en consecuencia.
Cada diagrama de Git se inicializa con la rama main. A menos que crees ramas distintas, de forma predeterminada las confirmaciones van a la rama principal. Esto viene determinado por cómo funciona git: al empezar, siempre partes de la rama principal. De forma predeterminada, la rama main se establece como rama actual.
Puedes usar la sintaxis commit para registrar una confirmación en la rama actual; veamos cómo funciona:
Un diagrama de git sencillo, que muestra tres confirmaciones en la rama predeterminada main:
Copiar
Insertar
gitGraph
commit
commit
commit
Si observas con atención el ejemplo anterior, puedes ver la rama predeterminada main y las tres confirmaciones. Ten en cuenta también que, de forma predeterminada, a cada confirmación se le asigna un ID único y aleatorio.
Añadir un ID de confirmación personalizado
Para una confirmación, puedes especificar un ID personalizado con la propiedad id al declararla, seguida de dos puntos :, y anotar el valor personalizado entre comillas dobles.
Veamos con el siguiente diagrama cómo funciona:
Copiar
Insertar
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Modificar el tipo de confirmación
En Mermaid, hay tres tipos de confirmación, que se renderizan de forma ligeramente distinta en el gráfico. Estos tipos son:
- NORMAL : tipo de confirmación predeterminado, representado con un círculo relleno
- REVERSE : destaca que la confirmación es una confirmación inversa, representada con un círculo relleno cruzado.
- HIGHLIGHT : resalta una confirmación concreta, representada con un rectángulo relleno.
Para una confirmación dada, puedes especificar su tipo con la propiedad type al declararla, seguida de dos puntos : y la opción de tipo deseada comentada arriba. Por ejemplo: commit type:
Nota: si no se especifica el tipo de confirmación, se elige NORMAL de forma predeterminada
Veamos con el siguiente diagrama cómo se comportan estos distintos tipos de confirmación:
Copiar
Insertar
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
En este ejemplo, hemos especificado un tipo distinto para cada confirmación. Además, fíjate en cómo incluimos a la vez id y type al declarar la confirmación.
Añadir etiqueta
Para una confirmación dada, puedes decorarla con tag, de forma similar al concepto de etiqueta o versión publicada en el mundo de git. Puedes adjuntar una etiqueta personalizada con la propiedad tag al declarar la confirmación, seguida de dos puntos :, y anotar el valor personalizado entre comillas dobles.
Copiar
Insertar
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
En este ejemplo, hemos establecido una etiqueta personalizada para la confirmación.
Crear una nueva rama
En Mermaid, para crear una nueva rama puedes usar la sintaxis branch. También debes proporcionar el nombre de la nueva rama. El nombre debe ser único y no puede ser el nombre de una rama existente.
Cuando Mermaid lee la sintaxis branch, crea una nueva rama y la establece como rama actual. Equivale a crear una nueva rama en el diagrama de Git y cambiar a ella.
Copiar
Insertar
gitGraph
commit
commit
branch develop
commit
commit
commit
En este ejemplo se puede ver cómo empezamos desde la rama predeterminada main y enviamos dos confirmaciones a ella. Luego creamos la rama develop, y a partir de ese momento todas las confirmaciones se colocan en la rama develop, porque pasó a ser la rama actual.
Cambiar a una rama existente
En Mermaid, para cambiar a una rama existente puedes usar la sintaxis checkout, y también debes proporcionar el nombre de la rama existente. Si no se encuentra una rama con el nombre indicado, se producirá un error en la consola. Ejemplo de uso: checkout develop
Cuando Mermaid lee la sintaxis checkout, encuentra la rama con el nombre indicado y la establece como rama actual. Esto equivale a hacer checkout de una rama en Git.
Copiar
Insertar
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
En este ejemplo, empezamos desde la rama predeterminada main y enviamos dos confirmaciones a ella. Luego creamos la rama develop, y a continuación las tres confirmaciones se colocan en la rama develop, porque pasó a ser la rama actual. Después, usamos la sintaxis checkout para establecer la rama actual como main, y todas las confirmaciones posteriores se registran en la rama main.
Fusionar dos ramas
En Mermaid, para fusionar o conectar con una rama existente, necesitas usar la sintaxis merge. Además, debes proporcionar el nombre de una rama existente que se vaya a fusionar. Si no se encuentra una rama con el nombre indicado, se mostrará un error en la consola. Asimismo, solo puedes fusionar dos ramas independientes; no puedes fusionar una rama consigo misma.
Ejemplo de sintaxis: merge develop
Cuando Mermaid lee la sintaxis merge, encuentra la rama indicada y su última confirmación, y la fusiona con la última confirmación de la rama actual. Se representa con un doble círculo relleno.
A continuación se muestra un ejemplo de fusión de dos ramas:
Copiar
Insertar
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
En este ejemplo, primero se empieza desde la rama main y se envían dos confirmaciones a ella. Luego creamos la rama develop y enviamos tres confirmaciones a la rama develop. Después, usamos la sintaxis checkout para establecer la rama actual como main, y todas las confirmaciones posteriores se hacen para la rama main. Por último, fusionamos la rama develop en la rama main, lo que produce una confirmación de fusión. Como en ese momento la rama actual sigue siendo main, las dos últimas confirmaciones se registran en esa rama.
También puedes añadir atributos similares a tu fusión:
- id sobrescribe el ID predeterminado con un ID personalizado
- tag añade una etiqueta personalizada a la confirmación de fusión
- type sobrescribe el tipo predeterminado de la confirmación de fusión. Puedes usar los otros tipos de confirmación mencionados antes.
Copiar
Insertar
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"
Fusionar selectivamente confirmaciones de otra rama
Mermaid admite seleccionar una confirmación de otra rama a la rama actual. También puedes usar la sintaxis cherry-pick para seleccionar una confirmación de otra rama.
Para usar la sintaxis cherry-pick, debes especificar un id con la propiedad id y luego escribir el id de confirmación que quieras después de dos puntos :, encerrándolo entre comillas dobles. Por ejemplo:
Aquí hay algunas reglas importantes que debes tener en cuenta:
- Necesitas proporcionar un id para seleccionar una confirmación existente. Si el ID de confirmación indicado no existe, se producirá un error. Para ello, usa el formato commit id:$value para declarar la confirmación.
- La confirmación indicada no debe existir en la rama actual; la confirmación seleccionada debe provenir siempre de una rama distinta de la rama actual.
- La rama actual debe tener al menos una confirmación antes de poder hacer cherry-pick; de lo contrario, se producirá un error.
- Al seleccionar una confirmación de fusión, se debe proporcionar el ID de la confirmación padre. Si omites la propiedad padre o proporcionas un ID de confirmación padre no válido, se producirá un error.
- La confirmación padre indicada debe ser la confirmación padre directa de la confirmación de fusión que se está seleccionando.
Copiar
Insertar
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"
Opciones de configuración específicas
En el diagrama de Git de Mermaid puedes configurar las siguientes opciones:
- showBranches : valor booleano, predeterminado true. Si se establece en false, no se muestran las ramas.
- showCommitLabel : valor booleano, predeterminado true. Si se establece en false, no se muestran las etiquetas de confirmación.
- mainBranchName : cadena, predeterminado main. El nombre de la rama predeterminada.
- mainBranchOrder : la posición de la rama principal en la lista de ramas. Predeterminado 0, lo que significa que de forma predeterminada la rama main ocupa la 1.ª posición.
- parallelCommits : valor booleano, predeterminado false. Si se establece en true, las confirmaciones que distan del padre se muestran en el mismo nivel.
Ocultar el nombre de la rama y la línea de conexión
A veces puede que quieras ocultar el nombre de la rama y la línea de conexión. Puedes hacerlo con la sintaxis showBranches. De forma predeterminada su valor es true; puedes usar la directiva para establecerlo en false.
Copiar
Insertar
---
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
Diseño de las etiquetas de confirmación: rotado u horizontal
Mermaid admite dos tipos de diseño de las etiquetas de confirmación. El diseño predeterminado es rotado, lo que significa que la etiqueta se coloca debajo del círculo de la confirmación y se rota 45 grados para una mejor legibilidad. Esto resulta especialmente útil para confirmaciones con etiquetas largas.
Otro tipo es horizontal, lo que significa que la etiqueta se coloca debajo del círculo de la confirmación y se muestra centrada horizontalmente, sin rotar. Esto resulta especialmente útil para confirmaciones con etiquetas cortas.
Puedes cambiar el diseño de las etiquetas de confirmación usando la sintaxis rotateCommitLabel en la directiva. Su valor predeterminado es true, lo que indica que las etiquetas de confirmación se rotan.
Ejemplo de uso: etiquetas de confirmación rotadas
Copiar
Insertar
---
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
Ejemplo de uso: etiquetas de confirmación horizontales
Copiar
Insertar
---
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 las etiquetas de confirmación
A veces puede que quieras ocultar las etiquetas de confirmación. Puedes hacerlo con la sintaxis showCommitLabel. De forma predeterminada su valor es true; puedes usar la directiva para establecerlo en false.
Copiar
Insertar
---
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
Personalizar el nombre de la rama principal
A veces puede que quieras personalizar el nombre de la rama principal. Puedes hacerlo con la sintaxis mainBranchName. De forma predeterminada su valor es main; puedes usar la directiva para establecerlo en cualquier cadena.
Copiar
Insertar
---
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"
Echa un vistazo al diagrama de una línea de metro ficticia creado con Mermaid. Aquí hemos cambiado el nombre de la rama principal predeterminada a MetroLine1.
Personalizar el orden de las ramas
En Mermaid, de forma predeterminada, las ramas se muestran en el orden en que se definen o aparecen en el código del gráfico.
A veces puede que quieras personalizar el orden de las ramas. Puedes hacerlo con la sintaxis order junto a la definición de la rama; puedes establecerla en un número positivo.
Mermaid sigue el orden de prioridad dado por la sintaxis order.
- La rama principal siempre se muestra primero, porque su valor de orden predeterminado es 0. (A menos que se modifique su orden con la sintaxis mainBranchOrder de la configuración y se cambie de 0)
- A continuación, todas las ramas sin order se muestran en el orden en que aparecen en el código del gráfico.
- A continuación, todas las ramas con order se muestran en el orden de su valor de order.
Para controlar por completo el orden de todas las ramas, debes definir order para todas las ramas.
Copiar
Insertar
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
En el diagrama anterior, todas las ramas siguen el orden definido.
Copiar
Insertar
---
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
En el diagrama anterior, todas las ramas sin orden especificado se dibujan en el orden en que se definieron. Después se dibuja la rama test4, porque su orden es 1. A continuación se dibuja la rama main, porque su orden es 2. Por último se dibuja la rama test1, porque su orden es 3.
Nota: como hemos sobrescrito mainBranchOrder con 2, la rama main no se dibuja al principio, sino que se muestra según su orden.
Aquí hemos cambiado el nombre de la rama principal predeterminada a MetroLine1.
Dirección
Mermaid admite tres direcciones: de izquierda a derecha (predeterminada), de arriba hacia abajo y de abajo hacia arriba.
De izquierda a derecha (predeterminado, LR:)
En Mermaid, la dirección predeterminada va de izquierda a derecha, con las ramas apiladas unas sobre otras.
Sin embargo, puedes establecer este valor explícitamente con LR: después de la sintaxis gitGraph.
Copiar
Insertar
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De arriba hacia abajo (TB:)
En la dirección de arriba hacia abajo, las confirmaciones van de la parte superior a la inferior del gráfico, y las ramas se disponen una al lado de otra.
Para orientar el gráfico de esta forma, debes añadir TB: después de la sintaxis gitGraph.
Copiar
Insertar
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De abajo hacia arriba (BT:)
En la dirección de abajo hacia arriba, las confirmaciones van de la parte inferior a la superior del gráfico, y las ramas se disponen una al lado de otra.
Para orientar el gráfico de esta forma, debes añadir BT: después de la sintaxis gitGraph.
Copiar
Insertar
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Confirmaciones temporales (parallelCommits: false)
Copiar
Insertar
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Confirmaciones en paralelo (parallelCommits: true)
Copiar
Insertar
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid admite una serie de temas personalizados que puedes usar para encontrar el tema que más te convenga. Nota: de hecho, puedes sobrescribir las variables de un tema existente para crear tu propio tema personalizado.
A continuación se muestran las distintas opciones de temas personalizados:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Para cambiar el tema, puedes usar la sintaxis initialize.
Tema base
Copiar
Insertar
---
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 bosque
Copiar
Insertar
---
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 predeterminado
Copiar
Insertar
---
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 oscuro
Copiar
Insertar
---
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
Insertar
---
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 con variables de tema
Mermaid te permite personalizar tus gráficos con variables de tema, que controlan la apariencia y el estilo de los distintos elementos del gráfico.
Para entenderlo, tomemos como ejemplo el tema default; los valores predeterminados de las variables de tema se toman automáticamente del tema.
Usar el tema default para establecer el color de las ramas:
Copiar
Insertar
---
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 admite variables de tema para sobrescribir los valores predeterminados, con un máximo de 8 ramas, es decir, puedes usar variables de tema para establecer el color de hasta 8 ramas. A partir de 8 ramas, las variables de tema se reutilizan de forma cíclica, es decir, la novena rama usará el estilo de la primera rama.
Personalizar el color de las ramas
Puedes usar las variables de tema git0 a git7 para personalizar el color de las ramas. Mermaid te permite establecer el color de hasta 8 ramas, donde la variable git0 controla el color de la primera rama, git1 controla el color de la segunda, y así sucesivamente.
Nota: los valores predeterminados de estas variables de tema se toman del tema seleccionado. Si quieres sobrescribir los valores predeterminados, puedes usar la sintaxis initialize para añadir valores de variables de tema personalizados.
Ejemplo:
Ahora sobrescribamos los valores predeterminados de las variables git0 a git3:
Copiar
Insertar
---
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
Personalizar el color de las etiquetas de rama
Puedes usar las variables de tema gitBranchLabel0 a gitBranchLabel7 para personalizar el color de las etiquetas de rama. Mermaid te permite establecer el color de hasta 8 ramas, donde la variable gitBranchLabel0 controla el color de la etiqueta de la primera rama, la variable gitBranchLabel1 controla el color de la etiqueta de la segunda rama, y así sucesivamente.
Veamos cómo usar el tema default para establecer el color de las etiquetas de rama:
Ahora sobrescribamos los valores predeterminados de las variables gitBranchLabel0 a gitBranchLabel2:
Copiar
Insertar
---
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
Aquí puedes ver que los colores y estilos de branch8 y branch9 se toman respectivamente de las ramas con índice de posición 0 (main) y 1 (branch1).
Personalizar el color de las confirmaciones
Puedes usar las variables de tema commitLabelColor y commitLabelBackground para personalizar, respectivamente, el color y el color de fondo de las etiquetas de confirmación.
Ejemplo: ahora sobrescribamos los valores predeterminados de las variables commitLabelColor a commitLabelBackground:
Copiar
Insertar
---
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
Puedes usar la variable de tema commitLabelFontSize para personalizar el tamaño de fuente de las etiquetas de confirmación.
Ejemplo: ahora sobrescribamos el valor predeterminado de la variable commitLabelFontSize:
Copiar
Insertar
---
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
Personalizar el tamaño de fuente de las etiquetas
Puedes usar la variable de tema tagLabelFontSize para personalizar el tamaño de fuente de las etiquetas.
Ejemplo: ahora sobrescribamos el valor predeterminado de la variable tagLabelFontSize:
Copiar
Insertar
---
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
Personalizar el color de las etiquetas
Puedes usar las variables de tema tagLabelColor, tagLabelBackground y tagLabelBorder para personalizar las etiquetas, cambiando respectivamente el color del texto de la etiqueta, el color de fondo de la etiqueta y el borde de la etiqueta.
Ejemplo: ahora sobrescribamos los valores predeterminados de las variables tagLabelColor, tagLabelBackground y tagLabelBorder:
Copiar
Insertar
---
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
Personalizar el color de las confirmaciones resaltadas
Puedes usar las variables de tema gitInv0 a gitInv7 para personalizar el color de las confirmaciones resaltadas según la rama en la que se encuentren. Mermaid te permite establecer el color de las confirmaciones resaltadas de hasta 8 ramas, donde la variable gitInv0 controla el color de la confirmación resaltada de la primera rama, la variable gitInv1 controla el color de la confirmación resaltada de la segunda rama, y así sucesivamente.
Ahora sobrescribamos los valores predeterminados de las variables git0 a git3:
Copiar
Insertar
---
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
