{"id":2077,"date":"2026-07-08T06:54:58","date_gmt":"2026-07-08T06:54:58","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-gitgraph-diagram-syntax-guide\/"},"modified":"2026-07-08T06:54:58","modified_gmt":"2026-07-08T06:54:58","slug":"mermaid-js-gitgraph-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/","title":{"rendered":"Panduan Sintaks Diagram GitGraph Mermaid.js"},"content":{"rendered":"<p>Diagram GitGraph adalah komponen visualisasi khusus yang digunakan oleh pengembang, tim DevOps, dan penulis teknis untuk secara jelas menyampaikan strategi cabang Git, manajemen rilis, dan alur kerja pengembangan. Terintegrasi secara bawaan ke dalam Mermaid.js, <code>gitGraph<\/code>mesin menggunakan model timeline deklaratif dan berurutan. Ini memetakan perintah terminal dunia nyata secara langsung ke peta timeline visual yang akurat tanpa memerlukan pengeditan gambar secara manual.<\/p>\n<h2>Memahami Matriks Timeline GitGraph<\/h2>\n<p>Berbeda dengan bagan alir sistem bebas bentuk, diagram GitGraph mengikuti logika berurutan yang ketat, berdasarkan urutan kejadian, yang memodelkan ruang kerja kontrol versi yang sebenarnya:<\/p>\n<ul>\n<li><strong>Cabang Akar Otomatis:<\/strong>Setiap ruang kerja diagram yang diinisialisasi secara otomatis akan membuat jalur timeline akar utama. Secara default, jalur ini dinamai <code>main<\/code>, dan semua tindakan berikutnya akan melacak terhadapnya kecuali jalur cabang alternatif yang bersih dibuat.<\/li>\n<li><strong>Urutan Prioritas:<\/strong>Elemen dirender sepanjang sumbu kronologis dari kiri ke kanan berdasarkan urutan penyisipan perintah dalam file sumber kode Anda.<\/li>\n<\/ul>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap timeline dimulai dengan kata kunci <code>gitGraph<\/code>kata kunci deklarasi. Diikuti oleh daftar kolom berurutan dari perintah eksekusi atomik seperti commit, checkout, dan merge.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxBZSUVJeYlZyikpSaWlBal6ubkp2fmgVVkpCZn55eWYJFBmAJTk5sIkcpNLUpPRdUBAGUkKhg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxBZSUVJeYlZyikpSaWlBal6ubkp2fmgVVkpCZn55eWYJFBmAJTk5sIkcpNLUpPRdUBAGUkKhg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gitGraph\r\n  commit\r\n  commit\r\n  branch feature-login\r\n  checkout feature-login\r\n  commit\r\n  checkout main\r\n  merge feature-login<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxBZSUVJeYlZyikpSaWlBal6ubkp2fmgVVkpCZn55eWYJFBmAJTk5sIkcpNLUpPRdUBAGUkKhg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxBZSUVJeYlZyikpSaWlBal6ubkp2fmgVVkpCZn55eWYJFBmAJTk5sIkcpNLUpPRdUBAGUkKhg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"mqewxqb\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-986\" decoding=\"async\" fetchpriority=\"high\" height=\"171\" sizes=\"(max-width: 362px) 100vw, 362px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png 362w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505-300x142.png 300w\" width=\"362\"\/><\/p>\n<h2>Referensi Lengkap Perintah Aksi Git<\/h2>\n<p>Mesin tata letak menginterpretasi perintah aksi tertentu dalam huruf kecil untuk memperkuat berat garis, membagi jalur, atau menggabungkan titik akhir bersama di seluruh kanvas ruang kerja.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token Perintah Git<\/th>\n<th>Pengubah Argumen Parameter<\/th>\n<th>Perilaku Aksi &amp; Tata Letak Teknis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>commit<\/code><\/td>\n<td><code>id: \"hash\"<\/code>, <code>type: TYPE<\/code>, <code>tag: \"v1.0\"<\/code><\/td>\n<td>Menambahkan simpul milestone baru langsung ke garis jalur cabang target aktif.<\/td>\n<\/tr>\n<tr>\n<td><code>cabang<\/code><\/td>\n<td><code>nama<\/code>, <code>urutan: Integer<\/code><\/td>\n<td>Menciptakan pemisahan jalur cabang baru. Anda dapat memaksa posisi tumpukan vertikalnya menggunakan opsi eksplisit yang opsional<code>urutan<\/code> nilai.<\/td>\n<\/tr>\n<tr>\n<td><code>checkout<\/code> \/ <code>ganti<\/code><\/td>\n<td><code>nama-cabang<\/code><\/td>\n<td>Memindahkan penunjuk indeks rekaman aktif ke garis cabang target yang ditentukan. Tindakan selanjutnya akan dilacak berdasarkan jalur ini.<\/td>\n<\/tr>\n<tr>\n<td><code>gabung<\/code><\/td>\n<td><code>nama-cabang-tujuan<\/code>, <code>id: \"hash\"<\/code>, <code>tag: \"v2\"<\/code><\/td>\n<td>Menggabungkan jalur cabang yang ditentukan kembali ke cabang saat ini, menciptakan titik persilangan visual yang berbeda.<\/td>\n<\/tr>\n<tr>\n<td><code>cherry-pick<\/code><\/td>\n<td><code>id: \"hash-komit\"<\/code>, <code>induk: \"hash-induk\"<\/code><\/td>\n<td>Menggandakan komit tertentu dari cabang eksternal ke jalur cabang saat ini tanpa mencampurkan jalur-jalur tersebut.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Fitur Lanjutan: Jenis Komit &amp; Kustomisasi Tag<\/h2>\n<p>Untuk membedakan antara patch biasa, pengembalian sistem, atau rilis utama, Anda dapat menetapkan secara eksplisit<code>jenis<\/code> dan <code>tag<\/code>modifikator string di dalam blok argumen menggunakan properti pasangan kunci-nilai seperti json.<\/p>\n<h3>Klasifikasi Bentuk Commit yang Didukung:<\/h3>\n<ul>\n<li><code>tipe: NORMAL<\/code>: Konfigurasi bawaan. Ditampilkan sebagai node lingkaran padat yang terisi di sepanjang jalur waktu.<\/li>\n<li><code>tipe: REVERSE<\/code>: Menyoroti pengembalian arsitektur atau pemrograman. Ditampilkan sebagai node lingkaran padat yang terpotong ($X$).<\/li>\n<li><code>tipe: HIGHLIGHT<\/code>: Menarik perhatian pada perubahan struktural kritis atau perbaikan keamanan. Ditampilkan sebagai kotak persegi panjang yang memanjang dan terisi.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxRyEyxUlDyzMssyUzMUUISL6ksSLVS8PB09\/AB4hCIuuDU5NKizJJKXY\/8krTMCiWFksR0oHCZoZ6BniGm7iDXMNegYFeI3qD8nJykxORsXbfUxJLSolTdCCUAgoUsaw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxRyEyxUlByLE\/MUUISLMksSLVS8PB09\/AB4hCIooDUoqTEzOzEPF3v1OLUnMTcxJLEPCWFksR0oGSZoZ6BniGmGUGuYa5Bwa4wE\/LSU3OTEnMygYa4ZZaUFulGKAEAS\/cuBg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gitGraph\r\n  commit id: \"Awal\"\r\n  commit tipe: HIGHLIGHT id: \"Perbaikan-Keselamatan\" tag: \"v1.0.1\"\r\n  commit tipe: REVERSE id: \"Pengembalian-Fitur-X\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxRyEyxUlByLE\/MUUISLMksSLVS8PB09\/AB4hCIooDUoqTEzOzEPF3v1OLUnMTcxJLEPCWFksR0oGSZoZ6BniGmGUGuYa5Bwa4wE\/LSU3OTEnMygYa4ZZaUFulGKAEAS\/cuBg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzyxxL0osyODlUlBIzs\/NzSxRyEyxUlDyzMssyUzMUUISL6ksSLVS8PB09\/AB4hCIuuDU5NKizJJKXY\/8krTMCiWFksR0oHCZoZ6BniGm7iDXMNegYFeI3qD8nJykxORsXbfUxJLSolTdCCUAgoUsaw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"vzjmfCC\"><img alt=\"\" class=\"alignnone size-full wp-image-987\" decoding=\"async\" height=\"126\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4d52fc30.png\" width=\"254\"\/><\/p>\n<hr\/>\n<h2>Fitur Lanjutan: Logika Cherry-Pick &amp; Kendala Ketat<\/h2>\n<p>Perintah <code>cherry-pick<\/code>perintah menyalin node terisolasi tertentu dari jalur cabang yang berbeda ke cabang aktif Anda saat ini. Untuk menjalankan cherry-pick tanpa menyebabkan kesalahan tata letak kompilator, Anda harus mematuhi persyaratan validasi ruang kerja yang ketat berikut:<\/p>\n<ul>\n<li><strong>Kendala Pengecualian:<\/strong>ID commit target yang Anda cherry-pick *harus tidak* sudah ada di jalur cabang yang sedang Anda lacak saat ini.<\/li>\n<li><strong>Sejarah Prasyarat:<\/strong>Garis cabang aktif saat ini harus berisi setidaknya satu node commit yang valid sebelum memanggil tindakan cherry-pick.<\/li>\n<li><strong>Persyaratan Orang Tua Penggabungan:<\/strong>Jika Anda sedang melakukan cherry-pick pada node penggabungan, Anda harus secara eksplisit melewatkan string identifikasi orang tua langsung yang berada di atasnya menggunakan blok modifikator <code>parent: \"hash\"<\/code>blok modifikator.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptjMEJgDAMAP+CO4T+XcAFnCPG2AZtLWn6cHtREFT8HnfnxQbFHNoGgLYYxUCmHlxhq9mddFRMFKAYekn+8gLTslV7sUc7M1pV7jIaBfcqIkr66iMWXiXxbaruXRZa\/mYHSY04fw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptzEEKgCAQheF90B0G916gC3SOl5oNosk4Lrp90CIq2n68\/0XWWVC3cSBye86sxH4i04L2ai7FghKpKSKXeMkWXNq7vuzR1iALOKHYlbWLeTUZXL6BR8M9EzlsZZf+v06BYTjr\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gitGraph\r\n  commit id: \"setup\"\r\n  cabang staging\r\n  checkout staging\r\n  commit id: \"perbaikan-fitur\"\r\n  checkout main\r\n  commit id: \"dasar\"\r\n  cherry-pick id: \"perbaikan-fitur\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptzEEKgCAQheF90B0G916gC3SOl5oNosk4Lrp90CIq2n68\/0XWWVC3cSBye86sxH4i04L2ai7FghKpKSKXeMkWXNq7vuzR1iALOKHYlbWLeTUZXL6BR8M9EzlsZZf+v06BYTjr\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptjMEJgDAMAP+CO4T+XcAFnCPG2AZtLWn6cHtREFT8HnfnxQbFHNoGgLYYxUCmHlxhq9mddFRMFKAYekn+8gLTslV7sUc7M1pV7jIaBfcqIkr66iMWXiXxbaruXRZa\/mYHSY04fw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"UbdLRrX\"><img alt=\"\" class=\"alignnone size-full wp-image-988\" decoding=\"async\" height=\"200\" sizes=\"(max-width: 341px) 100vw, 341px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4df30fa1.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4df30fa1.png 341w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4df30fa1-300x176.png 300w\" width=\"341\"\/><\/p>\n<hr\/>\n<h2>Fitur Lanjutan: Konfigurasi Parameter Frontmatter<\/h2>\n<p>Anda dapat menyesuaikan perilaku visual global (seperti mengaktifkan\/menonaktifkan label cabang, memodifikasi indeks baris, atau menumpuk timeline) dengan menyatakan sebuah <code>%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'config': { 'gitGraph': { ... } } } }%%<\/code> blok arahan konfigurasi di bagian paling atas skrip grafik Anda.<\/p>\n<h3>Matriks Parameter yang Dapat Disesuaikan<\/h3>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>String Kunci Konfigurasi<\/th>\n<th>Definisi Tipe<\/th>\n<th>Nilai Default<\/th>\n<th>Hasil Perubahan Antarmuka Visual<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>showBranches<\/code><\/td>\n<td>Boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Mengaktifkan\/menonaktifkan visibilitas label pelacakan cabang individu di sisi kiri kisi kanvas.<\/td>\n<\/tr>\n<tr>\n<td><code>showCommitLabel<\/code><\/td>\n<td>Boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Mengaktifkan\/menonaktifkan rendering judul teks dan hash alfanumerik langsung di atas node timeline individu.<\/td>\n<\/tr>\n<tr>\n<td><code>mainBranchName<\/code><\/td>\n<td>String<\/td>\n<td><code>\"main\"<\/code><\/td>\n<td>Mengubah teks pelacakan nama cabang akar awal (misalnya, mengganti ke <code>\"master\"<\/code> atau <code>\"trunk\"<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>mainBranchOrder<\/code><\/td>\n<td>Integer<\/td>\n<td><code>0<\/code><\/td>\n<td>Menetapkan indeks posisi urutan penumpukan vertikal dari atas ke bawah untuk jalur pelacakan timeline akar utama.<\/td>\n<\/tr>\n<tr>\n<td><code>parallelCommits<\/code><\/td>\n<td>Boolean<\/td>\n<td><code>salah<\/code><\/td>\n<td>Jika dimodifikasi menjadi <code>benar<\/code>, komitmen terpisah yang memiliki jarak langkah induk yang identik akan sejajar secara simetris pada level vertikal yang sama.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Rancangan Dunia Nyata: Pipeline Manajemen Rilis Git-Flow Perusahaan<\/h2>\n<p>Rancangan perusahaan yang komprehensif ini menunjukkan pipeline rilis produksi standar. Ini menimpa parameter konfigurasi untuk mengganti nama jalur akar menjadi <code>trunk<\/code>, menetapkan hierarki urutan cabang tetap, menggunakan beberapa jalur cabang (<code>develop<\/code> dan <code>feature-auth<\/code>), melakukan penggabungan, menerapkan tag khusus, dan menyebarluaskan bentuk komitmen sorotan prioritas tinggi.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UcFqwzAMvRf6DyIQcplLu2NuTWBtRjbGVthZTbTENI6Nq3SMsn+f62Vb0jCMD3pPek9+DsOzbCXHcIaokryxaOrIVwplm1hsi\/oRFTksYtu1h+gGomOt31OtlOQc99Q4zlEEn5cThvPZj9B8BlD4PpBlDEHmnCQ2ItWWAmCsHHZaLZaLZXDd+kLcGZFmntj7NaCkEzXa+NaaioPueIQNx42VLYuVSPBIQ403Qu4sCey4HglNiIHa\/etO5LqSxWTNh7t1zwB\/GIphm222ubu7\/7ZUZCsaufVKF1ysXT0xSYjRZaaMbKgMRsL+S\/5ke5\/vsWdqyL1ePFld\/qZ969P+AuwTnQ0=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UcFqwzAMvRf6DyIQcplLu2NuTWBtRjbGVthZTbTENI6Nq3SMsn+f62Vb0jCMD3pPek9+DsOzbCXHcIaokryxaOrIVwplm1hsi\/oRFTksYtu1h+gGomOt31OtlOQc99Q4zlEEn5cThvPZj9B8BlD4PpBlDEHmnCQ2ItWWAmCsHHZaLZaLZXDd+kLcGZFmntj7NaCkEzXa+NaaioPueIQNx42VLYuVSPBIQ403Qu4sCey4HglNiIHa\/etO5LqSxWTNh7t1zwB\/GIphm222ubu7\/7ZUZCsaufVKF1ysXT0xSYjRZaaMbKgMRsL+S\/5ke5\/vsWdqyL1ePFld\/qZ969P+AuwTnQ0=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">%%{init: { 'gitGraph': { 'mainBranchName': 'trunk', 'showCommitLabel': true } } }%%\r\ngitGraph\r\n  commit id: \"Initial-Core\" tag: \"v1.0.0\"\r\n  commit id: \"Setup-CI\"\r\n  branch develop\r\n  checkout develop\r\n  commit id: \"Sprint-1-Base\"\r\n  branch feature-auth\r\n  checkout feature-auth\r\n  commit id: \"JWT-Logic\"\r\n  commit id: \"MFA-Logic\" type: HIGHLIGHT\r\n  checkout develop\r\n  merge feature-auth id: \"Merge-Auth\"\r\n  commit id: \"Beta-Compiled\"\r\n  checkout trunk\r\n  merge develop id: \"Release-Prod\" tag: \"v2.0.0\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UcFqwzAMvRf6DyIQcplLu2NuTWBtRjbGVthZTbTENI6Nq3SMsn+f62Vb0jCMD3pPek9+DsOzbCXHcIaokryxaOrIVwplm1hsi\/oRFTksYtu1h+gGomOt31OtlOQc99Q4zlEEn5cThvPZj9B8BlD4PpBlDEHmnCQ2ItWWAmCsHHZaLZaLZXDd+kLcGZFmntj7NaCkEzXa+NaaioPueIQNx42VLYuVSPBIQ403Qu4sCey4HglNiIHa\/etO5LqSxWTNh7t1zwB\/GIphm222ubu7\/7ZUZCsaufVKF1ysXT0xSYjRZaaMbKgMRsL+S\/5ke5\/vsWdqyL1ePFld\/qZ969P+AuwTnQ0=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UcFqwzAMvRf6DyIQcplLu2NuTWBtRjbGVthZTbTENI6Nq3SMsn+f62Vb0jCMD3pPek9+DsOzbCXHcIaokryxaOrIVwplm1hsi\/oRFTksYtu1h+gGomOt31OtlOQc99Q4zlEEn5cThvPZj9B8BlD4PpBlDEHmnCQ2ItWWAmCsHHZaLZaLZXDd+kLcGZFmntj7NaCkEzXa+NaaioPueIQNx42VLYuVSPBIQ403Qu4sCey4HglNiIHa\/etO5LqSxWTNh7t1zwB\/GIphm222ubu7\/7ZUZCsaufVKF1ysXT0xSYjRZaaMbKgMRsL+S\/5ke5\/vsWdqyL1ePFld\/qZ969P+AuwTnQ0=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iKSnpYj\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-989\" decoding=\"async\" height=\"278\" loading=\"lazy\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df610e5bf8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df610e5bf8.png 560w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df610e5bf8-300x149.png 300w\" width=\"560\"\/><\/p>\n<hr\/>\n<h2>Kesalahan Sintaks Umum &amp; Kendala Sistem<\/h2>\n<p>Saat mengompilasi grafik kontrol versi yang akurat, pertimbangkan parameter pemecahan masalah ini untuk mencegah bug perhitungan tata letak:<\/p>\n<ul>\n<li><strong>Kesalahan Sensitivitas Huruf Besar\/Kecil:<\/strong> Deklarasi inisialisasi utama harus ditulis dalam camelCase eksplisit sebagai <code>gitGraph<\/code>. Menuliskannya seluruhnya dalam huruf kecil sebagai <code>gitgraph<\/code> akan memicu kegagalan parsing kompilator.<\/li>\n<li><strong>Identifikasi Alfanumerik Tanpa Tanda Kutip:<\/strong> Saat melewatkan parameter komitmen khusus (misalnya, <code>id: core_init<\/code>), nilai yang mengandung tanda hubung, spasi, atau titik *harus* dikelilingi dengan tanda kutip ganda. Lupa menggunakan blok tanda kutip akan menyebabkan kesalahan validasi kompilasi.<\/li>\n<li><strong>Target Checkout Tidak Valid:<\/strong> Memanggil <code>checkout branch_name<\/code> tindakan pada identitas string yang belum diinisialisasi sebelumnya menggunakan <code>branch branch_name<\/code> perintah akan langsung menghentikan pembuatan grafik.<\/li>\n<li><strong>Tabrakan Urutan Cabang:<\/strong> Saat menggunakan <code>urutan<\/code> tag konfigurasi pada cabang, pastikan beberapa trek tidak dipetakan ke bilangan bulat yang sama kecuali Anda ingin jejak lintasan kanvas yang tumpang tindih. Pertahankan nomor trek cabang yang unik.<\/li>\n<li><strong>Kegagalan Pemisahan Spasi:<\/strong> Pastikan ruang argumen yang jelas ada saat memisahkan properti di dalam matriks parameter dalam tanda kurung (misalnya, gunakan <code>id: \"1\", type: HIGHLIGHT<\/code>). Menghilangkan koma atau spasi yang hilang dapat menyebabkan pengecualian pemrosesan.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Diagram GitGraph adalah komponen visualisasi khusus yang digunakan oleh pengembang, tim DevOps, dan penulis teknis untuk secara jelas menyampaikan strategi cabang Git, manajemen rilis, dan alur kerja pengembangan. Terintegrasi secara bawaan ke dalam Mermaid.js, gitGraphmesin menggunakan model timeline deklaratif dan&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":25,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2077","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/\",\"name\":\"Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df4c81a505.png\",\"datePublished\":\"2026-07-08T06:54:58+00:00\",\"description\":\"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df4c81a505.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df4c81a505.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-gitgraph-diagram-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Panduan Sintaks Diagram GitGraph Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide","description":"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide","og_description":"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/","name":"Mermaid GitGraph Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png","datePublished":"2026-07-08T06:54:58+00:00","description":"Visualize Git branching, merging, and commit histories using Mermaid GitGraph in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df4c81a505.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-gitgraph-diagram-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Panduan Sintaks Diagram GitGraph Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2077"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}