Git diagram
Git graf je vizuální vyjádření git commitů a git operací na různých větvích.
Git graf je zvláště užitečný pro vývojáře a provozní týmy, kteří mohou sdílet svou strategii Git větví.
Mermaid umí vykreslit Git graf
Kopírovat
Vložení
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid podporuje základní git operace, například:
- commit : představuje nový commit na aktuální větvi.
- branch : vytvoří novou větev a přepne na ni a zároveň ji nastaví jako aktuální větev.
- checkout : přepne na existující větev a nastaví ji jako aktuální větev.
- merge : sloučí existující větev do aktuální větve.
Díky těmto git operacím můžete v Mermaid velmi snadno a rychle kreslit Git graf. Názvy entit obvykle začínají velkým písmenem, ačkoli pro to neexistuje uznávaný standard a v Mermaid to není povinné.
Poznámka: checkout a switch lze používat zaměnitelně.
Syntaxe
Syntaxe Mermaid pro Git graf je velmi přímá a jednoduchá. Používá deklarativní přístup, každý commit se vykresluje na časové ose Git grafu v pořadí, v jakém se objevuje v kódu. V podstatě se řídí pořadím vložení každého příkazu.
Nejprve pomocí syntaxe gitGraph deklarujte typ diagramu. Syntaxe gitGraph říká Mermaid, že chcete kreslit Git graf, a podle toho interpretuje kód diagramu.
Každý Git graf se inicializuje větví main. Pokud nevytvoříte jiné větve, commity ve výchozím nastavení vstupují do hlavní větve. Je to dáno způsobem fungování gitu, na začátku vždy začínáte z hlavní větve. Ve výchozím nastavení je větev main nastavena jako aktuální větev.
Pomocí syntaxe commit můžete na aktuální větvi zaregistrovat commit; podívejme se, jak to funguje:
Jednoduchý git graf zobrazující tři commity výchozí větve main:
Kopírovat
Vložení
gitGraph
commit
commit
commit
Při pozorném prohlédnutí předchozího příkladu můžete vidět výchozí větev main a tři commity. Všimněte si také, že ve výchozím nastavení je každému commitu přiřazeno jedinečné a náhodné ID.
Přidání vlastního ID commitu
U určitého commitu můžete při deklaraci zadat vlastní ID pomocí vlastnosti id, za níž následuje dvojtečka:, a vlastní hodnotu uvést do dvojitých uvozovek.
Podívejme se na následujícím obrázku, jak to funguje:
Kopírovat
Vložení
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Změna typu commitu
V Mermaid existují tři typy commitů, které se v diagramu vykreslují mírně odlišně. Tyto typy jsou:
- NORMAL : výchozí typ commitu, znázorněný plným kruhem
- REVERSE : zdůrazňuje, že commit je reverzní, znázorněný kříženým plným kruhem.
- HIGHLIGHT : zvýrazňuje určitý commit, znázorněný plným obdélníkem.
U daného commitu můžete při deklaraci zadat jeho typ pomocí vlastnosti type, za níž následuje dvojtečka : a požadovaná možnost typu uvedená výše. Například: commit type:
Poznámka: pokud není typ commitu zadán, použije se ve výchozím nastavení NORMAL
Podívejme se na následujícím obrázku, jak tyto různé typy commitů probíhají:
Kopírovat
Vložení
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
V tomto příkladu jsme pro každý commit zadali jiný typ. Všimněte si také, jak jsme při deklaraci commitu zahrnuli id i type.
Přidání značky
Daný commit můžete ozdobit pomocí tag, podobně jako koncept značky nebo vydané verze ve světě gitu. Vlastní značku můžete připojit při deklaraci commitu pomocí vlastnosti tag, za níž následuje dvojtečka:, a vlastní hodnotu uvést do dvojitých uvozovek.
Kopírovat
Vložení
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
V tomto příkladu jsme pro commit nastavili vlastní značku.
Vytvoření nové větve
V Mermaid můžete pro vytvoření nové větve použít syntaxi branch. Musíte také uvést název nové větve. Název musí být jedinečný a nesmí odpovídat názvu existující větve.
Když Mermaid načte syntaxi branch, vytvoří novou větev a nastaví se jako aktuální. Odpovídá to vytvoření nové větve v Git grafu a přepnutí na ni.
Kopírovat
Vložení
gitGraph
commit
commit
branch develop
commit
commit
commit
V tomto příkladu můžete vidět, jak jsme začali z výchozí větve main a nahráli na ni dva commity. Poté jsme vytvořili větev develop a všechny následující commity se umístily do větve develop, protože se stala aktuální větví.
Přepnutí na existující větev
V Mermaid lze pro přepnutí na existující větev použít syntaxi checkout a musíte uvést název existující větve. Pokud není větev se zadaným názvem nalezena, způsobí to chybu v konzoli. Příklad použití: checkout develop
Když Mermaid načte syntaxi checkout, najde větev se zadaným názvem a nastaví se jako aktuální. Odpovídá to přepnutí na větev v Gitu.
Kopírovat
Vložení
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
V tomto příkladu jsme nejprve začali z výchozí větve main a nahráli na ni dva commity. Poté jsme vytvořili větev develop a všechny tři následující commity se umístily do větve develop, protože se stala aktuální větví. Následně jsme pomocí syntaxe checkout nastavili aktuální větev na main a všechny další commity se zaznamenaly do větve main.
Sloučení dvou větví
V Mermaid musíte pro sloučení nebo připojení k existující větvi použít syntaxi merge. Zároveň musíte uvést název existující větve, kterou chcete sloučit. Pokud není větev se zadaným názvem nalezena, zobrazí se chyba v konzoli. Navíc můžete sloučit pouze dvě nezávislé větve, nelze sloučit větev samu se sebou.
Příklad syntaxe: merge develop
Když Mermaid načte syntaxi merge, najde zadanou větev a její poslední commit a sloučí jej s posledním commitem aktuální větve. Znázorňuje se plným dvojitým kruhem.
Následuje příklad sloučení dvou větví:
Kopírovat
Vložení
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
V tomto příkladu jsme nejprve začali z větve main a nahráli na ni dva commity. Poté jsme vytvořili větev develop a nahráli do ní tři commity. Následně jsme pomocí syntaxe checkout nastavili aktuální větev na main a všechny další commity se týkaly větve main. Nakonec jsme sloučili větev develop do větve main, čímž vznikl slučovací commit. Protože aktuální větev je stále main, poslední dva commity se zaznamenaly do této větve.
Své sloučení můžete opatřit také podobnými vlastnostmi:
- id přepíše výchozí ID vlastním ID
- tag přidá vlastní značku ke slučovacímu commitu
- type přepíše výchozí typ slučovacího commitu. Můžete použít další typy commitů uvedené výše.
Kopírovat
Vložení
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"
Selektivní sloučení commitů z jiné větve
Mermaid podporuje vybrání commitu z jiné větve do aktuální větve. Commit z jiné větve můžete vybrat také pomocí syntaxe cherry-pick.
Chcete-li použít syntaxi cherry-pick, musíte pomocí vlastnosti id zadat id a za dvojtečku : napsat požadované id commitu a uzavřít jej do dvojitých uvozovek. Například:
Zde je několik důležitých pravidel, která je třeba dodržovat:
- Musíte uvést id, abyste vybrali existující commit. Pokud zadané ID commitu neexistuje, způsobí to chybu. Za tímto účelem deklarujte commit ve formátu commit id:$value.
- Zadaný commit nesmí existovat na aktuální větvi; vybraný commit musí vždy pocházet z větve odlišné od aktuální větve.
- Aktuální větev musí mít alespoň jeden commit, aby bylo možné provést cherry-pick, jinak dojde k chybě.
- Při výběru slučovacího commitu je nutné uvést ID rodičovského commitu. Pokud vynecháte vlastnost rodiče nebo uvedete neplatné ID rodičovského commitu, vyvolá to chybu.
- Zadaný rodičovský commit musí být přímým rodičovským commitem vybíraného slučovacího commitu.
Kopírovat
Vložení
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"
Konkrétní možnosti konfigurace
V Git grafu Mermaid můžete nakonfigurovat následující možnosti:
- showBranches : logická hodnota, výchozí je true. Pokud je nastaveno na false, větve se nezobrazí.
- showCommitLabel : logická hodnota, výchozí je true. Pokud je nastaveno na false, značky commitů se nezobrazí.
- mainBranchName : řetězec, výchozí je main. Název výchozí větve.
- mainBranchOrder : pozice hlavní větve v seznamu větví. Výchozí je 0, což znamená, že ve výchozím nastavení je větev main na 1. místě.
- parallelCommits : logická hodnota, výchozí je false. Pokud je nastaveno na true, commity ve stejné vzdálenosti od rodiče se zobrazí na stejné úrovni.
Skrytí názvů větví a spojovacích čar
Někdy můžete chtít skrýt názvy větví a spojovací čáry. Můžete to provést pomocí syntaxe showBranches. Ve výchozím nastavení je její hodnota true; pomocí direktivy ji můžete nastavit na false.
Kopírovat
Vložení
---
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
Rozvržení značek commitů: otočené nebo vodorovné
Mermaid podporuje dva typy rozvržení značek commitů. Výchozí rozvržení je otočené, což znamená, že značka je umístěna pod kruhem commitu a otočena o 45 stupňů pro lepší čitelnost. To je zvláště užitečné pro commity s dlouhými popisky.
Další typ je vodorovný, což znamená, že značka je umístěna pod kruhem commitu a vodorovně vycentrována, bez otočení. To je zvláště užitečné pro commity s krátkými popisky.
Rozvržení značek commitů můžete změnit pomocí syntaxe rotateCommitLabel v direktivě. Výchozí je true, což znamená, že se značky commitů otáčejí.
Příklad použití: otočené značky commitů
Kopírovat
Vložení
---
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
Příklad použití: vodorovné značky commitů
Kopírovat
Vložení
---
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
Skrytí značek commitů
Někdy můžete chtít skrýt značky commitů. Můžete to provést pomocí syntaxe showCommitLabel. Ve výchozím nastavení je její hodnota true; pomocí direktivy ji můžete nastavit na false.
Kopírovat
Vložení
---
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
Přizpůsobení názvu hlavní větve
Někdy můžete chtít přizpůsobit název hlavní větve. Můžete to provést pomocí syntaxe mainBranchName. Ve výchozím nastavení je její hodnota main; pomocí direktivy ji můžete nastavit na libovolný řetězec.
Kopírovat
Vložení
---
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"
Podívejte se na virtuální mapu metra vytvořenou pomocí Mermaid. Zde jsme změnili výchozí název hlavní větve na MetroLine1.
Přizpůsobení pořadí větví
V Mermaid se ve výchozím nastavení větve zobrazují v pořadí, v jakém byly v kódu grafu definovány nebo se objevily.
Někdy můžete chtít přizpůsobit pořadí větví. Můžete toho dosáhnout pomocí syntaxe order u definice větve, kterou můžete nastavit na kladné číslo.
Mermaid se řídí prioritou danou syntaxí order.
- Hlavní větev se vždy zobrazuje jako první, protože její výchozí hodnota pořadí je 0. (Pokud její pořadí nebylo změněno pomocí syntaxe mainBranchOrder v konfiguraci a změněno z 0)
- Následně se všechny větve bez order zobrazí v pořadí, v jakém se objevují v kódu grafu.
- Následně se všechny větve s order zobrazí v pořadí podle své hodnoty order.
Pro úplnou kontrolu nad pořadím všech větví musíte pro všechny větve definovat order.
Kopírovat
Vložení
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Na obrázku výše všechny větve dodržují definované pořadí.
Kopírovat
Vložení
---
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
Na obrázku výše jsou všechny větve bez zadaného pořadí nakresleny v pořadí, v jakém byly definovány. Poté je nakreslena větev test4, protože její pořadí je 1. Následně je nakreslena větev main, protože její pořadí je 2. Nakonec je nakreslena větev test1, protože její pořadí je 3.
Poznámka: protože jsme přepsali mainBranchOrder na 2, větev main se nekreslí na začátku, ale zobrazí se podle pořadí.
Zde jsme změnili výchozí název hlavní větve na MetroLine1.
Směr
Mermaid podporuje tři směry: zleva doprava (výchozí), shora dolů a zdola nahoru.
Zleva doprava (výchozí, LR:)
V Mermaid výchozí směr probíhá zleva doprava a větve jsou naskládány na sobě.
Tuto hodnotu však můžete výslovně nastavit pomocí LR: za syntaxí gitGraph.
Kopírovat
Vložení
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Shora dolů (TB:)
Ve směru shora dolů probíhají commity z horní části diagramu dolů a větve jsou uspořádány vedle sebe.
Chcete-li graf orientovat tímto způsobem, musíte za syntaxí gitGraph přidat TB:.
Kopírovat
Vložení
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Zdola nahoru (BT:)
Ve směru zdola nahoru probíhají commity ze spodní části diagramu nahoru a větve jsou uspořádány vedle sebe.
Chcete-li graf orientovat tímto způsobem, musíte za syntaxí gitGraph přidat BT:.
Kopírovat
Vložení
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dočasné commity (parallelCommits: false)
Kopírovat
Vložení
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Paralelní commity (parallelCommits: true)
Kopírovat
Vložení
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Téma
Mermaid podporuje řadu vlastních témat, která můžete použít k nalezení vhodného tématu. Poznámka: můžete skutečně přepsat proměnné existujícího tématu a vytvořit si vlastní téma.
Následují různé možnosti vlastních témat:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Chcete-li změnit téma, můžete použít syntaxi initialize.
Základní téma
Kopírovat
Vložení
---
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
Lesní téma
Kopírovat
Vložení
---
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
Výchozí téma
Kopírovat
Vložení
---
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
Tmavé téma
Kopírovat
Vložení
---
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
Neutrální téma
Kopírovat
Vložení
---
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
Přizpůsobení pomocí proměnných tématu
Mermaid umožňuje přizpůsobit diagramy pomocí proměnných tématu, které řídí vzhled a styl jednotlivých prvků diagramu.
Pro pochopení si vezměme jako příklad téma default; výchozí hodnoty proměnných tématu se automaticky přebírají z tématu.
Nastavení barvy větve pomocí tématu default:
Kopírovat
Vložení
---
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 podporuje proměnné tématu pro přepsání výchozích hodnot, a to až pro 8 větví, tj. pomocí proměnných tématu můžete nastavit barvy až pro 8 větví. Po více než 8 větvích se proměnné tématu opakovaně používají cyklicky, tj. 9. větev použije styl 1. větve.
Vlastní barva větve
Barvy větví můžete přizpůsobit pomocí proměnných tématu git0 až git7. Mermaid umožňuje nastavit barvy až pro 8 větví, přičemž proměnná git0 řídí barvu první větve, git1 druhé větve atd.
Poznámka: výchozí hodnoty těchto proměnných tématu se přebírají z vybraného tématu. Pokud chcete přepsat výchozí hodnoty, můžete pomocí syntaxe initialize přidat vlastní hodnoty proměnných tématu.
Příklad:
Nyní přepišme výchozí hodnoty proměnných git0 až git3:
Kopírovat
Vložení
---
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
Vlastní barva popisku větve
Barvy popisků větví můžete přizpůsobit pomocí proměnných tématu gitBranchLabel0 až gitBranchLabel7. Mermaid umožňuje nastavit barvy až pro 8 větví, přičemž proměnná gitBranchLabel0 řídí barvu popisku první větve, proměnná gitBranchLabel1 barvu popisku druhé větve atd.
Podívejme se, jak nastavit barvu popisků větví pomocí tématu default:
Nyní přepišme výchozí hodnoty proměnných gitBranchLabel0 až gitBranchLabel2:
Kopírovat
Vložení
---
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
Zde můžete vidět, že barvy a styly větví branch8 a branch9 se přebírají z větví s indexem 0 (main) a 1 (branch1).
Vlastní barva commitu
Barvu a barvu pozadí popisků commitů můžete přizpůsobit pomocí proměnných tématu commitLabelColor a commitLabelBackground.
Příklad: nyní přepišme výchozí hodnoty proměnných commitLabelColor až commitLabelBackground:
Kopírovat
Vložení
---
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
Velikost písma popisků commitů můžete přizpůsobit pomocí proměnné tématu commitLabelFontSize.
Příklad: nyní přepišme výchozí hodnotu proměnné commitLabelFontSize:
Kopírovat
Vložení
---
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
Vlastní velikost písma popisku
Velikost písma popisků můžete přizpůsobit pomocí proměnné tématu tagLabelFontSize.
Příklad: nyní přepišme výchozí hodnotu proměnné tagLabelFontSize:
Kopírovat
Vložení
---
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
Vlastní barva popisku
Popisky můžete přizpůsobit pomocí proměnných tématu tagLabelColor, tagLabelBackground a tagLabelBorder, které mění barvu textu popisku, barvu pozadí popisku a ohraničení popisku.
Příklad: nyní přepišme výchozí hodnoty proměnných tagLabelColor, tagLabelBackground a tagLabelBorder:
Kopírovat
Vložení
---
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
Vlastní barva zvýrazněného commitu
Barvu zvýrazněných commitů můžete přizpůsobit podle příslušné větve pomocí proměnných tématu gitInv0 až gitInv7. Mermaid umožňuje nastavit barvy konkrétních zvýrazněných commitů až pro 8 větví, přičemž proměnná gitInv0 řídí barvu zvýrazněného commitu první větve, proměnná gitInv1 barvu zvýrazněného commitu druhé větve atd.
Nyní přepišme výchozí hodnoty proměnných git0 až git3:
Kopírovat
Vložení
---
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
