Editor Mermaid Online dengan Pratinjau & Ekspor Diagram

Editor Mermaid Langsung dengan Pratinjau Diagram Seketika

Editor Mermaid langsung ini memungkinkan Anda menulis diagram sebagai teks biasa menggunakan sintaks Mermaid.js dan melihatnya dirender begitu Anda mengetik. Tata letak dua panel menaruh kode Anda di satu sisi dan pratinjau langsung di sisi lainnya, sehingga Anda berpindah dari ide ke diagram jadi tanpa pernah meninggalkan halaman.

Alat ini dibuat untuk pengembang, penulis teknis, dan siapa saja yang lebih suka mendeskripsikan diagram lewat kode daripada menyeret kotak satu per satu. Pilih dari sembilan jenis diagram — flowchart, sekuens, kelas, status, ER, Gantt, lingkaran, peta pikiran, dan git graph — lalu ekspor hasilnya sebagai SVG atau PNG yang tajam.

Privat sejak awal: pustaka Mermaid berjalan sepenuhnya di peramban Anda. Kode diagram Anda dirender, disimpan, dan diekspor secara lokal — tidak ada yang pernah diunggah ke server.

Cara Menggunakan Editor Mermaid

Pilih titik awal

Editor terbuka dengan contoh flowchart. Lanjutkan mengeditnya, atau buka menu Templat dan pilih salah satu dari sembilan diagram siap pakai sebagai awalan.

Tulis kode Anda

Ketik sintaks Mermaid di panel kiri. Nomor baris mengikuti struktur Anda, dan Tab / Shift+Tab menambah atau menghapus indentasi empat spasi sambil Anda mengetik.

Amati pratinjau langsung

Pratinjau dirender ulang otomatis sesaat setelah Anda berhenti mengetik. Jika sintaks keliru, pesan kesalahan yang jelas muncul di bawah editor agar Anda bisa memperbaikinya.

Ekspor atau salin

Unduh diagram sebagai SVG atau PNG, atau salin markup SVG langsung ke papan klip untuk ditempel ke dokumen atau alat lain.

Fitur

Pratinjau Langsung

Diagram Anda dirender ulang otomatis saat mengetik, memberi umpan balik visual seketika dengan Mermaid.js.

9 Jenis Diagram

Buat diagram flowchart, sekuens, kelas, status, ER, Gantt, lingkaran, peta pikiran, dan git graph dari teks.

Templat Bawaan

Mulai cepat dengan contoh yang berfungsi untuk setiap jenis diagram, lalu sesuaikan sintaksnya.

Editor Kode dengan Nomor Baris

Nomor baris plus indentasi Tab dan Shift+Tab menjaga kode diagram banyak baris tetap rapi dan terbaca.

Tampilan Kesalahan Waktu Nyata

Masalah sintaks ditampilkan dengan jelas di bawah editor sehingga Anda tahu persis apa yang harus diperbaiki.

Ekspor SVG & PNG

Simpan SVG yang skalabel untuk web dan dokumen, atau PNG resolusi tinggi yang dirender pada skala 2x.

Salin SVG ke Papan Klip

Salin markup SVG yang dirender dengan satu klik untuk langsung ditempel ke aplikasi atau basis kode lain.

Zoom 25% hingga 300%

Perbesar pratinjau dengan tombol +/− atau Ctrl + roda mouse, dan atur ulang ke 100% kapan saja.

Dua Panel yang Dapat Diatur

Seret pemisah untuk menyeimbangkan ulang editor dan pratinjau, dengan tata letak bertumpuk di layar kecil.

Simpan Otomatis

Kode Anda disimpan ke peramban secara otomatis dan dipulihkan tepat di tempat Anda berhenti.

Mode Gelap

Ganti tema dan tema diagram Mermaid ikut mengikuti, sehingga diagram selalu cocok dengan halaman.

Sepenuhnya di Sisi Peramban

Semua render berlangsung di peramban Anda — tanpa unggahan, tanpa akun, dan tanpa pelacakan kode Anda.

Pertanyaan yang Sering Diajukan

Apa itu diagram Mermaid?

Mermaid adalah pustaka JavaScript sumber terbuka yang mengubah definisi berbasis teks menjadi diagram. Alih-alih menggambar bentuk satu per satu, Anda menulis deskripsi struktur yang ringkas mirip markdown dan Mermaid merendernya menjadi diagram visual yang jadi.

Bagaimana cara menulis sintaks Mermaid?

Cara tercepat untuk belajar adalah membuka menu Templat dan memuat contoh yang berfungsi untuk jenis diagram yang Anda inginkan. Pelajari cara penulisan simpul, panah, dan label, lalu edit kodenya dan amati pratinjau langsung diperbarui. Setiap jenis diagram — flowchart, sekuens, kelas, dan seterusnya — punya kata kunci sederhana sendiri untuk baris pertamanya.

Jenis diagram apa saja yang didukung editor ini?

Sembilan jenis total: flowchart, diagram sekuens, diagram kelas, diagram status, diagram ER (entity-relationship), bagan Gantt, diagram lingkaran, peta pikiran, dan git graph. Masing-masing punya templat bawaan yang cocok sebagai awalan.

Bagaimana cara mengekspor diagram Mermaid ke PNG atau SVG?

Gunakan tombol di bilah alat. SVG mengunduh berkas vektor skalabel yang tetap tajam pada ukuran berapa pun — ideal untuk dokumen dan web. PNG mengunduh gambar raster yang dirender pada skala 2x agar tampak tajam di layar ber-DPI tinggi. Anda juga bisa Salin SVG untuk menempelkan markup di tempat lain.

Apakah kode saya tersimpan jika menutup tab?

Ya. Kode Anda tersimpan otomatis ke penyimpanan lokal peramban dan dipulihkan saat Anda kembali. Perlu diingat, menghapus data peramban juga akan menghapus kode tersimpan, karena kode itu hanya ada di perangkat Anda.

Mengapa diagram saya menampilkan kesalahan sintaks?

Setiap jenis diagram Mermaid punya aturan sintaks sendiri. Kesalahan umum adalah panah yang hilang (-->), kata kunci pembuka yang salah, atau kurung yang tidak berpasangan. Baca pesan kesalahan yang ditampilkan di bawah editor — ia menunjuk ke baris atau token yang perlu diperhatikan.

Bisakah saya menggunakan editor ini di ponsel?

Bisa. Pada layar sempit tata letak bertumpuk vertikal, dengan editor di atas dan pratinjau di bawah, dan Anda bisa menyeret pemisah untuk mengatur tingginya. Semua fitur tetap tersedia.