Git-Diagramm
Ein Git-Diagramm ist eine visuelle Darstellung von Git-Commits und Git-Operationen auf verschiedenen Branches.
Git-Diagramme sind besonders hilfreich für Entwickler und Betriebsteams, um ihre Git-Branch-Strategie zu teilen.
Mermaid kann Git-Diagramme rendern
Kopieren
Einbetten
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid unterstützt grundlegende Git-Operationen, zum Beispiel:
- commit : Stellt einen neuen Commit auf dem aktuellen Branch dar.
- branch : Erstellt einen neuen Branch und wechselt dorthin, während er als aktueller Branch festgelegt wird.
- checkout : Wechselt zu einem bereits vorhandenen Branch und legt ihn als aktuellen Branch fest.
- merge : Führt einen vorhandenen Branch in den aktuellen Branch zusammen.
Mit diesen Git-Operationen kannst du Git-Diagramme in Mermaid sehr einfach und schnell zeichnen. Entitätsnamen beginnen üblicherweise mit einem Großbuchstaben, obwohl es dafür keinen anerkannten Standard gibt und es in Mermaid nicht erforderlich ist.
Hinweis: checkout und switch können austauschbar verwendet werden.
Syntax
Die Mermaid-Syntax für Git-Diagramme ist sehr direkt und einfach. Sie verwendet einen deklarativen Ansatz, bei dem jeder Commit in der Reihenfolge seines Auftretens im Code auf der Zeitachse des Git-Diagramms gezeichnet wird. Im Wesentlichen folgt sie der Einfügereihenfolge jedes Befehls.
Deklariere zunächst mit der gitGraph-Syntax deinen Diagrammtyp. Die gitGraph-Syntax teilt Mermaid mit, dass du ein Git-Diagramm zeichnen möchtest, und parst den Diagrammcode entsprechend.
Jedes Git-Diagramm wird mit dem main-Branch initialisiert. Sofern du keine anderen Branches erstellst, gehen Commits standardmäßig in den Hauptbranch. Dies ist durch die Arbeitsweise von git bedingt: Am Anfang beginnst du immer mit dem Hauptbranch. Standardmäßig wird der main-Branch als aktueller Branch festgelegt.
Du kannst mit der commit-Syntax einen Commit auf dem aktuellen Branch registrieren; schauen wir uns an, wie das funktioniert:
Ein einfaches Git-Diagramm, das drei Commits des Standardbranches main zeigt:
Kopieren
Einbetten
gitGraph
commit
commit
commit
Wenn du das vorherige Beispiel genau betrachtest, kannst du den Standardbranch main sowie drei Commits erkennen. Beachte außerdem, dass jedem Commit standardmäßig eine eindeutige und zufällige ID zugewiesen wird.
Benutzerdefinierte Commit-ID hinzufügen
Für einen bestimmten Commit kannst du bei der Deklaration mit der id-Eigenschaft eine benutzerdefinierte ID angeben, dann einen Doppelpunkt : hinzufügen und den benutzerdefinierten Wert in doppelte Anführungszeichen setzen.
Schauen wir uns anhand des folgenden Diagramms an, wie das funktioniert:
Kopieren
Einbetten
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Commit-Typ ändern
In Mermaid gibt es drei Arten von Commits, die im Diagramm leicht unterschiedlich gerendert werden. Diese Typen sind:
- NORMAL : Standard-Commit-Typ, dargestellt durch einen ausgefüllten Kreis
- REVERSE : Betont, dass der Commit ein umgekehrter Commit ist, dargestellt durch einen ausgefüllten Kreis mit Kreuz.
- HIGHLIGHT : Hebt einen bestimmten Commit hervor, dargestellt durch ein ausgefülltes Rechteck.
Für einen bestimmten Commit kannst du bei der Deklaration mit der type-Eigenschaft seinen Typ angeben, gefolgt von einem Doppelpunkt : und der oben erläuterten gewünschten Typoption. Zum Beispiel: commit type:
Hinweis: Wenn kein Commit-Typ angegeben wird, wird standardmäßig NORMAL ausgewählt
Schauen wir uns anhand des folgenden Diagramms an, wie diese verschiedenen Commit-Typen ablaufen:
Kopieren
Einbetten
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
In diesem Beispiel haben wir für jeden Commit einen anderen Typ angegeben. Beachte außerdem, wie wir bei der Deklaration des Commits sowohl id als auch type angegeben haben.
Tag hinzufügen
Für einen bestimmten Commit kannst du ihn mit tag verzieren, ähnlich dem Konzept eines Tags oder einer Release-Version in der git world. Du kannst beim Deklarieren des Commits mit der tag-Eigenschaft ein benutzerdefiniertes Tag anhängen, gefolgt von einem Doppelpunkt :, und den benutzerdefinierten Wert in doppelte Anführungszeichen setzen.
Kopieren
Einbetten
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
In diesem Beispiel haben wir ein benutzerdefiniertes Tag für den Commit festgelegt.
Neuen Branch erstellen
Um in Mermaid einen neuen Branch zu erstellen, kannst du die branch-Syntax verwenden. Du musst außerdem den Namen des neuen Branches angeben. Der Name muss eindeutig sein und darf nicht der Name eines vorhandenen Branches sein.
Wenn Mermaid die branch-Syntax liest, erstellt es einen neuen Branch und legt ihn als aktuellen Branch fest. Das entspricht dem Erstellen eines neuen Branches im Git-Diagramm und dem Wechseln zu diesem Branch.
Kopieren
Einbetten
gitGraph
commit
commit
branch develop
commit
commit
commit
In diesem Beispiel siehst du, wie wir mit dem Standardbranch main beginnen und zwei Commits darauf pushen. Dann haben wir den Branch develop erstellt, und alle nachfolgenden Commits wurden auf den Branch develop gesetzt, da er zum aktuellen Branch wurde.
Vorhandenen Branch auschecken
Um in Mermaid zu einem vorhandenen Branch zu wechseln, kannst du die checkout-Syntax verwenden; außerdem musst du den Namen des vorhandenen Branches angeben. Wenn kein Branch mit dem angegebenen Namen gefunden wird, führt dies zu einem Konsolenfehler. Anwendungsbeispiel: checkout develop
Wenn Mermaid die checkout-Syntax liest, findet es den Branch mit dem angegebenen Namen und legt ihn als aktuellen Branch fest. Das entspricht dem Auschecken eines Branches in Git.
Kopieren
Einbetten
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
In diesem Beispiel beginnen wir zunächst mit dem Standardbranch main und pushen zweimal darauf. Dann haben wir den Branch develop erstellt, und anschließend wurden alle drei Commits auf den Branch develop gesetzt, da er zum aktuellen Branch wurde. Danach haben wir mit der checkout-Syntax den aktuellen Branch auf main gesetzt, und alle nachfolgenden Commits werden auf dem Branch main registriert.
Zwei Branches zusammenführen
Um in Mermaid einen Branch zusammenzuführen oder mit einem vorhandenen Branch zu verbinden, musst du die merge-Syntax verwenden. Gleichzeitig musst du den Namen eines vorhandenen Branches angeben, der zusammengeführt werden soll. Wenn kein Branch mit dem angegebenen Namen gefunden wird, wird ein Fehler in der Konsole angezeigt. Außerdem kannst du nur zwei unabhängige Branches zusammenführen und einen Branch nicht mit sich selbst zusammenführen.
Syntaxbeispiel: merge develop
Wenn Mermaid die merge-Syntax liest, findet es den angegebenen Branch und dessen letzten Commit und führt ihn mit dem letzten Commit des aktuellen Branches zusammen. Dargestellt durch einen ausgefüllten Doppelkreis.
Im Folgenden findest du ein Beispiel für das Zusammenführen zweier Branches:
Kopieren
Einbetten
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
In diesem Beispiel beginnen wir zunächst mit dem Branch main und pushen zweimal darauf. Dann haben wir den Branch develop erstellt und drei Commits auf den Branch develop gepusht. Danach haben wir mit der checkout-Syntax den aktuellen Branch auf main gesetzt, und alle nachfolgenden Commits beziehen sich auf den Branch main. Schließlich haben wir den Branch develop in den Branch main zusammengeführt, wodurch ein Merge-Commit entsteht. Da der aktuelle Branch zu diesem Zeitpunkt weiterhin main ist, werden die letzten beiden Commits auf diesem Branch registriert.
Du kannst deiner Zusammenführung auch ähnliche Eigenschaften hinzufügen:
- id überschreibt die Standard-ID mit einer benutzerdefinierten ID
- tag fügt dem Merge-Commit ein benutzerdefiniertes Tag hinzu
- type überschreibt den Standardtyp des Merge-Commits. Du kannst die zuvor erwähnten anderen Commit-Typen verwenden.
Kopieren
Einbetten
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"
Commits selektiv aus einem anderen Branch zusammenführen
Mermaid unterstützt das Auswählen eines Commits aus einem anderen Branch in den aktuellen Branch. Du kannst auch die cherry-pick-Syntax verwenden, um einen Commit aus einem anderen Branch auszuwählen.
Um die cherry-pick-Syntax zu verwenden, musst du mit der id-Eigenschaft eine id angeben und dann nach dem Doppelpunkt : die gewünschte Commit-id schreiben und in doppelte Anführungszeichen setzen. Zum Beispiel:
Hier sind einige wichtige Regeln, die zu beachten sind:
- Du musst eine id angeben, um einen vorhandenen Commit auszuwählen. Wenn die angegebene Commit-ID nicht existiert, führt dies zu einem Fehler. Verwende dazu das Format commit id:$value, um den Commit zu deklarieren.
- Der angegebene Commit darf nicht auf dem aktuellen Branch existieren; der ausgewählte Commit muss immer aus einem anderen Branch als dem aktuellen stammen.
- Der aktuelle Branch muss mindestens einen Commit haben, bevor ein cherry-pick durchgeführt werden kann, andernfalls führt dies zu einem Fehler.
- Beim Auswählen eines Merge-Commits muss die Eltern-Commit-ID angegeben werden. Wenn die Eltern-Eigenschaft weggelassen oder eine ungültige Eltern-Commit-ID angegeben wird, wird ein Fehler ausgelöst.
- Der angegebene Eltern-Commit muss der direkte Eltern-Commit des ausgewählten Merge-Commits sein.
Kopieren
Einbetten
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"
Spezifische Konfigurationsoptionen
Im Mermaid Git-Diagramm kannst du die folgenden Optionen konfigurieren:
- showBranches : Boolescher Wert, Standard ist true. Wenn auf false gesetzt, werden Branches nicht angezeigt.
- showCommitLabel : Boolescher Wert, Standard ist true. Wenn auf false gesetzt, wird das Commit-Label nicht angezeigt.
- mainBranchName : Zeichenkette, Standard ist main. Der Name des Standardbranches.
- mainBranchOrder : Die Position des Hauptbranches in der Branch-Liste. Standard ist 0, was bedeutet, dass der main-Branch standardmäßig an erster Stelle steht.
- parallelCommits : Boolescher Wert, Standard ist false. Wenn auf true gesetzt, werden Commits mit Abstand zum übergeordneten Element auf derselben Ebene angezeigt.
Branch-Namen und Verbindungslinie ausblenden
Manchmal möchtest du vielleicht die Branch-Namen und Verbindungslinien ausblenden. Du kannst dies mit der showBranches-Syntax erreichen. Standardmäßig ist ihr Wert true; du kannst sie mit einer Direktive auf false setzen.
Kopieren
Einbetten
---
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 des Commit-Labels: Gedreht oder horizontal
Mermaid unterstützt zwei Arten von Layouts für Commit-Labels. Das Standardlayout ist gedreht, das heißt, das Label wird unterhalb des Commit-Kreises platziert und um 45 Grad gedreht, um eine bessere Lesbarkeit zu erzielen. Dies ist besonders nützlich für Commits mit langen Labels.
Ein anderer Typ ist horizontal, das heißt, das Label wird unterhalb des Commit-Kreises platziert und horizontal zentriert angezeigt, ohne gedreht zu werden. Dies ist besonders nützlich für Commits mit kurzen Labels.
Du kannst das Layout des Commit-Labels ändern, indem du in der Direktive die rotateCommitLabel-Syntax verwendest. Sie ist standardmäßig true, was bedeutet, dass das Commit-Label gedreht wird.
Anwendungsbeispiel: Gedrehtes Commit-Label
Kopieren
Einbetten
---
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
Anwendungsbeispiel: Horizontales Commit-Label
Kopieren
Einbetten
---
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
Commit-Label ausblenden
Manchmal möchtest du vielleicht das Commit-Label ausblenden. Du kannst dies mit der showCommitLabel-Syntax erreichen. Standardmäßig ist ihr Wert true; du kannst sie mit einer Direktive auf false setzen.
Kopieren
Einbetten
---
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
Benutzerdefinierter Name des Hauptbranches
Manchmal möchtest du vielleicht den Namen des Hauptbranches anpassen. Du kannst dies mit der mainBranchName-Syntax erreichen. Standardmäßig ist ihr Wert main; du kannst sie mit einer Direktive auf eine beliebige Zeichenkette setzen.
Kopieren
Einbetten
---
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"
Sieh dir den mit Mermaid erstellten virtuellen U-Bahn-Linienplan an. Hier haben wir den Standardnamen des Hauptbranches in MetroLine1 geändert.
Benutzerdefinierte Branch-Reihenfolge
In Mermaid werden Branches standardmäßig in der Reihenfolge angezeigt, in der sie im Diagrammcode definiert wurden oder erscheinen.
Manchmal möchtest du vielleicht die Branch-Reihenfolge anpassen. Du kannst dies erreichen, indem du die order-Syntax neben der Branch-Definition verwendest; du kannst sie auf eine positive Zahl setzen.
Mermaid befolgt die durch die order-Syntax vorgegebene Prioritätsreihenfolge.
- Der Hauptbranch wird immer zuerst angezeigt, da sein Standard-Reihenfolgenwert 0 ist. (Es sei denn, seine Reihenfolge wurde durch die mainBranchOrder-Syntax in der Konfiguration geändert und von 0 abweichend geändert)
- Als Nächstes werden alle Branches ohne order in der Reihenfolge angezeigt, in der sie im Diagrammcode erscheinen.
- Als Nächstes werden alle Branches mit order in der Reihenfolge ihres order-Werts angezeigt.
Um die Reihenfolge aller Branches vollständig zu steuern, muss für alle Branches order definiert werden.
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Im obigen Diagramm folgen alle Branches der definierten Reihenfolge.
Kopieren
Einbetten
---
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
Im obigen Diagramm werden alle Branches ohne angegebene Reihenfolge in der definierten Reihenfolge gezeichnet. Danach wird der Branch test4 gezeichnet, da seine Reihenfolge 1 ist. Als Nächstes wird der Branch main gezeichnet, da seine Reihenfolge 2 ist. Schließlich wird der Branch test1 gezeichnet, da seine Reihenfolge 3 ist.
Hinweis: Da wir mainBranchOrder auf 2 überschrieben haben, wird der Branch main nicht am Anfang gezeichnet, sondern in der Reihenfolge angezeigt.
Hier haben wir den Standardnamen des Hauptbranches in MetroLine1 geändert.
Richtung
Mermaid unterstützt drei Richtungen: von links nach rechts (Standard), von oben nach unten und von unten nach oben.
Von links nach rechts (Standard, LR:)
In Mermaid verläuft die Standardrichtung von links nach rechts, wobei die Branches übereinander gestapelt werden.
Du kannst diesen Wert jedoch explizit mit LR: nach der gitGraph-Syntax festlegen.
Kopieren
Einbetten
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Von oben nach unten (TB:)
In der Richtung von oben nach unten verlaufen Commits vom oberen zum unteren Rand des Diagramms, und die Branches werden nebeneinander angeordnet.
Um das Diagramm auf diese Weise auszurichten, musst du TB: nach der gitGraph-Syntax hinzufügen.
Kopieren
Einbetten
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Von unten nach oben (BT:)
In der Richtung von unten nach oben verlaufen Commits vom unteren zum oberen Rand des Diagramms, und die Branches werden nebeneinander angeordnet.
Um das Diagramm auf diese Weise auszurichten, musst du BT: nach der gitGraph-Syntax hinzufügen.
Kopieren
Einbetten
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Temporäre Commits (parallelCommits: false)
Kopieren
Einbetten
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallele Commits (parallelCommits: true)
Kopieren
Einbetten
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Thema
Mermaid unterstützt eine Reihe benutzerdefinierter Themen, mit denen du ein zu dir passendes Thema finden kannst. Hinweis: Du kannst tatsächlich die Variablen eines vorhandenen Themas überschreiben, um dein eigenes benutzerdefiniertes Thema zu erstellen.
Im Folgenden findest du die verschiedenen Optionen für benutzerdefinierte Themen:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Um das Thema zu ändern, kannst du die initialize-Syntax verwenden.
Basis-Thema
Kopieren
Einbetten
---
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
Wald-Thema
Kopieren
Einbetten
---
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
Standard-Thema
Kopieren
Einbetten
---
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
Dunkles Thema
Kopieren
Einbetten
---
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
Neutrales Thema
Kopieren
Einbetten
---
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
Mit Themenvariablen anpassen
Mermaid ermöglicht es dir, dein Diagramm mit Themenvariablen anzupassen; diese Variablen steuern das Aussehen und den Stil der einzelnen Elemente des Diagramms.
Zum besseren Verständnis nehmen wir das Thema default als Beispiel; die Standardwerte der Themenvariablen werden automatisch aus dem Thema übernommen.
Verwende das Thema default, um die Farbe der Branches festzulegen:
Kopieren
Einbetten
---
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 unterstützt Themenvariablen zum Überschreiben der Standardwerte für bis zu 8 Branches, d. h. du kannst mit Themenvariablen die Farben von bis zu 8 Branches festlegen. Nach mehr als 8 Branches werden die Themenvariablen zyklisch wiederverwendet, d. h. der 9. Branch verwendet den Stil des 1. Branches.
Benutzerdefinierte Branch-Farbe
Du kannst die Themenvariablen git0 bis git7 verwenden, um die Branch-Farben anzupassen. Mermaid ermöglicht es dir, die Farben von bis zu 8 Branches festzulegen, wobei die Variable git0 die Farbe des ersten Branches steuert, git1 die Farbe des zweiten Branches und so weiter.
Hinweis: Die Standardwerte dieser Themenvariablen werden aus dem ausgewählten Thema übernommen. Wenn du die Standardwerte überschreiben möchtest, kannst du mit der initialize-Syntax benutzerdefinierte Themenvariablenwerte hinzufügen.
Beispiel:
Jetzt überschreiben wir die Standardwerte der Variablen git0 bis git3:
Kopieren
Einbetten
---
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
Benutzerdefinierte Farbe des Branch-Labels
Du kannst die Themenvariablen gitBranchLabel0 bis gitBranchLabel7 verwenden, um die Farbe der Branch-Labels anzupassen. Mermaid ermöglicht es dir, die Farben von bis zu 8 Branches festzulegen, wobei die Variable gitBranchLabel0 die Farbe des ersten Branch-Labels steuert, die Variable gitBranchLabel1 die Farbe des zweiten Branch-Labels und so weiter.
Schauen wir uns an, wie man mit dem Thema default die Farbe der Branch-Labels festlegt:
Jetzt überschreiben wir die Standardwerte der Variablen gitBranchLabel0 bis gitBranchLabel2:
Kopieren
Einbetten
---
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
Hier kannst du sehen, dass die Farben und Stile von branch8 und branch9 jeweils von den Branches an Indexposition 0 (main) und 1 (branch1) übernommen werden.
Benutzerdefinierte Commit-Farbe
Du kannst die Themenvariablen commitLabelColor und commitLabelBackground verwenden, um die Farbe und die Hintergrundfarbe des Commit-Labels getrennt anzupassen.
Beispiel: Jetzt überschreiben wir die Standardwerte der Variablen commitLabelColor bis commitLabelBackground:
Kopieren
Einbetten
---
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
Du kannst die Themenvariable commitLabelFontSize verwenden, um die Schriftgröße des Commit-Labels anzupassen.
Beispiel: Jetzt überschreiben wir die Standardwerte der Variable commitLabelFontSize:
Kopieren
Einbetten
---
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
Benutzerdefinierte Schriftgröße des Labels
Du kannst die Themenvariable tagLabelFontSize verwenden, um die Schriftgröße des Labels anzupassen.
Beispiel: Jetzt überschreiben wir die Standardwerte der Variable tagLabelFontSize:
Kopieren
Einbetten
---
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
Benutzerdefinierte Label-Farbe
Du kannst die Themenvariablen tagLabelColor, tagLabelBackground und tagLabelBorder verwenden, um das Label anzupassen und jeweils die Textfarbe, die Hintergrundfarbe und den Rahmen des Labels zu ändern.
Beispiel: Jetzt überschreiben wir die Standardwerte der Variablen tagLabelColor, tagLabelBackground und tagLabelBorder:
Kopieren
Einbetten
---
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
Benutzerdefinierte Farbe hervorhebender Commits
Du kannst die Themenvariablen gitInv0 bis gitInv7 verwenden, um die Farbe hervorgehobener Commits je nach ihrem Branch anzupassen. Mermaid ermöglicht es dir, die Farbe bestimmter hervorgehobener Commits für bis zu 8 Branches festzulegen, wobei die Variable gitInv0 die Farbe der hervorgehobenen Commits des ersten Branches steuert, die Variable gitInv1 die Farbe der hervorgehobenen Commits des zweiten Branches und so weiter.
Jetzt überschreiben wir die Standardwerte der Variablen git0 bis git3:
Kopieren
Einbetten
---
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
