Memvisualisasikan alur proses di dalam aplikasi web selalu jadi tantangan tersendiri. Pilihan yang ada — React Flow, mxGraph, atau library diagram lain — hampir semuanya mengharuskan kita meninggalkan ekosistem Laravel dan menulis JavaScript yang cukup banyak. Bagi tim yang sudah nyaman dengan Livewire dan Blade, ini terasa seperti overhead yang tidak perlu.
ArtisanFlow hadir sebagai solusi yang tumbuh langsung dari ekosistem itu. Paket ini terdiri dari dua komponen: AlpineFlow sebagai engine flowchart berbasis Alpine.js directive, dan WireFlow sebagai companion Laravel yang membungkusnya dalam Blade component dan Livewire trait. Kita bisa membangun canvas interaktif — lengkap dengan node yang bisa di-drag, edge dengan animasi partikel, dan sinkronisasi real-time — tanpa menulis satu baris JavaScript pun.
Apa Itu ArtisanFlow dan WireFlow
WireFlow adalah bagian Laravel dari ArtisanFlow. Ia menyediakan 12 Blade component yang memetakan langsung ke directive AlpineFlow, trait WithWireFlow dengan lebih dari 50 method manipulasi canvas, dan tiga mode sinkronisasi antara server dan frontend. WireFlow mendukung Laravel 11, 12, dan 13, serta Livewire 3 dan 4.
AlpineFlow sendiri bekerja sepenuhnya lewat directive — tidak ada render function, tidak ada JSX. Arsitektur ini membuat kode yang dihasilkan terasa sangat dekat dengan cara kerja Blade biasa, sehingga kurva belajarnya relatif landai bagi developer yang sudah familiar dengan Alpine.js.
ArtisanFlow saat ini masih dalam status alpha. Cocok untuk eksplorasi dan proyek internal, tapi evaluasi kebutuhan production dengan cermat mengingat API-nya masih bisa berubah.
Instalasi WireFlow di Proyek Laravel
Instalasi dimulai dengan menambahkan paket via Composer, kemudian menjalankan perintah install bawaan yang mengurus semua konfigurasi awal secara otomatis:
BASHcomposer require getartisanflow/wireflow
php artisan wireflow:install
npm run build
Perintah wireflow:install akan mempublikasi config, aset, dan menambahkan import JS/CSS ke file yang tepat. Tidak perlu instalasi npm terpisah karena WireFlow sudah membundle AlpineFlow secara otomatis.
Jangan import Alpine.js secara terpisah di app.js dan jangan panggil Alpine.start() secara manual — Livewire sudah menangani keduanya. Melakukan itu akan menyebabkan konflik inisialisasi Alpine.
Untuk konfigurasi tema (default, flux, atau structural), publikasikan file config:
BASHphp artisan vendor:publish --tag=wireflow-config
File config/wireflow.php yang dihasilkan memungkinkan kita memilih tema tampilan canvas sesuai desain aplikasi.
Membangun Flowchart Pertama dengan Livewire
Skenario yang kita bangun adalah visualisasi alur pengerjaan tiket: dari status Masuk → Diproses → Selesai. Setiap status direpresentasikan sebagai node, dan alur antar status sebagai edge.
Mendefinisikan Node dan Edge di Livewire Component
Buat Livewire component baru, lalu definisikan struktur node dan edge sebagai public property:
PHP// app/Livewire/TicketFlowChart.php
namespace App\Livewire;
use Livewire\Component;
use ArtisanFlow\WireFlow\Concerns\WithWireFlow;
class TicketFlowChart extends Component
{
use WithWireFlow;
public array $stages = [
[
'id' => 'stage-1',
'position' => ['x' => 50, 'y' => 150],
'class' => 'flow-node-info',
'data' => ['label' => 'Masuk'],
],
[
'id' => 'stage-2',
'position' => ['x' => 300, 'y' => 150],
'class' => 'flow-node-primary',
'data' => ['label' => 'Diproses'],
],
[
'id' => 'stage-3',
'position' => ['x' => 550, 'y' => 150],
'class' => 'flow-node-success',
'data' => ['label' => 'Selesai'],
],
];
public array $transitions = [
[
'id' => 'tr-1-2',
'source' => 'stage-1',
'target' => 'stage-2',
'animated' => 'dot',
'particleColor' => '#3b82f6',
],
[
'id' => 'tr-2-3',
'source' => 'stage-2',
'target' => 'stage-3',
'animated' => 'dot',
'particleColor' => '#22c55e',
],
];
public function onStageConnect(string $source, string $target): void
{
$this->transitions[] = [
'id' => "tr-{$source}-{$target}",
'source' => $source,
'target' => $target,
];
}
public function render(): \Illuminate\View\View
{
return view('livewire.ticket-flow-chart');
}
}
Setiap node membutuhkan field id, position (koordinat x dan y), dan data yang minimal berisi label. Field class opsional untuk styling bawaan WireFlow. Edge membutuhkan id, source, dan target yang merujuk ke id node.
Render Canvas dengan Blade Component
Di sisi view, <x-flow> menjadi komponen utama yang menerima data nodes dan edges, serta template node melalui named slot:
BLADE{{-- resources/views/livewire/ticket-flow-chart.blade.php --}}
<div class="w-full h-screen">
<x-flow
:nodes="$stages"
:edges="$transitions"
background="dots"
:controls="true"
:minimap="true"
:fit-view-on-init="true"
:history="true"
@connect="onStageConnect"
>
<x-slot:node>
<x-flow-handle type="target" position="left" />
<span x-text="node.data.label" class="font-medium text-sm px-3 py-1"></span>
<x-flow-handle type="source" position="right" />
</x-slot:node>
</x-flow>
</div>
<x-flow-handle> mendefinisikan titik koneksi node — type="target" untuk titik masuk dan type="source" untuk titik keluar. Di dalam slot, kita bisa menggunakan Alpine expression seperti x-text="node.data.label" untuk mengakses data node secara reaktif.
Sinkronisasi Data antara Server dan Canvas
WireFlow menyediakan tiga mode sinkronisasi yang menentukan bagaimana state canvas berhubungan dengan server.
Mode Entangled untuk Two-Way Binding
Dengan menambahkan :sync="true", setiap perubahan di canvas — baik drag node maupun koneksi baru — otomatis tersinkronisasi ke property Livewire via entangle():
BLADE<x-flow
:nodes="$stages"
:edges="$transitions"
:sync="true"
@connect="onStageConnect"
>
<x-slot:node>
<x-flow-handle type="target" position="left" />
<span x-text="node.data.label"></span>
<x-flow-handle type="source" position="right" />
</x-slot:node>
</x-flow>
Mode ini ideal untuk aplikasi di mana posisi node perlu disimpan ke database setelah user selesai mengedit canvas.
Memanipulasi Canvas dari Server via WithWireFlow
Trait WithWireFlow membuka akses ke method manipulasi canvas yang dieksekusi dari sisi server. Kita bisa menambahkan node baru, melakukan fit view, atau membersihkan canvas tanpa interaksi user:
PHP// Menambahkan stage baru secara programatik
public function addEscalationStage(): void
{
$this->flowAddNodes([
[
'id' => 'stage-escalated',
'position' => ['x' => 300, 'y' => 300],
'class' => 'flow-node-warning',
'data' => ['label' => 'Dieskalasi'],
],
]);
}
// Fit view tanpa trigger re-render
#[\Livewire\Attributes\Renderless]
public function centerCanvas(): void
{
$this->flowFitView();
}
// Bersihkan seluruh canvas
public function clearAll(): void
{
$this->flowClear();
}
Atribut #[Renderless] (tersedia di Livewire 3.3+) berguna untuk method yang hanya memanipulasi canvas tanpa perlu memperbarui template — ini menghindari full re-render yang tidak perlu.
Konfigurasi Canvas dan Tampilan
<x-flow> menerima sejumlah prop untuk mengontrol tampilan dan perilaku canvas. Berikut ringkasan opsi yang sering digunakan:
| Prop | Tipe | Fungsi |
|---|---|---|
background | string | Pola latar: "dots", "lines", "cross", "none" |
controls | bool | Tampilkan tombol zoom dan fit-view |
minimap | bool | Tampilkan panel overview canvas |
fit-view-on-init | bool | Auto-center semua node saat pertama render |
history | bool | Aktifkan undo/redo via Ctrl+Z / Ctrl+Y |
sync | bool | Aktifkan two-way binding via Livewire entangle |
listen | bool | Mode read-only, cocok untuk dashboard pasif |
Untuk node dengan tipe yang berbeda-beda, WireFlow mendukung node types — kita bisa mendefinisikan tampilan berbeda untuk setiap tipe node:
BLADE<x-flow
:nodes="$stages"
:edges="$transitions"
:node-types="[
'decision' => 'flow.nodes.decision-node',
'terminal' => 'flow.nodes.terminal-node',
]"
>
{{-- slot default untuk node tanpa tipe spesifik --}}
<x-slot:node>
<x-flow-handle type="target" position="left" />
<span x-text="node.data.label"></span>
<x-flow-handle type="source" position="right" />
</x-slot:node>
</x-flow>
Setiap node yang memiliki field type sesuai key di node-types akan di-render menggunakan view yang ditentukan. Node tanpa tipe yang cocok akan fallback ke slot default.
Untuk informasi lebih lanjut tentang integrasi Livewire dengan paket frontend, artikel tentang Kenalan dengan Laravel Livewire bisa jadi referensi yang baik untuk memahami fondasi Livewire sebelum bekerja dengan WireFlow.
Yang Perlu Diperhatikan Sebelum Produksi
Beberapa hal penting yang perlu dipertimbangkan saat menggunakan WireFlow:
- Status alpha — API masih bisa berubah antar versi. Pinning versi di
composer.jsonsangat disarankan untuk menghindari breaking changes tak terduga. - Addon terpisah — Fitur seperti layout otomatis (Dagre, Force, Tree), kolaborasi real-time (via Yjs), dan whiteboard memerlukan instalasi npm tambahan. Ini tidak termasuk dalam paket inti.
- Kolaborasi via Reverb — Fitur multi-user editing membutuhkan Laravel Reverb yang sudah dikonfigurasi dan berjalan, plus addon collaboration yang diinstal terpisah.
- Livewire 3.3+ untuk Renderless — Atribut
#[Renderless]membutuhkan Livewire versi minimal 3.3. Untuk versi di bawahnya, gunakan pendekatan event dispatching manual.
Kesimpulan
WireFlow mengisi celah yang selama ini ada di ekosistem Laravel — flowchart engine yang terasa native, bukan sekadar wrapper JavaScript yang diadaptasi. Dengan pendekatan directive-driven dan integrasi Livewire yang mulus, kita bisa membangun visualisasi alur yang interaktif tanpa harus keluar dari dunia Blade. Mengingat statusnya yang masih alpha, langkah terbaik adalah mencobanya untuk proyek internal atau prototype terlebih dahulu sambil mengikuti perkembangan repositori ArtisanFlow di GitHub.
