Diagram Git
Diagram Git adalah representasi visual dari commit git dan operasi git pada berbagai cabang.
Diagram Git sangat membantu bagi pengembang dan tim operasi, dapat digunakan untuk berbagi strategi cabang Git mereka.
Mermaid dapat merender diagram Git
Salin
Sematkan
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Mermaid mendukung operasi git dasar, misalnya:
- commit : merepresentasikan commit baru pada cabang saat ini.
- branch : membuat dan beralih ke cabang baru, sekaligus menjadikannya cabang saat ini.
- checkout : beralih ke cabang yang sudah ada dan menjadikannya cabang saat ini.
- merge : menggabungkan cabang yang ada ke cabang saat ini.
Dengan bantuan operasi Git ini, Anda dapat menggambar diagram Git di Mermaid dengan sangat mudah dan cepat. Nama entitas biasanya diawali dengan huruf kapital, meskipun tidak ada standar yang diakui untuk hal ini, dan juga tidak wajib di Mermaid.
Catatan: checkout dan switch dapat digunakan secara bergantian.
Sintaks
Sintaks Mermaid untuk diagram Git sangat langsung dan sederhana. Ia menggunakan pendekatan deklaratif; setiap commit akan digambar pada garis waktu diagram Git sesuai urutan kemunculannya dalam kode. Pada dasarnya, ia mengikuti urutan penyisipan setiap perintah.
Pertama, deklarasikan jenis diagram Anda menggunakan sintaks gitGraph. Sintaks gitGraph memberi tahu Mermaid bahwa Anda ingin menggambar diagram Git, dan mengurai kode diagram secara sesuai.
Setiap diagram Git diinisialisasi dengan cabang main. Kecuali Anda membuat cabang yang berbeda, secara bawaan commit akan masuk ke cabang utama. Hal ini didorong oleh cara kerja git, di mana pada awalnya Anda selalu memulai dari cabang utama. Secara bawaan, cabang main ditetapkan sebagai cabang saat ini.
Anda dapat menggunakan sintaks commit untuk mendaftarkan satu commit pada cabang saat ini; mari kita lihat bagaimana ini bekerja:
Sebuah diagram git sederhana, yang menampilkan tiga commit pada cabang bawaan main:
Salin
Sematkan
gitGraph
commit
commit
commit
Jika Anda mengamati contoh sebelumnya dengan saksama, Anda dapat melihat cabang bawaan main beserta tiga commit. Perhatikan juga bahwa secara bawaan, setiap commit diberi ID yang unik dan acak.
Menambahkan ID commit khusus
Untuk suatu commit, Anda dapat menentukan ID khusus menggunakan atribut id saat mendeklarasikannya, lalu menambahkan titik dua :, dan menuliskan nilai khusus di dalam tanda kutip ganda.
Mari kita lihat bagaimana ini bekerja dengan bantuan gambar berikut:
Salin
Sematkan
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
在此示例中，我们给提交分配了自定义 ID。
Mengubah jenis commit
Di Mermaid, commit memiliki tiga jenis, yang cara renderingnya dalam diagram sedikit berbeda. Jenis-jenis tersebut adalah:
- NORMAL : jenis commit bawaan, direpresentasikan dengan lingkaran padat
- REVERSE : menekankan bahwa commit adalah commit terbalik, direpresentasikan dengan lingkaran padat bersilang.
- HIGHLIGHT : menyorot commit tertentu, direpresentasikan dengan persegi panjang padat.
Untuk commit tertentu, Anda dapat menentukan jenisnya menggunakan atribut type saat mendeklarasikannya, lalu diikuti titik dua : dan opsi jenis yang diinginkan seperti yang dibahas di atas. Misalnya: commit type:
Catatan: jika jenis commit tidak ditentukan, maka secara bawaan dipilih NORMAL
Mari kita lihat melalui gambar berikut bagaimana berbagai jenis commit ini berlangsung:
Salin
Sematkan
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
Dalam contoh ini, kami menentukan jenis yang berbeda untuk setiap commit. Selain itu, perhatikan bagaimana kami menyertakan id dan type sekaligus saat mendeklarasikan commit.
Menambahkan tag
Untuk commit tertentu, Anda dapat menghiasinya dengan tag, mirip dengan konsep tag atau versi rilis di git world. Anda dapat melampirkan tag khusus menggunakan atribut tag saat mendeklarasikan commit, diikuti titik dua :, dan menuliskan nilai khusus di dalam tanda kutip ganda.
Salin
Sematkan
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 khusus untuk commit.
Membuat cabang baru
Di Mermaid, untuk membuat cabang baru, Anda dapat menggunakan sintaks branch. Anda juga perlu memberikan nama cabang baru. Nama harus unik, tidak boleh berupa nama cabang yang sudah ada.
Saat Mermaid membaca sintaks branch, ia akan membuat cabang baru dan menetapkannya sebagai cabang saat ini. Setara dengan Anda membuat cabang baru di diagram Git dan beralih ke cabang tersebut.
Salin
Sematkan
gitGraph
commit
commit
branch develop
commit
commit
commit
Dalam contoh ini, dapat dilihat bagaimana kami memulai dari cabang bawaan main, dan mendorong dua commit ke atasnya. Kemudian kami membuat cabang develop, dan semua commit setelahnya ditempatkan pada cabang develop, karena cabang tersebut menjadi cabang saat ini.
Checkout cabang yang sudah ada
Di Mermaid, untuk beralih ke cabang yang sudah ada, Anda dapat menggunakan sintaks checkout, dan Anda juga perlu memberikan nama cabang yang sudah ada. Jika cabang dengan nama yang ditentukan tidak ditemukan, akan menyebabkan error pada konsol. Contoh penggunaan: checkout develop
Saat Mermaid membaca sintaks checkout, ia akan menemukan cabang dengan nama yang ditentukan dan menetapkannya sebagai cabang saat ini. Ini setara dengan melakukan checkout cabang di Git.
Salin
Sematkan
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Dalam contoh ini, kami pertama-tama memulai dari cabang bawaan main, dan mendorong dua commit ke atasnya. Kemudian kami membuat cabang develop, dan selanjutnya ketiga commit ditempatkan pada cabang develop, karena cabang tersebut menjadi cabang saat ini. Setelah itu, kami menggunakan sintaks checkout untuk menetapkan cabang saat ini menjadi main, dan semua commit setelahnya akan dicatat pada cabang main.
Menggabungkan dua cabang
Di Mermaid, untuk menggabungkan atau terhubung ke cabang yang ada, Anda perlu menggunakan sintaks merge. Selain itu, Anda juga perlu memberikan nama cabang yang ada untuk digabungkan. Jika cabang dengan nama yang ditentukan tidak ditemukan, error akan ditampilkan pada konsol. Selain itu, Anda hanya dapat menggabungkan dua cabang yang terpisah, tidak dapat menggabungkan suatu cabang dengan dirinya sendiri.
Contoh sintaks: merge develop
Saat Mermaid membaca sintaks merge, ia akan menemukan cabang yang ditentukan beserta commit terakhirnya, dan menggabungkannya dengan commit terakhir cabang saat ini. Direpresentasikan dengan lingkaran ganda padat.
Berikut adalah contoh penggabungan dua cabang:
Salin
Sematkan
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dalam contoh ini, pertama-tama dimulai dari cabang main, dan mendorong dua commit ke atasnya. Kemudian kami membuat cabang develop, dan mendorong tiga commit pada cabang develop. Setelah itu, kami menggunakan sintaks checkout untuk menetapkan cabang saat ini menjadi main, dan semua commit setelahnya dilakukan terhadap cabang main. Terakhir, kami menggabungkan cabang develop ke cabang main, sehingga menghasilkan commit penggabungan. Karena pada saat ini cabang saat ini masih main, dua commit terakhir akan dicatat pada cabang tersebut.
Anda juga dapat menambahkan atribut serupa untuk penggabungan Anda:
- id menimpa ID bawaan dengan ID khusus
- tag menambahkan tag khusus pada commit penggabungan
- type menimpa jenis bawaan commit penggabungan. Anda dapat menggunakan jenis commit lain yang disebutkan sebelumnya.
Salin
Sematkan
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"
Menggabungkan commit secara selektif dari cabang lain
Mermaid mendukung pemilihan satu commit dari cabang lain ke cabang saat ini. Anda juga dapat menggunakan sintaks cherry-pick untuk memilih commit dari cabang lain.
Untuk menggunakan sintaks cherry-pick, Anda harus menentukan id menggunakan atribut id, lalu menuliskan id commit yang Anda inginkan setelah titik dua :, dan dibungkus dengan tanda kutip ganda. Misalnya:
Berikut adalah beberapa aturan penting yang perlu diperhatikan:
- Anda perlu memberikan id agar dapat memilih commit yang sudah ada. Jika ID commit yang diberikan tidak ada, maka akan menyebabkan error. Untuk itu, gunakan format commit id:$value untuk mendeklarasikan commit.
- Commit yang diberikan tidak boleh berada pada cabang saat ini; commit yang dipilih harus selalu berasal dari cabang yang berbeda dari cabang saat ini.
- Cabang saat ini harus memiliki setidaknya satu commit sebelum dapat melakukan cherry-pick, jika tidak akan menyebabkan error.
- Saat memilih commit penggabungan, ID commit induk harus diberikan. Jika properti induk dihilangkan atau ID commit induk yang tidak valid diberikan, akan memunculkan error.
- Commit induk yang ditentukan harus berupa commit induk langsung dari commit penggabungan yang sedang dipilih.
Salin
Sematkan
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"
Opsi konfigurasi khusus
Dalam diagram Git Mermaid, Anda dapat mengonfigurasi opsi berikut:
- showBranches : nilai boolean, bawaan true. Jika diatur ke false, cabang tidak akan ditampilkan.
- showCommitLabel : nilai boolean, bawaan true. Jika diatur ke false, label commit tidak akan ditampilkan.
- mainBranchName : string, bawaan main. Nama cabang bawaan.
- mainBranchOrder : posisi cabang utama dalam daftar cabang. Bawaan 0, yang berarti secara bawaan, cabang main berada di posisi pertama.
- parallelCommits : nilai boolean, bawaan false. Jika diatur ke true, commit yang berjarak dari induk akan ditampilkan pada tingkat yang sama.
Menyembunyikan nama cabang dan garis penghubung
Terkadang Anda mungkin ingin menyembunyikan nama cabang dan garis penghubung. Anda dapat menggunakan sintaks showBranches untuk melakukan hal ini. Secara bawaan nilainya true, Anda dapat menggunakan direktif untuk mengaturnya menjadi false.
Salin
Sematkan
---
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
Tata letak label commit: berputar atau horizontal
Mermaid mendukung dua jenis tata letak label commit. Tata letak bawaan adalah berputar, yang berarti label ditempatkan di bawah lingkaran commit, diputar 45 derajat untuk keterbacaan yang lebih baik. Hal ini sangat berguna untuk commit dengan label yang panjang.
Jenis lainnya adalah horizontal, yang berarti label ditempatkan di bawah lingkaran commit dan rata tengah secara horizontal, tidak berputar. Hal ini sangat berguna untuk commit dengan label yang pendek.
Anda dapat mengubah tata letak label commit dengan menggunakan sintaks rotateCommitLabel pada direktif. Bawaannya true, yang berarti label commit akan berputar.
Contoh penggunaan: label commit berputar
Salin
Sematkan
---
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 horizontal
Salin
Sematkan
---
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
Menyembunyikan label commit
Terkadang Anda mungkin ingin menyembunyikan label commit. Anda dapat menggunakan sintaks showCommitLabel untuk melakukan hal ini. Secara bawaan nilainya true, Anda dapat menggunakan direktif untuk mengaturnya menjadi false.
Salin
Sematkan
---
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
Menyesuaikan nama cabang utama
Terkadang Anda mungkin ingin menyesuaikan nama cabang utama. Anda dapat menggunakan sintaks mainBranchName untuk melakukan hal ini. Secara bawaan nilainya main, Anda dapat menggunakan direktif untuk mengaturnya menjadi string apa pun.
Salin
Sematkan
---
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"
Lihatlah diagram jalur metro virtual yang dibuat menggunakan Mermaid. Di sini, kami mengubah nama cabang utama bawaan menjadi MetroLine1.
Menyesuaikan urutan cabang
Di Mermaid, secara bawaan, cabang ditampilkan sesuai urutan pendefinisian atau kemunculannya dalam kode diagram.
Terkadang Anda mungkin ingin menyesuaikan urutan cabang. Anda dapat melakukannya dengan menggunakan sintaks order di samping definisi cabang; Anda dapat mengaturnya menjadi angka positif.
Mermaid mengikuti urutan prioritas yang diberikan oleh sintaks order.
- Cabang utama selalu ditampilkan terlebih dahulu, karena nilai urutan bawaannya adalah 0. (Kecuali urutannya diubah melalui sintaks mainBranchOrder di konfigurasi dan diubah dari 0)
- Selanjutnya, semua cabang yang tidak memiliki order akan ditampilkan sesuai urutan kemunculannya dalam kode diagram.
- Selanjutnya, semua cabang yang memiliki order akan ditampilkan sesuai urutan nilai order-nya.
Untuk mengontrol sepenuhnya urutan semua cabang, order harus didefinisikan untuk semua cabang.
Salin
Sematkan
---
config:
logLevel: 'debug'
theme: 'base'
gitGraph:
showBranches: true
showCommitLabel: true
---
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
Pada gambar di atas, semua cabang mengikuti urutan yang telah didefinisikan.
Salin
Sematkan
---
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
Pada gambar di atas, semua cabang yang tidak memiliki urutan yang ditentukan digambar sesuai urutan pendefinisiannya. Setelah itu, cabang test4 digambar, karena urutannya adalah 1. Kemudian, cabang main digambar, karena urutannya adalah 2. Terakhir, cabang test1 digambar, karena urutannya adalah 3.
Catatan: karena kami telah menimpa mainBranchOrder menjadi 2, cabang main tidak akan digambar di awal, melainkan ditampilkan sesuai urutannya.
Di sini, kami mengubah nama cabang utama bawaan menjadi MetroLine1.
Arah
Mermaid mendukung tiga arah: dari kiri ke kanan (bawaan), dari atas ke bawah, dan dari bawah ke atas.
Dari kiri ke kanan (bawaan, LR:)
Di Mermaid, arah bawaannya berjalan dari kiri ke kanan, dengan cabang bertumpuk satu sama lain.
Namun, Anda dapat secara eksplisit mengatur nilai ini menggunakan LR: setelah sintaks gitGraph.
Salin
Sematkan
gitGraph LR:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dari atas ke bawah (TB:)
Pada arah dari atas ke bawah, commit berjalan dari bagian atas ke bagian bawah diagram, dengan cabang tersusun berdampingan.
Untuk mengarahkan graf dengan cara ini, Anda perlu menambahkan TB: setelah sintaks gitGraph.
Salin
Sematkan
gitGraph TB:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Dari bawah ke atas (BT:)
Pada arah dari bawah ke atas, commit berjalan dari bagian bawah ke bagian atas diagram, dengan cabang tersusun berdampingan.
Untuk mengarahkan graf dengan cara ini, Anda perlu menambahkan BT: setelah sintaks gitGraph.
Salin
Sematkan
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
Commit sementara (parallelCommits: false)
Salin
Sematkan
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Commit paralel (parallelCommits: true)
Salin
Sematkan
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
Tema
Mermaid mendukung berbagai tema khusus, yang dapat Anda gunakan untuk menemukan tema yang sesuai untuk Anda. Catatan: Anda sebenarnya dapat menimpa variabel tema yang ada untuk membuat tema khusus Anda sendiri.
Berikut adalah berbagai opsi tema khusus:
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Untuk mengubah tema, Anda dapat menggunakan sintaks initialize.
Tema dasar
Salin
Sematkan
---
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
Sematkan
---
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 bawaan
Salin
Sematkan
---
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
Sematkan
---
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 netral
Salin
Sematkan
---
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
Menyesuaikan menggunakan variabel tema
Mermaid memungkinkan Anda menyesuaikan diagram menggunakan variabel tema; variabel-variabel ini mengontrol tampilan dan gaya berbagai elemen diagram.
Untuk memahaminya, mari kita ambil tema default sebagai contoh; nilai bawaan variabel tema akan secara otomatis diambil dari tema.
Menggunakan tema default untuk mengatur warna cabang:
Salin
Sematkan
---
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 mendukung variabel tema, yang digunakan untuk menimpa nilai bawaan, dapat menimpa hingga 8 cabang, yaitu Anda dapat menggunakan variabel tema untuk mengatur warna hingga 8 cabang. Setelah lebih dari 8 cabang, variabel tema akan digunakan kembali secara berulang, yaitu cabang kesembilan akan menggunakan gaya cabang pertama.
Menyesuaikan warna cabang
Anda dapat menggunakan variabel tema git0 hingga git7 untuk menyesuaikan warna cabang. Mermaid memungkinkan Anda mengatur warna hingga 8 cabang, di mana variabel git0 mengontrol warna cabang pertama, git1 mengontrol warna cabang kedua, dan seterusnya.
Catatan: nilai bawaan variabel tema ini diambil dari tema yang dipilih. Jika Anda ingin menimpa nilai bawaan, Anda dapat menggunakan sintaks initialize untuk menambahkan nilai variabel tema khusus.
Contoh:
Sekarang mari kita timpa nilai bawaan variabel git0 hingga git3:
Salin
Sematkan
---
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
Menyesuaikan warna label cabang
Anda dapat menggunakan variabel tema gitBranchLabel0 hingga gitBranchLabel7 untuk menyesuaikan warna label cabang. Mermaid memungkinkan Anda mengatur warna hingga 8 cabang, di mana variabel gitBranchLabel0 mengontrol warna label cabang pertama, variabel gitBranchLabel1 mengontrol warna label cabang kedua, dan seterusnya.
Mari kita lihat cara menggunakan tema default untuk mengatur warna label cabang:
Sekarang mari kita timpa nilai bawaan variabel gitBranchLabel0 hingga gitBranchLabel2:
Salin
Sematkan
---
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 dapat melihat warna dan gaya branch8 dan branch9 masing-masing diambil dari cabang dengan posisi indeks 0 (main) dan 1 (branch1).
Menyesuaikan warna commit
Anda dapat menggunakan variabel tema commitLabelColor dan commitLabelBackground untuk menyesuaikan warna dan warna latar belakang label commit secara terpisah.
Contoh: sekarang mari kita timpa nilai bawaan variabel commitLabelColor hingga commitLabelBackground:
Salin
Sematkan
---
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 dapat menggunakan variabel tema commitLabelFontSize untuk menyesuaikan ukuran font label commit.
Contoh: sekarang mari kita timpa nilai bawaan variabel commitLabelFontSize:
Salin
Sematkan
---
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
Menyesuaikan ukuran font label
Anda dapat menggunakan variabel tema tagLabelFontSize untuk menyesuaikan ukuran font label.
Contoh: sekarang mari kita timpa nilai bawaan variabel tagLabelFontSize:
Salin
Sematkan
---
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
Menyesuaikan warna label
Anda dapat menggunakan variabel tema tagLabelColor, tagLabelBackground, dan tagLabelBorder untuk menyesuaikan label, masing-masing mengubah warna teks label, warna latar belakang label, dan batas label.
Contoh: sekarang mari kita timpa nilai bawaan variabel tagLabelColor, tagLabelBackground, dan tagLabelBorder:
Salin
Sematkan
---
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
Menyesuaikan warna commit yang disorot
Anda dapat menggunakan variabel tema gitInv0 hingga gitInv7 untuk menyesuaikan warna commit yang disorot berdasarkan cabangnya. Mermaid memungkinkan Anda menetapkan warna commit yang disorot khusus untuk hingga 8 cabang, di mana variabel gitInv0 mengontrol warna commit yang disorot pada cabang pertama, variabel gitInv1 mengontrol warna commit yang disorot pada cabang kedua, dan seterusnya.
Sekarang mari kita timpa nilai bawaan variabel git0 hingga git3:
Salin
Sematkan
---
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
