Panduan Sintaks dan Alur Kerja Papan Kanban Mermaid.js

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.

Struktur Sintaks Dasar

Setiap papan Kanban dimulai dengan kanban deklarasi header. Kolom didefinisikan menggunakan section kata kunci, dan kartu tugas individu didaftarkan secara berurutan di bawah setiap kolom dengan menggunakan blok jarak indentasi.

Mermaid


Edit Mermaid di VPasCode
Mermaid Edit Mermaid in VPasCode 
kanban
title "Sprint Proyek Contoh"
section Todo
  Desain skema basis data
  Buat rute API
section Sedang Dikerjakan
  Implementasikan middleware otentikasi
Edit Mermaid in VPasCode



Edit Mermaid di VPasCode

Referensi Sintaks

Tabel di bawah ini menjelaskan komponen data dasar dan parameter yang digunakan untuk membuat peta papan Kanban di Mermaid.js.

Komponen Sintaks Persyaratan Tipe Deskripsi & Aturan Penggunaan
Deklarasi Pengenal Kata Kunci blok yang tepatkanban blok.
Judul String yang Diberi Tanda Kutip Judul kerja global opsional yang ditempatkan rapi di tengah bagian atas kanvas Kanban.
Kolom Bagian Kata Kunci + Nama sectionsection diikuti oleh label kolom.
Kartu Tugas Standar String yang Diberi Kecil Deskripsi teks biasa yang mewakili satu kartu. Harus diberi tab atau dimasukkan secara langsung di bawah bagian aktifnya.
Kartu ID Tugas Identifikasi dalam Kurung Format pelacakan kartu tugas lanjutan yang menggunakan token ID unik eksplisit bersamaan dengan label tampilannya: id[Teks Kartu].
Blok Metadata Peta Konfigurasi JSON Blok properti opsional yang ditambahkan menggunakan aturan @{...} aturan sintaks untuk menetapkan atribut seperti prioritas tiket atau pemilik.

Atribut Tugas Lanjutan & Metadata

Untuk sprint rekayasa yang mendetail atau alur kerja pelacakan bug, Anda dapat menetapkan atribut metadata langsung pada kartu. Dengan menggabungkan ID node unik (seperti task1[...]) dengan blok deklarasi konfigurasi JSON yang mengikuti (@{}), Anda dapat mencetak variabel terstruktur seperti penugasan tugas, prioritas, dan tiket pelacakan internal langsung di permukaan elemen kartu.

Variabel Tugas yang Didukung

Kunci Atribut Format Nilai Hasil Visual
ditugaskan Nama String yang Diberi Tanda Kutip Menampilkan label pemilik atau pengembang yang ditugaskan langsung di dalam matriks detail kartu.
prioritas String Skala yang Diberi Tanda Kutip Menampilkan ambang batas tingkat keparahan tugas (misalnya, 'Tinggi', 'Sedang', 'Rendah').
tiket Token Integer atau Alpha Melacak nomor tugas pengembangan yang terhubung atau kode proyek sistem.

Rancangan Dunia Nyata: Sprint Rilis Pengembangan Agile

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.

Mermaid


Edit Mermaid di VPasCode
Mermaid Edit Mermaid in VPasCode 
kanban
title "Papan Rilis Fitur Inti Q3"
section Backlog
  task101[Buat Dokumentasi Endpoint API]@{ assigned: 'Sarah K', priority: 'Sedang' }
  task102[Desain Wireframe Halaman Depan]
section Sedang Dikerjakan
  task201[Refinemen Sinkronisasi Kueri Basis Data]@{ assigned: 'Alex M', priority: 'Tinggi', ticket: 4012 }
  task202[Konfigurasi Komponen UI Lightbox]@{ assigned: 'Sarah K', priority: 'Rendah' }
section Siap Dideploy
  task301[Implementasikan Otentikasi Pengguna Multi-Faktor]@{ assigned: 'Tim Dev', ticket: 3985 }
Edit Mermaid in VPasCode



Edit Mermaid di VPasCode

Kiat Sintaks: 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 id1[...]@{...}). Menggunakan ID tugas yang sama persis di bagian berbeda papan akan menimpa properti atau menyebabkan kesalahan tata letak.

Kesalahan Sintaks Umum & Kendala Sistem

Saat merancang sistem tata letak yang sangat padat dan multi-tahap, pertimbangkan parameter pemecahan masalah struktural berikut:

  • Aturan Bagian Sebelum Kartu: Semua kartu tugas harus berada di bawah blok kolom aktif. Menulis baris string tugas tepat di bawah judul utama Anda kanban judul tanpa menyatakan sebuah section header kolom terlebih dahulu akan menghentikan kompilasi.
  • Spasi dan Pengindenan: Mesin tata letak pelacakan mengelompokkan kartu berdasarkan tab pengindenan baris. Pastikan semua baris kartu tugas diindensasi secara seragam di bawah tag section tag untuk mencegah terjadinya pergeseran penjajaran.
  • Format Pemisah Metadata: Saat membangun atribut khusus di dalam sebuah @{ } 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.
  • Manajemen Kerapatan Kartu: 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.
Scroll to Top