Git graph
Ang Git graph ay isang visual na representasyon ng git commit at git operation sa iba't ibang branch.
Ang Git graph ay partikular na kapaki-pakinabang sa mga developer at operations team, maaari itong gamitin upang ibahagi ang kanilang Git branching strategy.
Maaaring mag-render ang Mermaid ng Git graph
Kopyahin
Embed
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Sinusuportahan ng Mermaid ang mga basic na git operation, tulad ng:
- commit : kumakatawan sa bagong commit sa kasalukuyang branch.
- branch : lumilikha at lumilipat sa bagong branch, habang itinatakda ito bilang kasalukuyang branch.
- checkout : lumilipat sa umiiral nang branch at itinatakda ito bilang kasalukuyang branch.
- merge : pinagsasama ang umiiral na branch sa kasalukuyang branch.
Sa tulong ng mga Git operation na ito, napakadali mong makakapagguhit ng Git graph sa Mermaid. Ang pangalan ng entity ay karaniwang nagsisimula sa malaking titik, bagaman walang kinikilalang standard para dito, at hindi rin ito mandatory sa Mermaid.
Tandaan: ang checkout at switch ay maaaring gamitin nang palitan.
Syntax
Ang Mermaid syntax ng Git graph ay napakadiretso at simple. Gumagamit ito ng declarative na paraan, ang bawat commit ay iginuguhit sa timeline ng Git graph ayon sa pagkakasunod-sunod ng paglitaw nito sa code. Karaniwan, sinusunod nito ang insertion order ng bawat command.
Una, gamitin ang gitGraph syntax upang ideklara ang uri ng iyong chart. Ang gitGraph syntax ay nagsasabi sa Mermaid na gusto mong gumuhit ng Git graph, at iparse ang chart code nang naaayon.
Ang bawat Git graph ay ini-initialize gamit ang main branch. Maliban kung gagawa ka ng ibang branch, bilang default ang commit ay napupunta sa main branch. Ito ay hinihimok ng paraan ng paggana ng git, sa simula ay palagi kang nagsisimula sa main branch. Bilang default, ang main branch ay itinatakda bilang kasalukuyang branch.
Maaari mong gamitin ang commit syntax upang magrehistro ng isang commit sa kasalukuyang branch, tingnan natin kung paano ito gumagana:
Isang simpleng git graph, na nagpapakita ng tatlong commit ng default branch na main:
Kopyahin
Embed
gitGraph
commit
commit
commit
Kung titingnan mong mabuti ang naunang halimbawa, makikita mo ang default branch na main at tatlong commit. Pansinin din, bilang default, ang bawat commit ay binibigyan ng natatangi at random na ID.
Magdagdag ng custom na commit ID
Para sa isang commit, maaari mong tukuyin ang custom ID gamit ang id attribute kapag nagdedeklara, pagkatapos ay magdagdag ng colon :, at markahan ang custom value sa loob ng double quotes.
Tingnan natin sa tulong ng diagram sa ibaba kung paano ito gumagana:
Kopyahin
Embed
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Baguhin ang uri ng commit
Sa Mermaid, may tatlong uri ang commit, bahagyang naiiba ang paraan ng kanilang rendering sa chart. Ang mga uri na ito ay:
- NORMAL : default na uri ng commit, kinakatawan ng solidong bilog
- REVERSE : binibigyang-diin na ang commit ay reverse commit, kinakatawan ng crossed na solidong bilog.
- HIGHLIGHT : ini-highlight ang partikular na commit, kinakatawan ng solidong rectangle.
Para sa isang commit, maaari mong tukuyin ang uri nito gamit ang type attribute kapag nagdedeklara, pagkatapos ay sundutin ng colon : at ng gustong type option na tinalakay sa itaas. Halimbawa: commit type:
Tandaan: kung walang tinukoy na uri ng commit, ang default na pinipili ay NORMAL
Tingnan natin sa pamamagitan ng diagram sa ibaba kung paano nangyayari ang iba't ibang uri ng commit na ito:
Kopyahin
Embed
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Sa halimbawang ito, tinukoy namin ang iba't ibang uri para sa bawat commit. Bukod dito, tingnan kung paano namin isinama ang parehong id at type kapag nagdedeklara ng commit.
Magdagdag ng tag
Para sa isang commit, maaari mong palamutian ito ng tag, katulad ng konsepto ng tag o release version sa git world. Maaari mong ilakip ang custom na tag gamit ang tag attribute kapag nagdedeklara ng commit, na sinusundan ng colon :, at markahan ang custom value sa loob ng double quotes.
Kopyahin
Embed
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
Sa halimbawang ito, nagtakda kami ng custom na tag para sa commit.
Gumawa ng bagong branch
Sa Mermaid, upang gumawa ng bagong branch, maaari mong gamitin ang branch syntax. Kailangan mo ring magbigay ng pangalan ng bagong branch. Ang pangalan ay dapat natatangi, hindi maaaring pangalan ng umiiral na branch.
Kapag binasa ng Mermaid ang branch syntax, gagawa ito ng bagong branch at itatakda ito bilang kasalukuyang branch. Katumbas ito ng paggawa ng bagong branch sa Git graph at paglipat sa branch na iyon.
Kopyahin
Embed
gitGraph
commit
commit
branch develop
commit
commit
commit
Sa halimbawang ito, makikita kung paano tayo nagsimula sa default na main branch, at nag-push ng dalawang commit dito. Pagkatapos ay gumawa kami ng develop branch, at ang lahat ng kasunod na commit ay inilagay sa develop branch, dahil ito ang naging kasalukuyang branch.
I-checkout ang umiiral na branch
Sa Mermaid, upang lumipat sa umiiral na branch, maaari mong gamitin ang checkout syntax, kailangan mo ring magbigay ng pangalan ng umiiral na branch. Kung hindi mahanap ang branch na may tinukoy na pangalan, magdudulot ito ng console error. Halimbawa ng paggamit: checkout develop
Kapag binasa ng Mermaid ang checkout syntax, hahanapin nito ang branch na may tinukoy na pangalan at itatakda ito bilang kasalukuyang branch. Katumbas ito ng pag-checkout ng branch sa Git.
Kopyahin
Embed
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Sa halimbawang ito, nagsimula muna kami sa default na main branch, at nag-push ng dalawang commit dito. Pagkatapos ay gumawa kami ng develop branch, at ang lahat ng tatlong commit ay inilagay sa develop branch, dahil ito ang naging kasalukuyang branch. Pagkatapos, ginamit namin ang checkout syntax upang itakda ang kasalukuyang branch sa main, at ang lahat ng kasunod na commit ay naitala sa main branch.
Pagsamahin ang dalawang branch
Sa Mermaid, upang pagsamahin o kumonekta sa umiiral na branch, kailangan mong gamitin ang merge syntax. Kasabay nito, kailangan mong magbigay ng pangalan ng umiiral na branch na pagsasamahin. Kung hindi mahanap ang branch na may tinukoy na pangalan, magpapakita ng error sa console. Bukod dito, maaari ka lamang magsama ng dalawang independente na branch, hindi mo maaaring pagsamahin ang isang branch sa sarili nito.
Halimbawa ng syntax: merge develop
Kapag binasa ng Mermaid ang merge syntax, hahanapin nito ang tinukoy na branch at ang huling commit nito, at pagsasamahin ito sa huling commit ng kasalukuyang branch. Kinakatawan ng solidong double circle.
Ang sumusunod ay halimbawa ng pagsasama ng dalawang branch:
Kopyahin
Embed
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Sa halimbawang ito, unang nagsimula sa main branch, at nag-push ng dalawang commit dito. Pagkatapos ay gumawa kami ng develop branch, at nag-push ng tatlong commit sa develop branch. Pagkatapos, ginamit namin ang checkout syntax upang itakda ang kasalukuyang branch sa main, at ang lahat ng kasunod na commit ay para sa main branch. Sa wakas, pinagsama namin ang develop branch sa main branch, na nagbunga ng merge commit. Dahil ang kasalukuyang branch ay main pa rin, ang huling dalawang commit ay naitala sa branch na iyon.
Maaari ka ring magdagdag ng katulad na attribute para sa iyong merge:
- Ang id ay nag-o-override sa default ID gamit ang custom ID
- Ang tag ay nagdadagdag ng custom na tag sa merge commit
- Ang type ay nag-o-override sa default na uri ng merge commit. Maaari mong gamitin ang ibang uri ng commit na nabanggit sa itaas.
Kopyahin
Embed
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"
Piliing pagsamahin ang commit mula sa ibang branch
Sinusuportahan ng Mermaid ang pagpili ng isang commit mula sa ibang branch patungo sa kasalukuyang branch. Maaari mo ring gamitin ang cherry-pick syntax upang pumili ng commit mula sa ibang branch.
Upang gamitin ang cherry-pick syntax, dapat mong tukuyin ang id gamit ang id attribute, pagkatapos ay isulat ang gustong commit id pagkatapos ng colon :, at ilagay ito sa loob ng double quotes. Halimbawa:
Narito ang ilang mahalagang panuntunang dapat tandaan:
- Kailangan mong magbigay ng id upang pumili ng umiiral na commit. Kung ang ibinigay na commit ID ay hindi umiiral, magdudulot ito ng error. Para dito, gamitin ang format na commit id:$value upang ideklara ang commit.
- Ang ibinigay na commit ay hindi dapat umiiral sa kasalukuyang branch, ang piniling commit ay dapat palaging nagmumula sa ibang branch kaysa sa kasalukuyang branch.
- Ang kasalukuyang branch ay dapat may hindi bababa sa isang commit, bago maisagawa ang cherry-pick, kung hindi ay magdudulot ito ng error.
- Kapag pumipili ng merge commit, dapat ibigay ang parent commit ID. Kung aalisin ang parent attribute o magbigay ng hindi valid na parent commit ID, magdudulot ito ng error.
- Ang tinukoy na parent commit ay dapat na direktang parent ng merge commit na pinipili.
Kopyahin
Embed
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"
Partikular na configuration option
Sa Mermaid Git graph, maaari mong i-configure ang sumusunod na option:
- showBranches : boolean value, default ay true. Kung itatakda sa false, hindi ipapakita ang branch.
- showCommitLabel : boolean value, default ay true. Kung itatakda sa false, hindi ipapakita ang commit label.
- mainBranchName : string, default ay main. Ang pangalan ng default na branch.
- mainBranchOrder : ang posisyon ng main branch sa listahan ng branch. Default ay 0, ibig sabihin, bilang default, ang main branch ay nasa ika-1 na posisyon.
- parallelCommits : boolean value, default ay false. Kung itatakda sa true, ang commit na kasabay ng parent ay ipapakita sa parehong level.
Itago ang pangalan ng branch at linya ng koneksyon
Minsan maaaring gusto mong itago ang pangalan ng branch at linya ng koneksyon. Maaari mong gamitin ang showBranches syntax upang gawin ito. Bilang default, ang value nito ay true, maaari mong gamitin ang directive upang itakda ito sa false.
Kopyahin
Embed
---
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 ng commit label: naka-rotate o horizontal
Sinusuportahan ng Mermaid ang dalawang uri ng layout ng commit label. Ang default na layout ay naka-rotate, ibig sabihin, ang label ay inilalagay sa ibaba ng commit circle, naka-rotate ng 45 degrees para sa mas mahusay na readability. Partikular itong kapaki-pakinabang para sa commit na may mahabang label.
Ang isa pang uri ay horizontal, ibig sabihin, ang label ay inilalagay sa ibaba ng commit circle at naka-center nang horizontal, hindi naka-rotate. Partikular itong kapaki-pakinabang para sa commit na may maikling label.
Maaari mong baguhin ang layout ng commit label sa pamamagitan ng paggamit ng rotateCommitLabel syntax sa directive. Default ito sa true, na nagsasaad na ang commit label ay naka-rotate.
Halimbawa ng paggamit: naka-rotate na commit label
Kopyahin
Embed
---
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
Halimbawa ng paggamit: horizontal na commit label
Kopyahin
Embed
---
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
Itago ang commit label
Minsan maaaring gusto mong itago ang commit label. Maaari mong gamitin ang showCommitLabel syntax upang gawin ito. Bilang default, ang value nito ay true, maaari mong gamitin ang directive upang itakda ito sa false.
Kopyahin
Embed
---
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
I-customize ang pangalan ng main branch
Minsan maaaring gusto mong i-customize ang pangalan ng main branch. Maaari mong gamitin ang mainBranchName syntax upang gawin ito. Bilang default, ang value nito ay main, maaari mong gamitin ang directive upang itakda ito sa anumang string.
Kopyahin
Embed
---
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"
Tingnan ang virtual na metro line chart na ginawa gamit ang Mermaid. Dito, binago namin ang default na pangalan ng main branch sa MetroLine1.
I-customize ang order ng branch
Sa Mermaid, bilang default, ang mga branch ay ipinapakita ayon sa pagkakasunod-sunod ng kanilang pagkakatukoy o paglitaw sa graph code.
Minsan maaaring gusto mong i-customize ang order ng branch. Maaari mo itong gawin sa pamamagitan ng paggamit ng order syntax sa tabi ng branch definition, maaari mong itakda ito sa positibong numero.
Sinusunod ng Mermaid ang priority order na ibinigay ng order syntax.
- Ang main branch ay palaging unang ipinapakita, dahil ang default na order value nito ay 0. (Maliban kung binago ng mainBranchOrder syntax sa configuration ang order nito at inalis ito sa 0)
- Susunod, ang lahat ng branch na walang order ay ipapakita sa pagkakasunod-sunod ng kanilang paglitaw sa graph code.
- Susunod, ang lahat ng branch na may order ay ipapakita sa pagkakasunod-sunod ng kanilang order value.
Upang lubos na kontrolin ang order ng lahat ng branch, dapat tukuyin ang order para sa lahat ng branch.
Kopyahin
Embed
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Sa diagram sa itaas, ang lahat ng branch ay sumusunod sa tinukoy na order.
Kopyahin
Embed
---
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
Sa diagram sa itaas, ang lahat ng branch na walang tinukoy na order ay iginuhit ayon sa tinukoy na order. Pagkatapos, ang test4 branch ay iginuhit, dahil ang order nito ay 1. Sumunod, ang main branch ay iginuhit, dahil ang order nito ay 2. Sa wakas, ang test1 branch ay iginuhit, dahil ang order nito ay 3.
Tandaan: dahil ini-override namin ang mainBranchOrder sa 2, ang main branch ay hindi iginuhit sa simula, kundi ipapakita ayon sa order.
Dito, binago namin ang default na pangalan ng main branch sa MetroLine1.
Direksyon
Sinusuportahan ng Mermaid ang tatlong direksyon: mula kaliwa pakanan (default), mula itaas pababa, at mula ibaba pataas.
Mula kaliwa pakanan (default, LR:)
Sa Mermaid, ang default na direksyon ay tumatakbo mula kaliwa pakanan, ang mga branch ay naka-stack sa ibabaw ng isa't isa.
Gayunpaman, maaari mong tahasang itakda ang value na ito gamit ang LR: pagkatapos ng gitGraph syntax.
Kopyahin
Embed
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Mula itaas pababa (TB:)
Sa direksyong mula itaas pababa, ang mga commit ay tumatakbo mula tuktok hanggang ibaba ng chart, ang mga branch ay nakaayos nang magkatabi.
Upang i-orient ang graph sa paraang ito, kailangan mong magdagdag ng TB: pagkatapos ng gitGraph syntax.
Kopyahin
Embed
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Mula ibaba pataas (BT:)
Sa direksyong mula ibaba pataas, ang mga commit ay tumatakbo mula ibaba hanggang tuktok ng chart, ang mga branch ay nakaayos nang magkatabi.
Upang i-orient ang graph sa paraang ito, kailangan mong magdagdag ng BT: pagkatapos ng gitGraph syntax.
Kopyahin
Embed
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Parallel commit (parallelCommits: false)
Kopyahin
Embed
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Parallel commit (parallelCommits: true)
Kopyahin
Embed
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Sinusuportahan ng Mermaid ang serye ng custom na tema, maaari mong gamitin ang mga ito upang mahanap ang temang nababagay sa iyo. Tandaan: maaari mo talagang i-override ang mga variable ng umiiral na tema upang gumawa ng sarili mong custom na tema.
Ang sumusunod ay ang iba't ibang custom na tema option:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Upang baguhin ang tema, maaari mong gamitin ang initialize syntax.
Base na tema
Kopyahin
Embed
---
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
Forest na tema
Kopyahin
Embed
---
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
Default na tema
Kopyahin
Embed
---
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
Dark na tema
Kopyahin
Embed
---
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
Neutral na tema
Kopyahin
Embed
---
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
Pag-customize gamit ang tema variable
Pinapayagan ka ng Mermaid na i-customize ang iyong chart gamit ang tema variable, kinokontrol ng mga variable na ito ang hitsura at estilo ng iba't ibang elemento ng chart.
Para sa pag-unawa, kunin nating halimbawa ang temang default, ang default na halaga ng tema variable ay awtomatikong kinukuha mula sa tema.
Gamitin ang default na tema upang itakda ang kulay ng branch:
Kopyahin
Embed
---
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
Sinusuportahan ng Mermaid ang tema variable, upang i-override ang default na halaga, hanggang 8 branch ang maaaring ma-override, ibig sabihin, maaari mong gamitin ang tema variable upang itakda ang kulay ng hanggang 8 branch. Pagkatapos ng higit sa 8 branch, ang tema variable ay paulit-ulit na gagamitin nang cyclical, ibig sabihin, ang ika-9 na branch ay gagamit ng estilo ng unang branch.
I-customize ang kulay ng branch
Maaari mong gamitin ang git0 hanggang git7 tema variable upang i-customize ang kulay ng branch. Pinapayagan ka ng Mermaid na magtakda ng kulay ng hanggang 8 branch, kung saan kinokontrol ng git0 variable ang kulay ng unang branch, kinokontrol ng git1 ang kulay ng ikalawang branch, at iba pa.
Tandaan: ang default na halaga ng mga tema variable na ito ay kinuha mula sa piniling tema. Kung gusto mong i-override ang default, maaari mong gamitin ang initialize syntax upang magdagdag ng custom na tema variable value.
Halimbawa:
Ngayon, i-override natin ang default na halaga ng git0 hanggang git3 variable:
Kopyahin
Embed
---
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
I-customize ang kulay ng label ng branch
Maaari mong gamitin ang gitBranchLabel0 hanggang gitBranchLabel7 tema variable upang i-customize ang kulay ng label ng branch. Pinapayagan ka ng Mermaid na magtakda ng kulay ng hanggang 8 branch, kung saan kinokontrol ng gitBranchLabel0 variable ang kulay ng label ng unang branch, kinokontrol ng gitBranchLabel1 variable ang kulay ng label ng ikalawang branch, at iba pa.
Tingnan natin kung paano gamitin ang default na tema upang itakda ang kulay ng label ng branch:
Ngayon, i-override natin ang default na halaga ng gitBranchLabel0 hanggang gitBranchLabel2 variable:
Kopyahin
Embed
---
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
Dito, makikita mo na ang kulay at estilo ng branch8 at branch9 ay kinuha mula sa branch sa index na 0 (main) at 1 (branch1) ayon sa pagkakabanggit.
I-customize ang kulay ng commit
Maaari mong gamitin ang commitLabelColor at commitLabelBackground tema variable upang i-customize ang kulay at background color ng commit label ayon sa pagkakabanggit.
Halimbawa: ngayon, i-override natin ang default na halaga ng commitLabelColor hanggang commitLabelBackground variable:
Kopyahin
Embed
---
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
Maaari mong gamitin ang commitLabelFontSize tema variable upang i-customize ang font size ng commit label.
Halimbawa: ngayon, i-override natin ang default na halaga ng commitLabelFontSize variable:
Kopyahin
Embed
---
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
I-customize ang font size ng label
Maaari mong gamitin ang tagLabelFontSize tema variable upang i-customize ang font size ng label.
Halimbawa: ngayon, i-override natin ang default na halaga ng tagLabelFontSize variable:
Kopyahin
Embed
---
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
I-customize ang kulay ng label
Maaari mong gamitin ang tagLabelColor, tagLabelBackground, at tagLabelBorder tema variable upang i-customize ang label, babaguhin ang kulay ng teksto ng label, background color ng label, at border ng label ayon sa pagkakabanggit.
Halimbawa: ngayon, i-override natin ang default na halaga ng tagLabelColor, tagLabelBackground, at tagLabelBorder variable:
Kopyahin
Embed
---
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
I-customize ang kulay ng highlight ng commit
Maaari mong gamitin ang gitInv0 hanggang gitInv7 tema variable upang i-customize ang kulay ng highlight commit batay sa branch kung saan ito naroroon. Pinapayagan ka ng Mermaid na magtakda ng kulay ng partikular na highlight commit para sa hanggang 8 branch, kung saan kinokontrol ng gitInv0 variable ang kulay ng highlight commit ng unang branch, kinokontrol ng gitInv1 variable ang kulay ng highlight commit ng ikalawang branch, at iba pa.
Ngayon, i-override natin ang default na halaga ng git0 hanggang git3 variable:
Kopyahin
Embed
---
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
