{"id":2085,"date":"2026-07-07T09:05:47","date_gmt":"2026-07-07T09:05:47","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-kanban-board-syntax-workflow-guide\/"},"modified":"2026-07-07T09:05:47","modified_gmt":"2026-07-07T09:05:47","slug":"mermaid-js-kanban-board-syntax-workflow-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","title":{"rendered":"Panduan Sintaks dan Alur Kerja Papan Kanban Mermaid.js"},"content":{"rendered":"<p>Papan Kanban adalah alat manajemen alur kerja visual yang digunakan untuk melacak tugas atau item kerja di berbagai tahap pemrosesan (seperti Backlog, Sedang Dikerjakan, dan Selesai). Diperkenalkan sebagai fitur bawaan dalam Mermaid.js, pendekatan berbasis teks ini memungkinkan tim pengembangan dan manajer proyek untuk dengan cepat membuat dashboard tugas interaktif di dalam file dokumentasi tanpa harus mengelola aplikasi pelacakan manual atau elemen gambar pihak ketiga.<\/p>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap papan Kanban dimulai dengan <code>kanban<\/code> deklarasi header. Kolom didefinisikan menggunakan <code>section<\/code> kata kunci, dan kartu tugas individu didaftarkan secara berurutan di bawah setiap kolom dengan menggunakan blok jarak indentasi.<\/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:eNpFjcEKwzAMQ++B\/IPonwx2ya3Q\/YDbeG22xim2y35\/zS47CaEn6U0yk8TgxXfGMFE9Lh21vXhxTIcW8SEGu1xpgkfLLQbgzlZWQSanmYxhy8aVfonS03EbE7SdzvbvJum7q7JZB1N\/qiwOOn1DLTnv\/CHlLzojMck=\" 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:eNpFzUEOwjAMBMB7pfxh1Z8AvfRWqXzAJRaYJHaVuEL8nvTEdVa7m0g30jC4eGaM615FHUu1LyfcTN1eYxgaP1xMcbdoYQAmbiSKlrgQNmrSEMnpjK4HOerhjMsy\/5srR9InJklc35TOS2Aue+bC6n2hE4rEmPlDlWHeuWOTH0YKN5k=\" \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\">kanban\r\ntitle \"Sprint Proyek Contoh\"\r\nsection Todo\r\n  Desain skema basis data\r\n  Buat rute API\r\nsection Sedang Dikerjakan\r\n  Implementasikan middleware otentikasi<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFzUEOwjAMBMB7pfxh1Z8AvfRWqXzAJRaYJHaVuEL8nvTEdVa7m0g30jC4eGaM615FHUu1LyfcTN1eYxgaP1xMcbdoYQAmbiSKlrgQNmrSEMnpjK4HOerhjMsy\/5srR9InJklc35TOS2Aue+bC6n2hE4rEmPlDlWHeuWOTH0YKN5k=\" \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:eNpFjcEKwzAMQ++B\/IPonwx2ya3Q\/YDbeG22xim2y35\/zS47CaEn6U0yk8TgxXfGMFE9Lh21vXhxTIcW8SEGu1xpgkfLLQbgzlZWQSanmYxhy8aVfonS03EbE7SdzvbvJum7q7JZB1N\/qiwOOn1DLTnv\/CHlLzojMck=\" 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=\"QXkbmmT\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-935\" decoding=\"async\" fetchpriority=\"high\" height=\"171\" sizes=\"(max-width: 630px) 100vw, 630px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png 630w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436-300x81.png 300w\" width=\"630\"\/><\/p>\n<h2>Referensi Sintaks<\/h2>\n<p>Tabel di bawah ini menjelaskan komponen data dasar dan parameter yang digunakan untuk membuat peta papan Kanban di Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Komponen Sintaks<\/th>\n<th>Persyaratan Tipe<\/th>\n<th>Deskripsi &amp; Aturan Penggunaan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklarasi<\/strong><\/td>\n<td>Pengenal Kata Kunci<\/td>\n<td>blok yang tepat<code>kanban<\/code> blok.<\/td>\n<\/tr>\n<tr>\n<td><strong>Judul<\/strong><\/td>\n<td>String yang Diberi Tanda Kutip<\/td>\n<td>Judul kerja global opsional yang ditempatkan rapi di tengah bagian atas kanvas Kanban.<\/td>\n<\/tr>\n<tr>\n<td><strong>Kolom Bagian<\/strong><\/td>\n<td>Kata Kunci + Nama<\/td>\n<td>section<code>section<\/code> diikuti oleh label kolom.<\/td>\n<\/tr>\n<tr>\n<td><strong>Kartu Tugas Standar<\/strong><\/td>\n<td>String yang Diberi Kecil<\/td>\n<td>Deskripsi teks biasa yang mewakili satu kartu. Harus diberi tab atau dimasukkan secara langsung di bawah bagian aktifnya.<\/td>\n<\/tr>\n<tr>\n<td><strong>Kartu ID Tugas<\/strong><\/td>\n<td>Identifikasi dalam Kurung<\/td>\n<td>Format pelacakan kartu tugas lanjutan yang menggunakan token ID unik eksplisit bersamaan dengan label tampilannya: <code>id[Teks Kartu]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Blok Metadata<\/strong><\/td>\n<td>Peta Konfigurasi JSON<\/td>\n<td>Blok properti opsional yang ditambahkan menggunakan aturan <code>@{...}<\/code> aturan sintaks untuk menetapkan atribut seperti prioritas tiket atau pemilik.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Atribut Tugas Lanjutan &amp; Metadata<\/h2>\n<p>Untuk sprint rekayasa yang mendetail atau alur kerja pelacakan bug, Anda dapat menetapkan atribut metadata langsung pada kartu. Dengan menggabungkan ID node unik (seperti <code>task1[...]<\/code>) dengan blok deklarasi konfigurasi JSON yang mengikuti (<code>@{}<\/code>), Anda dapat mencetak variabel terstruktur seperti penugasan tugas, prioritas, dan tiket pelacakan internal langsung di permukaan elemen kartu.<\/p>\n<h3>Variabel Tugas yang Didukung<\/h3>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Kunci Atribut<\/th>\n<th>Format Nilai<\/th>\n<th>Hasil Visual<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>ditugaskan<\/code><\/td>\n<td>Nama String yang Diberi Tanda Kutip<\/td>\n<td>Menampilkan label pemilik atau pengembang yang ditugaskan langsung di dalam matriks detail kartu.<\/td>\n<\/tr>\n<tr>\n<td><code>prioritas<\/code><\/td>\n<td>String Skala yang Diberi Tanda Kutip<\/td>\n<td>Menampilkan ambang batas tingkat keparahan tugas (misalnya, <code>'Tinggi'<\/code>, <code>'Sedang'<\/code>, <code>'Rendah'<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>tiket<\/code><\/td>\n<td>Token Integer atau Alpha<\/td>\n<td>Melacak nomor tugas pengembangan yang terhubung atau kode proyek sistem.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Rancangan Dunia Nyata: Sprint Rilis Pengembangan Agile<\/h2>\n<p>Rancangan komprehensif ini melacak rilis penempatan infrastruktur. Ini memetakan tiga kolom yang berbeda (Backlog, Sedang Dikerjakan, dan Siap Dideploy) dan menggunakan ID tugas canggih yang dipasangkan dengan parameter metadata struktural untuk menetapkan pengembang tertentu dan kode tiket di seluruh fitur.<\/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:eNqNkE1rwkAQhu+C\/2Hw4qUFjS20nqqm0lAFPyo9iIcxmSRDkt2wO2lNi\/\/dTUFswUNPC7Pz7j7Pm6Hao2q3hCUn6CwHMNGGYEoolTtXlBNagrFGE3XaLUuhsFYwxjDLddJuAQjarN\/rbyfGZQhGiwCeVVRqVgK+DquClGAT2j19A1rLiaJoCN01GkzhtXsDpWFtWGo3nFPEVdGF4+Vlb+tTE4IZqohVAgtMCN7ZUGywILu7UAUKFkYnhqw95z1HtqKYFYGPgvtGZlmRqWFdqzA1WvHXNbpRTgeY\/4V74SR1E+EwIxnCXa\/vXUA9BzrRKuak6W3mVmWvD7AJXKFFqZVrwf6ngZn+\/NE\/O60IoxpibcCnMtf1+b+BEwuKMqemX5hXufDtFENxixtLBkaVpO6Gw2t2Pn3AG2Hxy2bw+HAPxxM6XLED\" 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:eNqNkMFOAkEMhu8kvEPDhYsmsGiinISsRIJEBIwHwqGwZamz29nMzBqI4d0toKKcvDVN2v\/7foOyQKlWAoeMoDbCAgXGnLGHHofSQV8Cw3OrVq14Wga2Al1cmsym1QpAQG+ajeasW2KA2JoyJ9Edw70khWUJ0Bn153cfgN5zKpS0oT5Bh2sY1C+gcGwdh+1+SQlKWofd6Ws0i8kjC7yyo5XDnOABM8yVLyalnJ+IjtcQsyH3hmbvc\/wSKduYViykYDBhMc4K+z3hoCTH6uLVNMaAZ5SdjDYw\/As5ZUlT1l3gpaHQhqtGMzohR4o8sLLitHSHBJsXVjT3pQ+PnK7Dwm7+08WYJMH1oYsfQcZC9RIqMrv9zmupXD8vMvoqXb3hKeisk8aPSGlLQRiWWeDLHppg3Vn+lHMt8\/2XUuv25hp2n61us2o=\" \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\">kanban\r\ntitle \"Papan Rilis Fitur Inti Q3\"\r\nsection Backlog\r\n  task101[Buat Dokumentasi Endpoint API]@{ assigned: 'Sarah K', priority: 'Sedang' }\r\n  task102[Desain Wireframe Halaman Depan]\r\nsection Sedang Dikerjakan\r\n  task201[Refinemen Sinkronisasi Kueri Basis Data]@{ assigned: 'Alex M', priority: 'Tinggi', ticket: 4012 }\r\n  task202[Konfigurasi Komponen UI Lightbox]@{ assigned: 'Sarah K', priority: 'Rendah' }\r\nsection Siap Dideploy\r\n  task301[Implementasikan Otentikasi Pengguna Multi-Faktor]@{ assigned: 'Tim Dev', ticket: 3985 }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkMFOAkEMhu8kvEPDhYsmsGiinISsRIJEBIwHwqGwZamz29nMzBqI4d0toKKcvDVN2v\/7foOyQKlWAoeMoDbCAgXGnLGHHofSQV8Cw3OrVq14Wga2Al1cmsym1QpAQG+ajeasW2KA2JoyJ9Edw70khWUJ0Bn153cfgN5zKpS0oT5Bh2sY1C+gcGwdh+1+SQlKWofd6Ws0i8kjC7yyo5XDnOABM8yVLyalnJ+IjtcQsyH3hmbvc\/wSKduYViykYDBhMc4K+z3hoCTH6uLVNMaAZ5SdjDYw\/As5ZUlT1l3gpaHQhqtGMzohR4o8sLLitHSHBJsXVjT3pQ+PnK7Dwm7+08WYJMH1oYsfQcZC9RIqMrv9zmupXD8vMvoqXb3hKeisk8aPSGlLQRiWWeDLHppg3Vn+lHMt8\/2XUuv25hp2n61us2o=\" \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:eNqNkE1rwkAQhu+C\/2Hw4qUFjS20nqqm0lAFPyo9iIcxmSRDkt2wO2lNi\/\/dTUFswUNPC7Pz7j7Pm6Hao2q3hCUn6CwHMNGGYEoolTtXlBNagrFGE3XaLUuhsFYwxjDLddJuAQjarN\/rbyfGZQhGiwCeVVRqVgK+DquClGAT2j19A1rLiaJoCN01GkzhtXsDpWFtWGo3nFPEVdGF4+Vlb+tTE4IZqohVAgtMCN7ZUGywILu7UAUKFkYnhqw95z1HtqKYFYGPgvtGZlmRqWFdqzA1WvHXNbpRTgeY\/4V74SR1E+EwIxnCXa\/vXUA9BzrRKuak6W3mVmWvD7AJXKFFqZVrwf6ngZn+\/NE\/O60IoxpibcCnMtf1+b+BEwuKMqemX5hXufDtFENxixtLBkaVpO6Gw2t2Pn3AG2Hxy2bw+HAPxxM6XLED\" 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=\"OgGbjiu\"><img alt=\"\" class=\"alignnone size-full wp-image-936\" decoding=\"async\" height=\"243\" sizes=\"(max-width: 835px) 100vw, 835px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7.png 835w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7-300x87.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7-768x224.png 768w\" width=\"835\"\/><\/p>\n<hr\/>\n<p><em><strong>Kiat Sintaks:<\/strong> Meskipun tugas sederhana dapat diketik sebagai baris teks biasa tanpa tanda kutip, penugasan kompleks yang membawa parameter meta *harus* menggunakan awalan string pemetaan ID unik (seperti <code>id1[...]@{...}<\/code>). Menggunakan ID tugas yang sama persis di bagian berbeda papan akan menimpa properti atau menyebabkan kesalahan tata letak.<\/em><\/p>\n<hr\/>\n<h2>Kesalahan Sintaks Umum &amp; Kendala Sistem<\/h2>\n<p>Saat merancang sistem tata letak yang sangat padat dan multi-tahap, pertimbangkan parameter pemecahan masalah struktural berikut:<\/p>\n<ul>\n<li><strong>Aturan Bagian Sebelum Kartu:<\/strong> Semua kartu tugas harus berada di bawah blok kolom aktif. Menulis baris string tugas tepat di bawah judul utama Anda <code>kanban<\/code> judul tanpa menyatakan sebuah <code>section<\/code> header kolom terlebih dahulu akan menghentikan kompilasi.<\/li>\n<li><strong>Spasi dan Pengindenan:<\/strong> Mesin tata letak pelacakan mengelompokkan kartu berdasarkan tab pengindenan baris. Pastikan semua baris kartu tugas diindensasi secara seragam di bawah tag <code>section<\/code> tag untuk mencegah terjadinya pergeseran penjajaran.<\/li>\n<li><strong>Format Pemisah Metadata:<\/strong> Saat membangun atribut khusus di dalam sebuah <code>@{ }<\/code> blok, kunci dan nilai harus sesuai dengan argumen sistem yang valid. Pisahkan beberapa atribut dengan koma dan gunakan tanda petik bersih di sekitar penugasan string Anda.<\/li>\n<li><strong>Manajemen Kerapatan Kartu:<\/strong> Meskipun komponen Kanban sepenuhnya responsif, memenuhi satu papan dengan lebih dari 5 kolom atau menambahkan puluhan baris metadata padat dapat mengurangi kemampuan pemindaian di perangkat mobile. Aturlah aturan jarak tata letak secara sengaja.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Papan Kanban adalah alat manajemen alur kerja visual yang digunakan untuk melacak tugas atau item kerja di berbagai tahap pemrosesan (seperti Backlog, Sedang Dikerjakan, dan Selesai). Diperkenalkan sebagai fitur bawaan dalam Mermaid.js, pendekatan berbasis teks ini memungkinkan tim pengembangan dan&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":17,"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-2085","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 Kanban Board Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram 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-kanban-board-syntax-workflow-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Kanban Board Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-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_6a4cc1c40f436.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=\"3 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-kanban-board-syntax-workflow-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\",\"name\":\"Mermaid Kanban Board 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-kanban-board-syntax-workflow-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\",\"datePublished\":\"2026-07-07T09:05:47+00:00\",\"description\":\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-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 dan Alur Kerja Papan Kanban 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 Kanban Board Syntax | VPasCode Text to Diagram Guide","description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram 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-kanban-board-syntax-workflow-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Kanban Board Syntax | VPasCode Text to Diagram Guide","og_description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","name":"Mermaid Kanban Board 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-kanban-board-syntax-workflow-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png","datePublished":"2026-07-07T09:05:47+00:00","description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-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 dan Alur Kerja Papan Kanban 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\/2085","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=2085"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}