Diagram Git
Gitgraph to wizualne przedstawienie commitów git i operacji git na różnych gałęziach.
Gitgraph jest szczególnie pomocny dla programistów i zespołów operacyjnych, które mogą go używać do udostępniania swojej strategii gałęzi Git.
Mermaid może renderować Gitgraph
Kopiuj
Osadź
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid obsługuje podstawowe operacje git, na przykład:
- commit : oznacza nowy commit na bieżącej gałęzi.
- branch : tworzy i przełącza się na nową gałąź, ustawiając ją jednocześnie jako bieżącą.
- checkout : przełącza się na istniejącą gałąź i ustawia ją jako bieżącą.
- merge : scala istniejącą gałąź z bieżącą.
Dzięki tym operacjom git możesz bardzo łatwo i szybko rysować Gitgraph w Mermaid. Nazwy encji zwykle zaczynają się wielką literą, chociaż nie ma na to powszechnie przyjętego standardu i nie jest to wymagane w Mermaid.
Uwaga: checkout i switch są wymienne.
Składnia
Składnia Mermaid Gitgraph jest bardzo bezpośrednia i prosta. Wykorzystuje podejście deklaratywne; każdy commit jest rysowany na osi czasu Gitgraph w kolejności występowania w kodzie. Zasadniczo przestrzega kolejności wstawiania każdego polecenia.
Najpierw zadeklaruj typ diagramu za pomocą składni gitGraph. Składnia gitGraph informuje Mermaid, że chcesz narysować Gitgraph, i odpowiednio parsuje kod diagramu.
Każdy Gitgraph jest inicjowany gałęzią main. O ile nie utworzysz innych gałęzi, commity domyślnie trafiają do gałęzi głównej. Wynika to ze sposobu działania git — na początku zawsze zaczynasz od gałęzi głównej. Domyślnie gałąź main jest ustawiona jako bieżąca.
Możesz zarejestrować commit na bieżącej gałęzi za pomocą składni commit; zobaczmy, jak to działa:
Prosty Gitgraph pokazujący trzy commity na domyślnej gałęzi main:
Kopiuj
Osadź
gitGraph
commit
commit
commit
Jeśli przyjrzysz się uważnie poprzedniemu przykładowi, zobaczysz domyślną gałąź main oraz trzy commity. Należy również zauważyć, że domyślnie każdemu commitowi przypisywany jest unikalny, losowy ID.
Dodawanie niestandardowego ID commita
W przypadku danego commita możesz określić niestandardowy ID za pomocą właściwości id podczas jego deklarowania, a następnie dodać dwukropek : i podać niestandardową wartość w podwójnych cudzysłowach.
Zobaczmy na poniższym diagramie, jak to działa:
Kopiuj
Osadź
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Zmiana typu commita
W Mermaid istnieją trzy typy commitów, które różnią się nieco sposobem renderowania na diagramie. Te typy to:
- NORMAL : domyślny typ commita, reprezentowany przez wypełniony okrąg
- REVERSE : podkreśla, że commit jest commitem odwróconym, reprezentowany przez wypełniony okrąg z krzyżykiem.
- HIGHLIGHT : wyróżnia konkretny commit, reprezentowany przez wypełniony prostokąt.
W przypadku danego commita możesz określić jego typ za pomocą właściwości type podczas deklarowania, a następnie dodać dwukropek : i żądaną opcję typu omówioną powyżej. Na przykład: commit type:
Uwaga: jeśli nie określono typu commita, domyślnie wybierany jest NORMAL
Zobaczmy na poniższym diagramie, jak przebiegają te różne typy commitów:
Kopiuj
Osadź
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
W tym przykładzie określiliśmy inny typ dla każdego commita. Zwróć uwagę, jak uwzględniliśmy jednocześnie id i type podczas deklarowania commitów.
Dodawanie etykiety
W przypadku danego commita możesz ozdobić go za pomocą tag, podobnie jak koncepcja etykiety lub wersji wydania w świecie git. Możesz dołączyć niestandardową etykietę za pomocą właściwości tag podczas deklarowania commita, a następnie dodać dwukropek : i podać niestandardową wartość w podwójnych cudzysłowach.
Kopiuj
Osadź
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
W tym przykładzie ustawiliśmy niestandardowe etykiety dla commitów.
Tworzenie nowej gałęzi
W Mermaid, aby utworzyć nową gałąź, możesz użyć składni branch. Musisz także podać nazwę nowej gałęzi. Nazwa musi być unikalna i nie może być nazwą istniejącej gałęzi.
Gdy Mermaid odczytuje składnię branch, tworzy nową gałąź i ustawia ją jako bieżącą. Odpowiada to utworzeniu nowej gałęzi w Gitgraph i przełączeniu się na nią.
Kopiuj
Osadź
gitGraph
commit
commit
branch develop
commit
commit
commit
W tym przykładzie widać, jak zaczynamy od domyślnej gałęzi main i wypychamy na nią dwa commity. Następnie tworzymy gałąź develop, a wszystkie późniejsze commity trafiają do gałęzi develop, ponieważ stała się ona bieżącą gałęzią.
Przełączenie na istniejącą gałąź
W Mermaid, aby przełączyć się na istniejącą gałąź, możesz użyć składni checkout; musisz także podać nazwę istniejącej gałęzi. Jeśli nie znaleziono gałęzi o podanej nazwie, spowoduje to błąd w konsoli. Przykład użycia: checkout develop
Gdy Mermaid odczytuje składnię checkout, odnajduje gałąź o podanej nazwie i ustawia ją jako bieżącą. Odpowiada to przełączeniu na gałąź w Git.
Kopiuj
Osadź
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
W tym przykładzie najpierw zaczynamy od domyślnej gałęzi main i wypychamy na nią dwa commity. Następnie tworzymy gałąź develop, po czym wszystkie trzy commity trafiają do gałęzi develop, ponieważ stała się ona bieżącą gałęzią. Następnie używamy składni checkout, aby ustawić bieżącą gałąź jako main, a wszystkie kolejne commity są rejestrowane na gałęzi main.
Scalanie dwóch gałęzi
W Mermaid, aby scalić lub połączyć z istniejącą gałęzią, musisz użyć składni merge. Musisz także podać nazwę istniejącej gałęzi do scalenia. Jeśli nie znaleziono gałęzi o podanej nazwie, w konsoli zostanie wyświetlony błąd. Ponadto możesz scalać tylko dwie niezależne gałęzie; nie można scalić gałęzi z samą sobą.
Przykład składni: merge develop
Gdy Mermaid odczytuje składnię merge, odnajduje określoną gałąź i jej ostatni commit i scala go z ostatnim commitem bieżącej gałęzi. Jest reprezentowany przez wypełniony podwójny okrąg.
Oto przykład scalania dwóch gałęzi:
Kopiuj
Osadź
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
W tym przykładzie najpierw zaczynamy od gałęzi main i wypychamy na nią dwa commity. Następnie tworzymy gałąź develop i wypychamy trzy commity na gałąź develop. Następnie używamy składni checkout, aby ustawić bieżącą gałąź jako main, a wszystkie kolejne commity dotyczą gałęzi main. Na koniec scalamy gałąź develop z gałęzią main, co tworzy commit scalający. Ponieważ w tym momencie bieżącą gałęzią jest nadal main, dwa ostatnie commity są rejestrowane na tej gałęzi.
Możesz także dodać podobne właściwości do swojego scalenia:
- id nadpisuje domyślny ID niestandardowym ID
- tag dodaje niestandardową etykietę do commita scalającego
- type nadpisuje domyślny typ commita scalającego. Możesz użyć innych typów commitów wspomnianych wcześniej.
Kopiuj
Osadź
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"
Selektywne scalanie commitów z innej gałęzi
Mermaid obsługuje przenoszenie commita z jednej gałęzi do bieżącej. Możesz także użyć składni cherry-pick, aby przenieść commit z innej gałęzi.
Aby użyć składni cherry-pick, musisz określić id za pomocą właściwości id, a następnie wpisać żądany identyfikator commita po dwukropku : i ująć go w podwójne cudzysłowy. Na przykład:
Oto kilka ważnych zasad, o których należy pamiętać:
- Musisz podać id, aby wybrać istniejący commit. Jeśli podany ID commita nie istnieje, spowoduje to błąd. W tym celu użyj formatu commit id:$value, aby zadeklarować commit.
- Dany commit nie może znajdować się na bieżącej gałęzi; przenoszony commit musi zawsze pochodzić z gałęzi innej niż bieżąca.
- Bieżąca gałąź musi mieć co najmniej jeden commit, zanim będzie można wykonać cherry-pick, w przeciwnym razie spowoduje to błąd.
- Podczas przenoszenia commita scalającego należy podać ID commita nadrzędnego. Jeśli pominiesz właściwość nadrzędną lub podasz nieprawidłowe ID commita nadrzędnego, zostanie zgłoszony błąd.
- Określony commit nadrzędny musi być bezpośrednim rodzicem przenoszonego commita scalającego.
Kopiuj
Osadź
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"
Określone opcje konfiguracji
W Gitgraph Mermaid możesz skonfigurować następujące opcje:
- showBranches : wartość logiczna, domyślnie true. Jeśli ustawiono na false, gałęzie nie będą wyświetlane.
- showCommitLabel : wartość logiczna, domyślnie true. Jeśli ustawiono na false, etykiety commitów nie będą wyświetlane.
- mainBranchName : ciąg znaków, domyślnie main. Nazwa gałęzi domyślnej.
- mainBranchOrder : pozycja gałęzi głównej na liście gałęzi. Domyślnie 0, co oznacza, że domyślnie gałąź main znajduje się na 1. pozycji.
- parallelCommits : wartość logiczna, domyślnie false. Jeśli ustawiono na true, commity oddalone od rodzica będą wyświetlane na tym samym poziomie.
Ukryj nazwy gałęzi i linie połączeń
Czasami możesz chcieć ukryć nazwy gałęzi i linie połączeń. Możesz to zrobić za pomocą składni showBranches. Domyślnie jej wartość wynosi true; możesz ustawić ją na false za pomocą dyrektywy.
Kopiuj
Osadź
---
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
Układ etykiet commitów: obrócony lub poziomy
Mermaid obsługuje dwa typy układu etykiet commitów. Domyślny układ jest obrócony, co oznacza, że etykieta jest umieszczana pod okręgiem commita i obracana o 45 stopni dla lepszej czytelności. Jest to szczególnie przydatne w przypadku commitów z długimi etykietami.
Innym typem jest układ poziomy, co oznacza, że etykieta jest umieszczana pod okręgiem commita i wyświetlana poziomo wyśrodkowana, bez obracania. Jest to szczególnie przydatne w przypadku commitów z krótkimi etykietami.
Możesz zmienić układ etykiet commitów, używając składni rotateCommitLabel w dyrektywie. Domyślnie wynosi true, co oznacza, że etykiety commitów są obracane.
Przykład użycia: obrócone etykiety commitów
Kopiuj
Osadź
---
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
Przykład użycia: poziome etykiety commitów
Kopiuj
Osadź
---
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
Ukryj etykiety commitów
Czasami możesz chcieć ukryć etykiety commitów. Możesz to zrobić za pomocą składni showCommitLabel. Domyślnie jej wartość wynosi true; możesz ustawić ją na false za pomocą dyrektywy.
Kopiuj
Osadź
---
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
Niestandardowa nazwa gałęzi głównej
Czasami możesz chcieć dostosować nazwę gałęzi głównej. Możesz to zrobić za pomocą składni mainBranchName. Domyślnie jej wartość wynosi main; możesz ustawić ją na dowolny ciąg znaków za pomocą dyrektywy.
Kopiuj
Osadź
---
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"
Spójrz na wirtualny diagram linii metra utworzony za pomocą Mermaid. Tutaj zmieniamy domyślną nazwę gałęzi głównej na MetroLine1.
Niestandardowa kolejność gałęzi
W Mermaid domyślnie gałęzie są wyświetlane w kolejności, w jakiej zostały zdefiniowane lub pojawiły się w kodzie diagramu.
Czasami możesz chcieć dostosować kolejność gałęzi. Możesz to zrobić za pomocą składni order obok definicji gałęzi; możesz ustawić ją na liczbę dodatnią.
Mermaid przestrzega kolejności priorytetów podanej przez składnię order.
- Gałąź główna jest zawsze wyświetlana jako pierwsza, ponieważ jej domyślna wartość kolejności wynosi 0. (Chyba że jej kolejność została zmodyfikowana przez składnię mainBranchOrder w konfiguracji i zmieniona z 0)
- Następnie wszystkie gałęzie bez order będą wyświetlane w kolejności ich występowania w kodzie diagramu.
- Następnie wszystkie gałęzie z order będą wyświetlane w kolejności ich wartości order.
Aby w pełni kontrolować kolejność wszystkich gałęzi, należy zdefiniować order dla wszystkich gałęzi.
Kopiuj
Osadź
---
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 powyższym diagramie wszystkie gałęzie przestrzegają zdefiniowanej kolejności.
Kopiuj
Osadź
---
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 powyższym diagramie wszystkie gałęzie bez określonej kolejności są rysowane w kolejności zdefiniowania. Następnie rysowana jest gałąź test4, ponieważ jej kolejność wynosi 1. Potem rysowana jest gałąź main, ponieważ jej kolejność wynosi 2. Na koniec rysowana jest gałąź test1, ponieważ jej kolejność wynosi 3.
Uwaga: ponieważ nadpisaliśmy mainBranchOrder na 2, gałąź main nie jest rysowana na początku, lecz wyświetlana zgodnie z kolejnością.
Tutaj zmieniamy domyślną nazwę gałęzi głównej na MetroLine1.
Kierunek
Mermaid obsługuje trzy kierunki: od lewej do prawej (domyślnie), od góry do dołu i od dołu do góry.
Od lewej do prawej (domyślnie, LR:)
W Mermaid domyślny kierunek przebiega od lewej do prawej, a gałęzie są ułożone jedna na drugiej.
Możesz jednak jawnie ustawić tę wartość za pomocą LR: po składni gitGraph.
Kopiuj
Osadź
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Od góry do dołu (TB:)
W kierunku od góry do dołu commity przebiegają od góry do dołu diagramu, a gałęzie są ułożone obok siebie.
Aby ustawić diagram w tym kierunku, musisz dodać TB: po składni gitGraph.
Kopiuj
Osadź
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Od dołu do góry (BT:)
W kierunku od dołu do góry commity przebiegają od dołu do góry diagramu, a gałęzie są ułożone obok siebie.
Aby ustawić diagram w tym kierunku, musisz dodać BT: po składni gitGraph.
Kopiuj
Osadź
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commity tymczasowe (parallelCommits: false)
Kopiuj
Osadź
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commity równoległe (parallelCommits: true)
Kopiuj
Osadź
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Motyw
Mermaid obsługuje szereg niestandardowych motywów, których możesz użyć, aby znaleźć odpowiedni dla siebie motyw. Uwaga: możesz faktycznie nadpisać zmienne istniejącego motywu, aby utworzyć własny niestandardowy motyw.
Oto różne opcje niestandardowych motywów:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Aby zmienić motyw, możesz użyć składni initialize.
Motyw podstawowy
Kopiuj
Osadź
---
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
Motyw leśny
Kopiuj
Osadź
---
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
Motyw domyślny
Kopiuj
Osadź
---
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
Motyw ciemny
Kopiuj
Osadź
---
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
Motyw neutralny
Kopiuj
Osadź
---
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
Dostosowanie za pomocą zmiennych motywu
Mermaid pozwala dostosować diagram za pomocą zmiennych motywu, które kontrolują wygląd i styl poszczególnych elementów diagramu.
Aby to zrozumieć, weźmy jako przykład motyw default; domyślne wartości zmiennych motywu są automatycznie pobierane z motywu.
Użyj motywu default, aby ustawić kolor gałęzi:
Kopiuj
Osadź
---
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 obsługuje zmienne motywu służące do nadpisywania wartości domyślnych, obejmujące maksymalnie 8 gałęzi, tj. możesz ustawić kolory maksymalnie 8 gałęzi za pomocą zmiennych motywu. Po przekroczeniu 8 gałęzi zmienne motywu będą powtarzane w sposób cykliczny, tj. dziewiąta gałąź będzie używać stylu pierwszej gałęzi.
Niestandardowy kolor gałęzi
Możesz dostosować kolory gałęzi za pomocą zmiennych motywu git0 do git7. Mermaid pozwala ustawić kolory maksymalnie 8 gałęzi, gdzie zmienna git0 kontroluje kolor pierwszej gałęzi, git1 kontroluje kolor drugiej gałęzi, i tak dalej.
Uwaga: domyślne wartości tych zmiennych motywu są pobierane z wybranego motywu. Jeśli chcesz nadpisać wartości domyślne, możesz użyć składni initialize, aby dodać niestandardowe wartości zmiennych motywu.
Przykład:
Teraz nadpiszmy domyślne wartości zmiennych git0 do git3:
Kopiuj
Osadź
---
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
Niestandardowy kolor etykiet gałęzi
Możesz dostosować kolory etykiet gałęzi za pomocą zmiennych motywu gitBranchLabel0 do gitBranchLabel7. Mermaid pozwala ustawić kolory maksymalnie 8 gałęzi, gdzie zmienna gitBranchLabel0 kontroluje kolor etykiety pierwszej gałęzi, zmienna gitBranchLabel1 kontroluje kolor etykiety drugiej gałęzi, i tak dalej.
Zobaczmy, jak użyć motywu default, aby ustawić kolor etykiet gałęzi:
Teraz nadpiszmy domyślne wartości zmiennych gitBranchLabel0 do gitBranchLabel2:
Kopiuj
Osadź
---
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
Tutaj widać, że kolory i style branch8 i branch9 są pobierane odpowiednio z gałęzi o indeksie 0 (main) i 1 (branch1).
Niestandardowy kolor commitów
Możesz użyć zmiennych motywu commitLabelColor i commitLabelBackground, aby odpowiednio dostosować kolor i kolor tła etykiety commita.
Przykład: teraz nadpiszmy domyślne wartości zmiennych commitLabelColor do commitLabelBackground:
Kopiuj
Osadź
---
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
Możesz użyć zmiennej motywu commitLabelFontSize, aby dostosować rozmiar czcionki etykiety commita.
Przykład: teraz nadpiszmy domyślną wartość zmiennej commitLabelFontSize:
Kopiuj
Osadź
---
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
Niestandardowy rozmiar czcionki etykiety
Możesz użyć zmiennej motywu tagLabelFontSize, aby dostosować rozmiar czcionki etykiety.
Przykład: teraz nadpiszmy domyślną wartość zmiennej tagLabelFontSize:
Kopiuj
Osadź
---
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
Niestandardowy kolor etykiety
Możesz użyć zmiennych motywu tagLabelColor, tagLabelBackground i tagLabelBorder, aby dostosować etykiety, zmieniając odpowiednio kolor tekstu etykiety, kolor tła etykiety i ramkę etykiety.
Przykład: teraz nadpiszmy domyślne wartości zmiennych tagLabelColor, tagLabelBackground i tagLabelBorder:
Kopiuj
Osadź
---
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
Niestandardowy kolor wyróżnionych commitów
Możesz użyć zmiennych motywu gitInv0 do gitInv7, aby dostosować kolor wyróżnionych commitów w zależności od gałęzi, w której się znajdują. Mermaid pozwala ustawić kolor wyróżnionych commitów dla maksymalnie 8 gałęzi, gdzie zmienna gitInv0 kontroluje kolor wyróżnionego commita pierwszej gałęzi, zmienna gitInv1 kontroluje kolor wyróżnionego commita drugiej gałęzi, i tak dalej.
Teraz nadpiszmy domyślne wartości zmiennych git0 do git3:
Kopiuj
Osadź
---
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
