Sebagian besar diagram teknis dibuat menggunakan salah satu dari dua ekstrem: mesin auto-layout atau alat pemosisian absolut. Alat auto-layout seperti Mermaid, Graphviz, dan D2 memungkinkan Anda mendeklarasikan entitas dan koneksi, tetapi perangkat lunaklah yang menentukan di mana posisi mereka [1]. Sebaliknya, alat seperti Figma, Excalidraw, dan draw.io menawarkan kontrol total atas penempatan, tetapi setiap pengeditan pada diagram yang kompleks memerlukan pemindahan elemen secara manual yang lambat [1].
Reladraw memperkenalkan jalan tengah. Ini adalah bahasa teks untuk diagram di mana Anda mendeskripsikan posisi sesuatu menggunakan istilah relatif, bukan koordinat [1]. Alih-alih menebak bagaimana algoritma akan merender sebuah alur atau menyeret kotak secara manual di atas kanvas, Anda menyatakan pengaturannya dalam bahasa sederhana [S1, S3].
Cara Kerja Penempatan Relatif
Dalam reladraw, setiap posisi dinyatakan relatif terhadap elemen lain [1]. Tidak ada koordinat dalam bentuk apa pun di dalam bahasa ini [3]. Sebagai gantinya, Anda menggunakan pernyataan arah untuk mengikat node satu sama lain [2].
Sebagai contoh, sebuah node dapat ditempatkan above (di atas), below (di bawah), left of (di kiri), atau right of (di kanan) node lainnya [2]. Anda juga dapat menggunakan kombinasi arah, seperti above-left of, atau menggunakan level with untuk memastikan dua elemen berbagi garis tengah yang sama [2]. Untuk menangani pengelompokan yang lebih kompleks, Anda dapat menempatkan elemen right of A and B, yang akan menyelaraskannya terhadap kotak yang membungkus kedua elemen tersebut [2].
Jarak dalam reladraw dikelola sebagai celah minimum (minimum gaps) daripada pengukuran eksak [3]. Celah tidak pernah berupa angka pasti; sebaliknya, elemen-elemen akan berada sedekat mungkin sesuai dengan pernyataan yang diberikan [3]. Jika Anda menempatkan node between (di antara) dua node lainnya, node tersebut akan mendorong keduanya sejauh yang diperlukan agar pas [3]. Jika node tengah tersebut dihapus, elemen yang tersisa akan merapat kembali secara otomatis [3].
Meningkatkan Pembuatan Diagram oleh Agen AI
Alat diagram tradisional menciptakan “titik buta” bagi agen AI. Ketika agen menghasilkan kode Mermaid, ia hanya menebak tata letak yang nantinya akan ditentukan oleh algoritma [1]. Agen tidak dapat melihat hasil SVG-nya, yang berarti ia harus merender gambar dan melihatnya untuk menemukan kesalahan, sehingga menciptakan proses bolak-balik yang lambat [3].
Dengan alat berbasis piksel, masalahnya berbeda. Agen harus membangun ulang seluruh gambar dari daftar angka sebelum dapat memutuskan koordinat mana yang harus diubah untuk memindahkan satu layanan saja [1].
Reladraw menyelesaikan hal ini dengan memasukkan pengaturan tata letak langsung ke dalam file sumber dalam bentuk kalimat [1]. Ini memungkinkan agen untuk:
- Mengonfirmasi maksud dengan membaca ulang sumber untuk memverifikasi bahwa database berada
under(di bawah) API [S1, S3]. - Mengubah gambar hanya dengan mengedit kalimat yang menentukan posisi [1].
- Menghindari kebutuhan untuk menginterpretasikan sistem koordinat yang kompleks [1].
Namun, karena alat ini menyelesaikan render akhir dari pernyataan-pernyataan tersebut, agen tidak dapat mengonfirmasi hasil tertentu hanya melalui teks [3]. Agen tidak dapat mengetahui jika string teks yang panjang meluap dari node-nya atau jika dua klaster yang tertambat secara independen saling tumpang tindih tanpa render visual atau laporan diagnostik [3].
Sintaks dan Implementasi
Reladraw menggunakan format sederhana, satu pernyataan per baris, tanpa nesting atau indentasi yang signifikan [3]. Hal ini memastikan bahwa tidak ada satu baris pun yang bergantung pada posisi baris lainnya [1].
Elemen sintaks utama meliputi:
- Nodes: Didefinisikan sebagai
node name "text"[2]. Nama dengan titik (misalnya,server.docker) menunjukkan node anak, asalkan induknya dideklarasikan terlebih dahulu [2]. - Edges: Koneksi didefinisikan menggunakan panah, seperti
edge a -> b[2]. Anda dapat menentukan kelengkungan garis menggunakanfrom: right to: left[2]. - Styling: Tampilan dikelola melalui kata kunci
styleatau di dalam kurung setelah teks, memungkinkan warna, ukuran, dan bentuk kustom sepertirectangle,document, ataudatabase[2].
Untuk menggunakan reladraw, Anda dapat menulis file .reladraw dan merendernya menjadi SVG mandiri menggunakan perintah reladraw diagram.reladraw -o diagram.svg [3]. Bagi mereka yang menggunakan asisten AI seperti Claude Code, Cursor, atau Copilot, skill agen khusus dapat diinstal melalui npx skills add reladraw/reladraw -g untuk mengajarkan sintaks bahasa tersebut kepada model [1].
Jika Anda ingin bereksperimen dengan bahasa ini tanpa menginstal apa pun, Anda dapat mencoba reladraw playground di browser Anda untuk melihat tata letak terupdate secara real-time saat Anda mengedit sumbernya [S1, S2].
