Rajah Git
Gambar rajah Git ialah perwakilan visual bagi commit git dan operasi git pada cawangan berbeza.
Gambar rajah Git sangat membantu untuk pembangun dan pasukan operasi, boleh digunakan untuk berkongsi strategi cawangan Git mereka.
Mermaid boleh memaparkan gambar rajah Git
Salin
Benamkan
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid menyokong operasi git asas, contohnya:
- commit: mewakili satu commit baharu pada cawangan semasa.
- branch: mencipta dan bertukar ke cawangan baharu, sambil menetapkannya sebagai cawangan semasa.
- checkout: bertukar ke cawangan yang sedia ada dan menetapkannya sebagai cawangan semasa.
- merge: menggabungkan cawangan sedia ada ke cawangan semasa.
Dengan bantuan operasi Git ini, anda boleh melukis gambar rajah Git dalam Mermaid dengan sangat mudah dan pantas. Nama entiti biasanya bermula dengan huruf besar, walaupun tiada standard yang diiktiraf untuk ini, dan ia juga tidak wajib dalam Mermaid.
Nota: checkout dan switch boleh digunakan secara bergantian.
Sintaks
Sintaks Mermaid bagi gambar rajah Git sangat langsung dan mudah. Ia menggunakan pendekatan deklaratif; setiap commit dilukis pada garis masa gambar rajah Git mengikut susunan kemunculannya dalam kod. Pada asasnya, ia mengikuti susunan sisipan setiap arahan.
Pertama, isytiharkan jenis carta anda menggunakan sintaks gitGraph. Sintaks gitGraph memberitahu Mermaid bahawa anda ingin melukis gambar rajah Git, dan menghuraikan kod carta dengan sepadan.
Setiap gambar rajah Git dimulakan dengan cawangan main. Melainkan anda mencipta cawangan yang berbeza, secara lalai commit akan masuk ke cawangan utama. Ini didorong oleh cara git berfungsi; pada permulaan anda sentiasa bermula dari cawangan utama. Secara lalai, cawangan main ditetapkan sebagai cawangan semasa.
Anda boleh menggunakan sintaks commit untuk mendaftarkan satu commit pada cawangan semasa; mari kita lihat cara ia berfungsi:
Satu gambar rajah git yang mudah, memaparkan tiga commit pada cawangan lalai main:
Salin
Benamkan
gitGraph
commit
commit
commit
Jika anda memerhati contoh sebelumnya dengan teliti, anda boleh melihat cawangan lalai main serta tiga commit. Sila ambil perhatian juga bahawa secara lalai, setiap commit diberikan ID yang unik dan rawak.
Tambah ID commit tersuai
Bagi sesuatu commit, anda boleh menentukan ID tersuai dengan sifat id semasa mengisytiharkannya, kemudian tambah titik bertindih :, dan tanda nilai tersuai dalam tanda petik berganda.
Mari kita lihat bagaimana ia berfungsi melalui rajah di bawah:
Salin
Benamkan
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Ubah jenis commit
Dalam Mermaid, commit mempunyai tiga jenis, yang dipaparkan secara sedikit berbeza dalam carta. Jenis-jenis itu ialah:
- NORMAL: jenis commit lalai, diwakili oleh bulatan pejal
- REVERSE: menekankan bahawa commit ialah commit terbalik, diwakili oleh bulatan pejal bersilang.
- HIGHLIGHT: menyorot commit tertentu, diwakili oleh segi empat tepat pejal.
Bagi commit yang diberikan, anda boleh menentukan jenisnya menggunakan sifat type semasa mengisytiharkan, diikuti dengan titik bertindih : dan pilihan jenis yang dikehendaki seperti yang dibincangkan di atas. Contohnya: commit type:
Nota: jika jenis commit tidak ditentukan, NORMAL dipilih secara lalai
Mari kita lihat melalui rajah di bawah bagaimana jenis commit yang berbeza ini dijalankan:
Salin
Benamkan
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Dalam contoh ini, kami menentukan jenis yang berbeza untuk setiap commit. Selain itu, lihat bagaimana kami memasukkan kedua-dua id dan type semasa mengisytiharkan commit.
Tambah tag
Bagi commit yang diberikan, anda boleh menghiasinya dengan tag, serupa dengan konsep tag atau versi keluaran dalam dunia git. Anda boleh melampirkan tag tersuai dengan sifat tag semasa mengisytiharkan commit, diikuti dengan titik bertindih :, dan tanda nilai tersuai dalam tanda petik berganda.
Salin
Benamkan
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
Dalam contoh ini, kami menetapkan tag tersuai untuk commit.
Cipta cawangan baharu
Dalam Mermaid, untuk mencipta cawangan baharu, anda boleh menggunakan sintaks branch. Anda juga perlu memberikan nama cawangan baharu. Nama mesti unik, dan tidak boleh menjadi nama cawangan yang sedia ada.
Apabila Mermaid membaca sintaks branch, ia akan mencipta cawangan baharu dan menetapkannya sebagai cawangan semasa. Ia bersamaan dengan mencipta cawangan baharu dalam gambar rajah Git dan bertukar ke cawangan tersebut.
Salin
Benamkan
gitGraph
commit
commit
branch develop
commit
commit
commit
Dalam contoh ini, dapat dilihat bagaimana kami bermula dari cawangan lalai main, dan menolak dua commit padanya. Kemudian kami mencipta cawangan develop, dan semua commit selepas itu diletakkan pada cawangan develop, kerana ia menjadi cawangan semasa.
Checkout cawangan sedia ada
Dalam Mermaid, untuk bertukar ke cawangan sedia ada, sintaks checkout boleh digunakan, dan pada masa yang sama anda perlu memberikan nama cawangan sedia ada. Jika cawangan dengan nama yang ditentukan tidak ditemui, ia akan menyebabkan ralat konsol. Contoh penggunaan: checkout develop
Apabila Mermaid membaca sintaks checkout, ia akan menemui cawangan dengan nama yang ditentukan dan menetapkannya sebagai cawangan semasa. Ini bersamaan dengan checkout cawangan dalam Git.
Salin
Benamkan
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Dalam contoh ini, kami mula-mula bermula dari cawangan lalai main, dan menolak dua commit padanya. Kemudian kami mencipta cawangan develop; selepas itu ketiga-tiga commit diletakkan pada cawangan develop, kerana ia menjadi cawangan semasa. Selepas itu, kami menggunakan sintaks checkout untuk menetapkan cawangan semasa kepada main, dan semua commit seterusnya akan direkodkan pada cawangan main.
Gabungkan dua cawangan
Dalam Mermaid, untuk menggabungkan atau menyambung ke cawangan sedia ada, anda perlu menggunakan sintaks merge. Pada masa yang sama, anda juga perlu memberikan nama cawangan sedia ada yang hendak digabungkan. Jika cawangan dengan nama yang ditentukan tidak ditemui, ralat akan dipaparkan pada konsol. Selain itu, anda hanya boleh menggabungkan dua cawangan yang berasingan, dan tidak boleh menggabungkan sesuatu cawangan dengan dirinya sendiri.
Contoh sintaks: merge develop
Apabila Mermaid membaca sintaks merge, ia akan menemui cawangan yang ditentukan serta commit terakhirnya, dan menggabungkannya dengan commit terakhir cawangan semasa. Diwakili oleh bulatan berganda pejal.
Berikut ialah contoh menggabungkan dua cawangan:
Salin
Benamkan
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dalam contoh ini, mula-mula bermula dari cawangan main, dan menolak dua commit padanya. Kemudian kami mencipta cawangan develop, dan menolak tiga commit pada cawangan develop. Selepas itu, kami menggunakan sintaks checkout untuk menetapkan cawangan semasa kepada main, dan semua commit seterusnya dilakukan untuk cawangan main. Akhir sekali, kami menggabungkan cawangan develop ke cawangan main, sekali gus menghasilkan commit gabungan. Oleh kerana pada ketika ini cawangan semasa masih main, dua commit terakhir akan direkodkan pada cawangan tersebut.
Anda juga boleh menambah sifat yang serupa pada gabungan anda:
- id mengatasi ID lalai dengan ID tersuai
- tag menambah tag tersuai pada commit gabungan
- type mengatasi jenis lalai commit gabungan. Anda boleh menggunakan jenis commit lain yang disebutkan sebelum ini.
Salin
Benamkan
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"
Gabungkan commit secara terpilih daripada cawangan lain
Mermaid menyokong pemilihan satu commit daripada cawangan lain ke cawangan semasa. Anda juga boleh menggunakan sintaks cherry-pick untuk memilih commit daripada cawangan lain.
Untuk menggunakan sintaks cherry-pick, anda mesti menentukan id dengan sifat id, kemudian tulis id commit yang anda mahu selepas titik bertindih :, dan apitkannya dengan tanda petik berganda. Contohnya:
Berikut ialah beberapa peraturan penting yang perlu diberi perhatian:
- Anda perlu memberikan id untuk memilih commit yang sedia ada. Jika ID commit yang diberikan tidak wujud, ia akan menyebabkan ralat. Untuk ini, sila gunakan format commit id:$value untuk mengisytiharkan commit.
- Commit yang diberikan tidak boleh wujud pada cawangan semasa; commit yang dipilih mesti sentiasa datang daripada cawangan yang berbeza daripada cawangan semasa.
- Cawangan semasa mesti mempunyai sekurang-kurangnya satu commit sebelum cherry-pick boleh dilakukan, jika tidak ia akan menyebabkan ralat.
- Semasa memilih commit gabungan, ID commit induk mesti diberikan. Jika sifat induk ditinggalkan atau ID commit induk yang tidak sah diberikan, ralat akan berlaku.
- Commit induk yang ditentukan mesti menjadi induk langsung bagi commit gabungan yang sedang dipilih.
Salin
Benamkan
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"
Pilihan konfigurasi tertentu
Dalam gambar rajah Git Mermaid, anda boleh mengkonfigurasi pilihan berikut:
- showBranches: nilai boolean, lalai true. Jika ditetapkan kepada false, cawangan tidak dipaparkan.
- showCommitLabel: nilai boolean, lalai true. Jika ditetapkan kepada false, label commit tidak dipaparkan.
- mainBranchName: rentetan, lalai main. Nama cawangan lalai.
- mainBranchOrder: kedudukan cawangan utama dalam senarai cawangan. Lalai 0, ini bermaksud secara lalai, cawangan main berada di kedudukan pertama.
- parallelCommits: nilai boolean, lalai false. Jika ditetapkan kepada true, commit yang berjarak daripada induk akan dipaparkan pada aras yang sama.
Sembunyikan nama cawangan dan garis sambungan
Kadangkala anda mungkin ingin menyembunyikan nama cawangan dan garis sambungan. Anda boleh menggunakan sintaks showBranches untuk melakukan ini. Secara lalai nilainya ialah true; anda boleh menggunakan arahan untuk menetapkannya kepada false.
Salin
Benamkan
---
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
Susun atur label commit: diputar atau mendatar
Mermaid menyokong dua jenis susun atur label commit. Susun atur lalai ialah diputar, ini bermaksud label diletakkan di bawah bulatan commit, diputar 45 darjah untuk kebolehbacaan yang lebih baik. Ini sangat berguna untuk commit dengan label yang panjang.
Jenis yang lain ialah mendatar, ini bermaksud label diletakkan di bawah bulatan commit dan dipaparkan di tengah secara mendatar, tidak diputar. Ini sangat berguna untuk commit dengan label yang pendek.
Anda boleh menukar susun atur label commit dengan menggunakan sintaks rotateCommitLabel dalam arahan. Ia lalai true, ini bermaksud label commit akan diputar.
Contoh penggunaan: label commit diputar
Salin
Benamkan
---
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
Contoh penggunaan: label commit mendatar
Salin
Benamkan
---
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
Sembunyikan label commit
Kadangkala anda mungkin ingin menyembunyikan label commit. Anda boleh menggunakan sintaks showCommitLabel untuk melakukan ini. Secara lalai nilainya ialah true; anda boleh menggunakan arahan untuk menetapkannya kepada false.
Salin
Benamkan
---
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
Sesuaikan nama cawangan utama
Kadangkala anda mungkin ingin menyesuaikan nama cawangan utama. Anda boleh menggunakan sintaks mainBranchName untuk melakukan ini. Secara lalai nilainya ialah main; anda boleh menggunakan arahan untuk menetapkannya kepada sebarang rentetan.
Salin
Benamkan
---
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"
Lihat gambar rajah laluan metro maya yang dicipta menggunakan Mermaid. Di sini, kami menukar nama cawangan utama lalai kepada MetroLine1.
Sesuaikan susunan cawangan
Dalam Mermaid, secara lalai, cawangan dipaparkan mengikut susunan ia ditakrifkan atau muncul dalam kod carta.
Kadangkala anda mungkin ingin menyesuaikan susunan cawangan. Anda boleh melakukannya dengan menggunakan sintaks order di sebelah definisi cawangan; anda boleh menetapkannya kepada nombor positif.
Mermaid mengikuti keutamaan yang diberikan oleh sintaks order.
- Cawangan utama sentiasa dipaparkan dahulu, kerana nilai susunan lalainya ialah 0. (Melainkan susunannya diubah daripada 0 melalui sintaks mainBranchOrder dalam konfigurasi)
- Seterusnya, semua cawangan yang tiada order akan dipaparkan mengikut susunan kemunculannya dalam kod carta.
- Seterusnya, semua cawangan yang mempunyai order akan dipaparkan mengikut susunan nilai ordernya.
Untuk mengawal sepenuhnya susunan semua cawangan, order mesti ditakrifkan untuk semua cawangan.
Salin
Benamkan
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Dalam rajah di atas, semua cawangan mengikuti susunan yang ditakrifkan.
Salin
Benamkan
---
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
Dalam rajah di atas, semua cawangan yang tiada susunan yang ditentukan dilukis mengikut susunan yang ditakrifkan. Selepas itu, cawangan test4 dilukis, kerana susunannya ialah 1. Kemudian, cawangan main dilukis, kerana susunannya ialah 2. Akhir sekali, cawangan test1 dilukis, kerana susunannya ialah 3.
Nota: kerana kami telah mengatasi mainBranchOrder kepada 2, cawangan main tidak akan dilukis pada permulaan, sebaliknya dipaparkan mengikut susunan.
Di sini, kami menukar nama cawangan utama lalai kepada MetroLine1.
Arah
Mermaid menyokong tiga arah: dari kiri ke kanan (lalai), dari atas ke bawah dan dari bawah ke atas.
Dari kiri ke kanan (lalai, LR:)
Dalam Mermaid, arah lalai ialah berjalan dari kiri ke kanan, dengan cawangan bertindan antara satu sama lain.
Walau bagaimanapun, anda boleh menetapkan nilai ini secara jelas menggunakan LR: selepas sintaks gitGraph.
Salin
Benamkan
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dari atas ke bawah (TB:)
Dalam arah dari atas ke bawah, commit berjalan dari bahagian atas ke bahagian bawah carta, dengan cawangan disusun bersebelahan.
Untuk mengorientasikan graf dengan cara ini, anda perlu menambah TB: selepas sintaks gitGraph.
Salin
Benamkan
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dari bawah ke atas (BT:)
Dalam arah dari bawah ke atas, commit berjalan dari bahagian bawah ke bahagian atas carta, dengan cawangan disusun bersebelahan.
Untuk mengorientasikan graf dengan cara ini, anda perlu menambah BT: selepas sintaks gitGraph.
Salin
Benamkan
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commit sementara (parallelCommits: false)
Salin
Benamkan
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commit selari (parallelCommits: true)
Salin
Benamkan
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid menyokong satu siri tema tersuai; anda boleh menggunakannya untuk mencari tema yang sesuai untuk anda. Catatan: anda sebenarnya boleh mengatasi pemboleh ubah tema sedia ada untuk mencipta tema tersuai anda sendiri.
Berikut ialah pilihan tema tersuai yang berbeza:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Untuk menukar tema, anda boleh menggunakan sintaks initialize.
Tema asas
Salin
Benamkan
---
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
Tema hutan
Salin
Benamkan
---
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
Tema lalai
Salin
Benamkan
---
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
Tema gelap
Salin
Benamkan
---
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
Tema neutral
Salin
Benamkan
---
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
Sesuaikan menggunakan pemboleh ubah tema
Mermaid membenarkan anda menyesuaikan carta anda menggunakan pemboleh ubah tema; pemboleh ubah ini mengawal rupa dan gaya setiap elemen carta.
Untuk pemahaman, kami ambil tema default sebagai contoh; nilai lalai pemboleh ubah tema akan dipilih secara automatik daripada tema.
Menggunakan tema default untuk menetapkan warna cawangan:
Salin
Benamkan
---
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 menyokong pemboleh ubah tema untuk mengatasi nilai lalai, sehingga 8 cawangan, iaitu anda boleh menggunakan pemboleh ubah tema untuk menetapkan warna sehingga 8 cawangan. Selepas melebihi 8 cawangan, pemboleh ubah tema akan digunakan semula secara kitaran, iaitu cawangan ke-9 akan menggunakan gaya cawangan pertama.
Warna cawangan tersuai
Anda boleh menggunakan pemboleh ubah tema git0 hingga git7 untuk menyesuaikan warna cawangan. Mermaid membenarkan anda menetapkan warna sehingga 8 cawangan, di mana pemboleh ubah git0 mengawal warna cawangan pertama, git1 mengawal warna cawangan kedua, dan seterusnya.
Nota: nilai lalai pemboleh ubah tema ini dipilih daripada tema yang dipilih. Jika anda ingin mengatasi nilai lalai, anda boleh menggunakan sintaks initialize untuk menambah nilai pemboleh ubah tema tersuai.
Contoh:
Sekarang mari kita atasi nilai lalai pemboleh ubah git0 hingga git3:
Salin
Benamkan
---
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
Warna label cawangan tersuai
Anda boleh menggunakan pemboleh ubah tema gitBranchLabel0 hingga gitBranchLabel7 untuk menyesuaikan warna label cawangan. Mermaid membenarkan anda menetapkan warna sehingga 8 cawangan, di mana pemboleh ubah gitBranchLabel0 mengawal warna label cawangan pertama, pemboleh ubah gitBranchLabel1 mengawal warna label cawangan kedua, dan seterusnya.
Mari kita lihat cara menggunakan tema default untuk menetapkan warna label cawangan:
Sekarang mari kita atasi nilai lalai pemboleh ubah gitBranchLabel0 hingga gitBranchLabel2:
Salin
Benamkan
---
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
Di sini, anda boleh melihat warna dan gaya branch8 dan branch9 masing-masing dipilih daripada cawangan pada kedudukan indeks 0 (main) dan 1 (branch1).
Warna commit tersuai
Anda boleh menggunakan pemboleh ubah tema commitLabelColor dan commitLabelBackground untuk menyesuaikan warna dan warna latar belakang label commit secara berasingan.
Contoh: sekarang mari kita atasi nilai lalai pemboleh ubah commitLabelColor hingga commitLabelBackground:
Salin
Benamkan
---
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
Anda boleh menggunakan pemboleh ubah tema commitLabelFontSize untuk menyesuaikan saiz fon label commit.
Contoh: sekarang mari kita atasi nilai lalai pemboleh ubah commitLabelFontSize:
Salin
Benamkan
---
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
Saiz fon label tersuai
Anda boleh menggunakan pemboleh ubah tema tagLabelFontSize untuk menyesuaikan saiz fon label.
Contoh: sekarang mari kita atasi nilai lalai pemboleh ubah tagLabelFontSize:
Salin
Benamkan
---
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
Warna label tersuai
Anda boleh menggunakan pemboleh ubah tema tagLabelColor, tagLabelBackground dan tagLabelBorder untuk menyesuaikan label, masing-masing menukar warna teks label, warna latar belakang label dan sempadan label.
Contoh: sekarang mari kita atasi nilai lalai pemboleh ubah tagLabelColor, tagLabelBackground dan tagLabelBorder:
Salin
Benamkan
---
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
Warna commit sorotan tersuai
Anda boleh menggunakan pemboleh ubah tema gitInv0 hingga gitInv7 untuk menyesuaikan warna commit sorotan mengikut cawangan tempatnya berada. Mermaid membenarkan anda menetapkan warna commit sorotan tertentu untuk sehingga 8 cawangan, di mana pemboleh ubah gitInv0 mengawal warna commit sorotan cawangan pertama, pemboleh ubah gitInv1 mengawal warna commit sorotan cawangan kedua, dan seterusnya.
Sekarang mari kita atasi nilai lalai pemboleh ubah git0 hingga git3:
Salin
Benamkan
---
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
