Diagramme Git
Le diagramme Git est une représentation visuelle des commits git et des opérations git sur différentes branches.
Le diagramme Git est particulièrement utile aux développeurs et aux équipes d'exploitation, qui peuvent s'en servir pour partager leur stratégie de branches Git.
Mermaid peut rendre des diagrammes Git
Copier
Intégrer
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid prend en charge les opérations git de base, par exemple :
- commit : représente un nouveau commit sur la branche courante.
- branch : crée et bascule vers une nouvelle branche tout en la définissant comme branche courante.
- checkout : bascule vers une branche existante et la définit comme branche courante.
- merge : fusionne une branche existante dans la branche courante.
Grâce à ces opérations Git, vous pouvez tracer très facilement et rapidement des diagrammes Git dans Mermaid. Les noms d'entités commencent généralement par une majuscule, bien qu'il n'existe aucune norme reconnue à ce sujet et que ce ne soit pas obligatoire dans Mermaid.
Remarque : checkout et switch sont interchangeables.
Syntaxe
La syntaxe Mermaid des diagrammes Git est très directe et simple. Elle adopte une approche déclarative : chaque commit est dessiné sur la chronologie du diagramme Git dans l'ordre où il apparaît dans le code. Fondamentalement, elle respecte l'ordre d'insertion de chaque commande.
Tout d'abord, déclarez le type de votre diagramme à l'aide de la syntaxe gitGraph. La syntaxe gitGraph indique à Mermaid que vous souhaitez tracer un diagramme Git et analyse le code du diagramme en conséquence.
Chaque diagramme Git est initialisé avec la branche main. Sauf si vous créez une branche différente, les commits vont par défaut dans la branche principale. Cela découle du fonctionnement de git : au départ, vous commencez toujours par la branche principale. Par défaut, la branche main est définie comme branche courante.
Vous pouvez utiliser la syntaxe commit pour enregistrer un commit sur la branche courante ; voyons comment cela fonctionne :
Un diagramme git simple, montrant les trois commits de la branche par défaut main :
Copier
Intégrer
gitGraph
commit
commit
commit
Si vous observez attentivement l'exemple précédent, vous pouvez voir la branche par défaut main ainsi que les trois commits. Notez également que, par défaut, chaque commit se voit attribuer un ID unique et aléatoire.
Ajouter un ID de commit personnalisé
Pour un commit donné, vous pouvez spécifier un ID personnalisé lors de sa déclaration à l'aide de la propriété id, suivie de deux-points :, en indiquant la valeur personnalisée entre guillemets doubles.
Voyons comment cela fonctionne à l'aide de la figure ci-dessous :
Copier
Intégrer
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Modifier le type de commit
Dans Mermaid, il existe trois types de commits, dont le rendu dans le diagramme est légèrement différent. Ces types sont :
- NORMAL : type de commit par défaut, représenté par un cercle plein
- REVERSE : souligne que le commit est un commit inversé, représenté par un cercle plein croisé.
- HIGHLIGHT : met en surbrillance un commit spécifique, représenté par un rectangle plein.
Pour un commit donné, vous pouvez spécifier son type lors de la déclaration à l'aide de la propriété type, suivie de deux-points : et de l'option de type souhaitée évoquée ci-dessus. Par exemple : commit type:
Remarque : si le type de commit n'est pas spécifié, NORMAL est choisi par défaut
Voyons, à l'aide de la figure ci-dessous, comment se présentent ces différents types de commits :
Copier
Intégrer
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Dans cet exemple, nous avons spécifié un type différent pour chaque commit. De plus, remarquez comment nous avons inclus à la fois id et type lors de la déclaration des commits.
Ajouter une étiquette
Pour un commit donné, vous pouvez le décorer avec tag, à l'image de la notion d'étiquette ou de version publiée dans le monde de git. Vous pouvez attacher une étiquette personnalisée lors de la déclaration du commit à l'aide de la propriété tag, suivie de deux-points :, en indiquant la valeur personnalisée entre guillemets doubles.
Copier
Intégrer
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
Dans cet exemple, nous avons défini une étiquette personnalisée pour le commit.
Créer une nouvelle branche
Dans Mermaid, pour créer une nouvelle branche, vous pouvez utiliser la syntaxe branch. Vous devez également fournir le nom de la nouvelle branche. Le nom doit être unique et ne peut pas être celui d'une branche existante.
Lorsque Mermaid lit la syntaxe branch, il crée une nouvelle branche et la définit comme branche courante. Cela équivaut à créer une nouvelle branche dans le diagramme Git et à basculer vers celle-ci.
Copier
Intégrer
gitGraph
commit
commit
branch develop
commit
commit
commit
Dans cet exemple, on voit comment nous partons de la branche par défaut main et y poussons deux commits. Nous créons ensuite la branche develop, et tous les commits suivants sont placés sur la branche develop, car elle est devenue la branche courante.
Extraire une branche existante
Dans Mermaid, pour basculer vers une branche existante, vous pouvez utiliser la syntaxe checkout, et vous devez également fournir le nom de la branche existante. Si aucune branche portant le nom spécifié n'est trouvée, une erreur de console se produit. Exemple d'utilisation : checkout develop
Lorsque Mermaid lit la syntaxe checkout, il trouve la branche portant le nom spécifié et la définit comme branche courante. Cela équivaut à extraire une branche dans Git.
Copier
Intégrer
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Dans cet exemple, nous partons d'abord de la branche par défaut main et y poussons deux commits. Nous créons ensuite la branche develop, puis les trois commits suivants sont placés sur la branche develop, car elle est devenue la branche courante. Ensuite, nous utilisons la syntaxe checkout pour définir main comme branche courante, et tous les commits suivants sont enregistrés sur la branche main.
Fusionner deux branches
Dans Mermaid, pour fusionner ou relier une branche existante, vous devez utiliser la syntaxe merge. Vous devez également fournir le nom d'une branche existante à fusionner. Si aucune branche portant le nom spécifié n'est trouvée, une erreur s'affiche dans la console. De plus, vous ne pouvez fusionner que deux branches distinctes ; vous ne pouvez pas fusionner une branche avec elle-même.
Exemple de syntaxe : merge develop
Lorsque Mermaid lit la syntaxe merge, il trouve la branche spécifiée et son dernier commit, puis le fusionne avec le dernier commit de la branche courante. Représenté par un double cercle plein.
Voici un exemple de fusion de deux branches :
Copier
Intégrer
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dans cet exemple, on part d'abord de la branche main et on y pousse deux commits. Nous créons ensuite la branche develop et y poussons trois commits. Ensuite, nous utilisons la syntaxe checkout pour définir main comme branche courante, et tous les commits suivants visent la branche main. Enfin, nous fusionnons la branche develop dans la branche main, ce qui produit un commit de fusion. Comme la branche courante est encore main à ce moment-là, les deux derniers commits sont enregistrés sur cette branche.
Vous pouvez également ajouter des attributs similaires à votre fusion :
- id remplace l'ID par défaut par un ID personnalisé
- tag ajoute une étiquette personnalisée au commit de fusion
- type remplace le type par défaut du commit de fusion. Vous pouvez utiliser les autres types de commits mentionnés précédemment.
Copier
Intégrer
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"
Fusionner sélectivement des commits depuis une autre branche
Mermaid prend en charge le transfert d'un commit depuis une autre branche vers la branche courante. Vous pouvez également utiliser la syntaxe cherry-pick pour sélectionner un commit depuis une autre branche.
Pour utiliser la syntaxe cherry-pick, vous devez spécifier un id à l'aide de la propriété id, puis écrire après les deux-points : l'id du commit souhaité, en l'entourant de guillemets doubles. Par exemple :
Voici quelques règles importantes à respecter :
- Vous devez fournir un id afin de sélectionner un commit existant. Si l'ID de commit donné n'existe pas, une erreur se produira. Pour cela, utilisez le format commit id:$value pour déclarer le commit.
- Le commit donné ne doit pas exister sur la branche courante ; le commit sélectionné doit toujours provenir d'une branche différente de la branche courante.
- La branche courante doit comporter au moins un commit avant de pouvoir effectuer un cherry-pick, sinon une erreur se produira.
- Lors de la sélection d'un commit de fusion, l'ID du commit parent doit être fourni. Si la propriété parent est omise ou si un ID de commit parent non valide est fourni, une erreur sera levée.
- Le parent spécifié doit être le parent direct du commit de fusion en cours de sélection.
Copier
Intégrer
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"
Options de configuration spécifiques
Dans un diagramme Git Mermaid, vous pouvez configurer les options suivantes :
- showBranches : valeur booléenne, par défaut true. Si elle est définie sur false, les branches ne sont pas affichées.
- showCommitLabel : valeur booléenne, par défaut true. Si elle est définie sur false, les étiquettes de commit ne sont pas affichées.
- mainBranchName : chaîne de caractères, par défaut main. Nom de la branche par défaut.
- mainBranchOrder : position de la branche principale dans la liste des branches. Par défaut 0, ce qui signifie que par défaut, la branche main occupe la 1re position.
- parallelCommits : valeur booléenne, par défaut false. Si elle est définie sur true, les commits situés à la même distance du parent sont affichés au même niveau.
Masquer les noms de branches et les lignes de connexion
Il arrive que vous souhaitiez masquer les noms de branches et les lignes de connexion. Vous pouvez le faire à l'aide de la syntaxe showBranches. Par défaut, sa valeur est true ; vous pouvez la définir sur false à l'aide d'une directive.
Copier
Intégrer
---
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
Disposition des étiquettes de commit : rotation ou horizontal
Mermaid prend en charge deux types de disposition des étiquettes de commit. La disposition par défaut est en rotation, c'est-à-dire que l'étiquette est placée sous le cercle du commit et pivotée de 45 degrés pour une meilleure lisibilité. Cela est particulièrement utile pour les commits comportant de longues étiquettes.
L'autre type est horizontal, c'est-à-dire que l'étiquette est placée sous le cercle du commit, centrée horizontalement, sans rotation. Cela est particulièrement utile pour les commits comportant des étiquettes courtes.
Vous pouvez modifier la disposition des étiquettes de commit à l'aide de la syntaxe rotateCommitLabel dans la directive. Elle vaut true par défaut, ce qui signifie que les étiquettes de commit sont pivotées.
Exemple d'utilisation : étiquettes de commit en rotation
Copier
Intégrer
---
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
Exemple d'utilisation : étiquettes de commit horizontales
Copier
Intégrer
---
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
Masquer les étiquettes de commit
Il arrive que vous souhaitiez masquer les étiquettes de commit. Vous pouvez le faire à l'aide de la syntaxe showCommitLabel. Par défaut, sa valeur est true ; vous pouvez la définir sur false à l'aide d'une directive.
Copier
Intégrer
---
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
Personnaliser le nom de la branche principale
Il arrive que vous souhaitiez personnaliser le nom de la branche principale. Vous pouvez le faire à l'aide de la syntaxe mainBranchName. Par défaut, sa valeur est main ; vous pouvez la définir sur n'importe quelle chaîne de caractères à l'aide d'une directive.
Copier
Intégrer
---
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"
Regardez ce plan de ligne de métro fictif créé avec Mermaid. Ici, nous remplaçons le nom de la branche principale par défaut par MetroLine1.
Personnaliser l'ordre des branches
Dans Mermaid, par défaut, les branches sont affichées dans l'ordre où elles sont définies ou apparaissent dans le code du diagramme.
Il arrive que vous souhaitiez personnaliser l'ordre des branches. Vous pouvez le faire en utilisant la syntaxe order à côté de la définition de branche ; vous pouvez la définir sur un nombre positif.
Mermaid respecte l'ordre de priorité donné par la syntaxe order.
- La branche principale est toujours affichée en premier, car sa valeur d'ordre par défaut est 0. (Sauf si son ordre a été modifié via la syntaxe mainBranchOrder de la configuration et changé par rapport à 0)
- Ensuite, toutes les branches sans order seront affichées dans l'ordre où elles apparaissent dans le code du diagramme.
- Ensuite, toutes les branches dotées d'un order seront affichées dans l'ordre de leur valeur order.
Pour contrôler complètement l'ordre de toutes les branches, vous devez définir un order pour toutes les branches.
Copier
Intégrer
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Dans la figure ci-dessus, toutes les branches respectent l'ordre défini.
Copier
Intégrer
---
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
Dans la figure ci-dessus, toutes les branches dont l'ordre n'est pas spécifié sont dessinées dans l'ordre de leur définition. Ensuite, la branche test4 est dessinée, car son ordre est 1. Puis la branche main est dessinée, car son ordre est 2. Enfin, la branche test1 est dessinée, car son ordre est 3.
Remarque : comme nous avons remplacé mainBranchOrder par 2, la branche main n'est pas dessinée au début, mais affichée selon son ordre.
Ici, nous remplaçons le nom de la branche principale par défaut par MetroLine1.
Direction
Mermaid prend en charge trois directions : de gauche à droite (par défaut), de haut en bas et de bas en haut.
De gauche à droite (par défaut, LR:)
Dans Mermaid, la direction par défaut va de gauche à droite, les branches étant empilées les unes sur les autres.
Toutefois, vous pouvez définir explicitement cette valeur à l'aide de LR: après la syntaxe gitGraph.
Copier
Intégrer
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De haut en bas (TB:)
Dans la direction de haut en bas, les commits vont du haut vers le bas du diagramme, et les branches sont disposées côte à côte.
Pour orienter le graphique de cette manière, vous devez ajouter TB: après la syntaxe gitGraph.
Copier
Intégrer
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
De bas en haut (BT:)
Dans la direction de bas en haut, les commits vont du bas vers le haut du diagramme, et les branches sont disposées côte à côte.
Pour orienter le graphique de cette manière, vous devez ajouter BT: après la syntaxe gitGraph.
Copier
Intégrer
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commits temporaires (parallelCommits: false)
Copier
Intégrer
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commits parallèles (parallelCommits: true)
Copier
Intégrer
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Thème
Mermaid prend en charge une série de thèmes personnalisés, que vous pouvez utiliser pour trouver un thème qui vous convient. Remarque : vous pouvez en fait remplacer les variables d'un thème existant pour créer votre propre thème personnalisé.
Voici les différentes options de thème personnalisé :
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Pour changer de thème, vous pouvez utiliser la syntaxe initialize.
Thème de base
Copier
Intégrer
---
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
Thème forêt
Copier
Intégrer
---
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
Thème par défaut
Copier
Intégrer
---
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
Thème sombre
Copier
Intégrer
---
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
Thème neutre
Copier
Intégrer
---
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
Personnaliser à l'aide des variables de thème
Mermaid vous permet de personnaliser vos diagrammes à l'aide de variables de thème, qui contrôlent l'apparence et le style des différents éléments du diagramme.
Pour bien comprendre, prenons l'exemple du thème default ; les valeurs par défaut des variables de thème sont automatiquement extraites du thème.
Utiliser le thème default pour définir la couleur des branches :
Copier
Intégrer
---
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 prend en charge des variables de thème permettant de remplacer les valeurs par défaut, pour un maximum de 8 branches, c'est-à-dire que vous pouvez définir la couleur d'un maximum de 8 branches à l'aide des variables de thème. Au-delà de 8 branches, les variables de thème sont réutilisées de manière cyclique, c'est-à-dire que la 9e branche utilisera le style de la 1re branche.
Personnaliser la couleur des branches
Vous pouvez personnaliser la couleur des branches à l'aide des variables de thème git0 à git7. Mermaid permet de définir la couleur d'un maximum de 8 branches, la variable git0 contrôlant la couleur de la première branche, git1 celle de la deuxième, et ainsi de suite.
Remarque : les valeurs par défaut de ces variables de thème sont extraites du thème choisi. Si vous souhaitez les remplacer, vous pouvez utiliser la syntaxe initialize pour ajouter des valeurs de variables de thème personnalisées.
Exemple :
Remplaçons maintenant les valeurs par défaut des variables git0 à git3 :
Copier
Intégrer
---
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
Personnaliser la couleur des étiquettes de branches
Vous pouvez personnaliser la couleur des étiquettes de branches à l'aide des variables de thème gitBranchLabel0 à gitBranchLabel7. Mermaid permet de définir la couleur d'un maximum de 8 branches, la variable gitBranchLabel0 contrôlant la couleur de la première étiquette de branche, gitBranchLabel1 celle de la deuxième, et ainsi de suite.
Voyons comment utiliser le thème default pour définir la couleur des étiquettes de branches :
Remplaçons maintenant les valeurs par défaut des variables gitBranchLabel0 à gitBranchLabel2 :
Copier
Intégrer
---
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
Ici, vous pouvez voir que la couleur et le style de branch8 et branch9 sont extraits respectivement des branches aux positions d'index 0 (main) et 1 (branch1).
Personnaliser la couleur des commits
Vous pouvez personnaliser respectivement la couleur et la couleur de fond des étiquettes de commit à l'aide des variables de thème commitLabelColor et commitLabelBackground.
Exemple : remplaçons maintenant les valeurs par défaut des variables commitLabelColor à commitLabelBackground :
Copier
Intégrer
---
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
Vous pouvez personnaliser la taille de police des étiquettes de commit à l'aide de la variable de thème commitLabelFontSize.
Exemple : remplaçons maintenant la valeur par défaut de la variable commitLabelFontSize :
Copier
Intégrer
---
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
Personnaliser la taille de police des étiquettes
Vous pouvez personnaliser la taille de police des étiquettes à l'aide de la variable de thème tagLabelFontSize.
Exemple : remplaçons maintenant la valeur par défaut de la variable tagLabelFontSize :
Copier
Intégrer
---
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
Personnaliser la couleur des étiquettes
Vous pouvez personnaliser les étiquettes à l'aide des variables de thème tagLabelColor, tagLabelBackground et tagLabelBorder, qui modifient respectivement la couleur du texte, la couleur de fond et la bordure de l'étiquette.
Exemple : remplaçons maintenant les valeurs par défaut des variables tagLabelColor, tagLabelBackground et tagLabelBorder :
Copier
Intégrer
---
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
Personnaliser la couleur des commits mis en surbrillance
Vous pouvez personnaliser la couleur des commits mis en surbrillance selon la branche à laquelle ils appartiennent, à l'aide des variables de thème gitInv0 à gitInv7. Mermaid permet de définir la couleur de commits mis en surbrillance pour un maximum de 8 branches, la variable gitInv0 contrôlant la couleur du commit mis en surbrillance de la première branche, gitInv1 celle de la deuxième, et ainsi de suite.
Remplaçons maintenant les valeurs par défaut des variables git0 à git3 :
Copier
Intégrer
---
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
