Apa Itu Editor Diagram Mermaid?

Editor Diagram Mermaid adalah alat interaktif yang memungkinkan Anda menulis kode diagram menggunakan sintaks Mermaid.js dan melihat hasil yang dirender secara instan. Baik Anda membutuhkan flowchart cepat, diagram urutan terperinci, atau bagan Gantt proyek, Anda dapat membuatnya langsung di browser dengan kode berbasis teks sederhana.

Mermaid adalah bahasa diagram open-source populer yang mengubah teks mirip markdown menjadi diagram profesional. Editor ini menyediakan antarmuka split-pane dengan editor kode di satu sisi dan pratinjau langsung di sisi lain, sehingga Anda dapat melihat perubahan saat Anda mengetik.

Mengapa Mermaid? Diagram berbasis teks dapat dikontrol versi, mudah diperbarui, dan dapat disematkan langsung dalam dokumentasi tanpa file gambar eksternal.

Jenis Diagram yang Didukung

Flowchart

Alur proses, pohon keputusan, dan alur kerja

Diagram Urutan

Interaksi antara sistem atau aktor seiring waktu

Diagram Kelas

Struktur kelas berorientasi objek dan hubungan

Diagram State

Mesin state dan transisi

Diagram ER

Model entity-relationship untuk basis data

Gantt Chart

Garis waktu proyek dan jadwal tugas

Pie Chart

Distribusi data dan proporsi

Mindmap

Brainstorming dan organisasi ide

Git Graph

Visualisasi cabang dan commit

Cara Menggunakan Editor Diagram Mermaid

Memulai

Muat Diagram Contoh

Editor dimuat dengan flowchart contoh. Anda dapat mulai mengeditnya segera atau memilih jenis diagram berbeda dari dropdown Template.

Tulis Kode Anda

Tulis kode Mermaid Anda di panel kiri. Pratinjau diagram diperbarui secara otomatis saat Anda mengetik, memberikan umpan balik visual instan.

Perbaiki Kesalahan

Jika ada kesalahan sintaks, pesan kesalahan muncul di bawah editor untuk membantu Anda mengidentifikasi dan memperbaiki masalah dengan cepat.

Menggunakan Template

Klik tombol Template di toolbar untuk memilih dari 9 template diagram bawaan. Setiap template menyediakan contoh yang berfungsi yang dapat Anda modifikasi sesuai kebutuhan.

Tips Pro: Template adalah cara tercepat untuk mempelajari sintaks Mermaid. Mulai dengan template yang mirip dengan tujuan Anda, kemudian sesuaikan langkah demi langkah.

Mengedit Kode

Indentasi Cerdas

Pintasan keyboard untuk pemformatan kode yang efisien

Tekan Tab untuk menyisipkan indentasi (4 spasi)
Tekan Shift+Tab untuk menghapus indentasi

Nomor Baris & Penyimpanan Otomatis

Pengalaman pengeditan yang ditingkatkan

Nomor baris membantu melacak struktur kode
Kode Anda disimpan secara otomatis dan dipulihkan saat Anda kembali

Kontrol Pratinjau

Gunakan tombol zoom (+/−) atau Ctrl + roda mouse untuk memperbesar antara 25% dan 300%
Klik tombol reset untuk kembali ke zoom 100%
Seret pegangan ubah ukuran antar panel untuk menyesuaikan split editor/pratinjau

Mengekspor Diagram Anda

Ekspor SVG

Mengunduh file vektor yang dapat diskalakan, ideal untuk penggunaan web dan dokumen. Diskalakan ke ukuran apa pun tanpa kehilangan kualitas.

Ekspor PNG

Mengunduh gambar resolusi tinggi (skala 2x) untuk presentasi dan berbagi di layar DPI tinggi.

Salin SVG

Menyalin kode SVG ke clipboard Anda untuk ditempel ke alat lain atau disematkan di halaman web.

Fitur

Pratinjau Langsung

Lihat diagram Anda dirender secara real-time saat Anda mengetik. Pratinjau diperbarui secara otomatis dengan penundaan singkat, sehingga Anda mendapatkan umpan balik visual instan tanpa mengganggu alur kerja Anda.

9 Jenis Diagram

Buat flowchart, diagram urutan, diagram kelas, diagram state, diagram ER, gantt chart, pie chart, mindmap, dan git graph — semuanya dari kode berbasis teks menggunakan sintaks Mermaid.js.

Template Bawaan

Mulai dengan cepat dengan template siap pakai untuk setiap jenis diagram yang didukung. Setiap template mencakup contoh yang berfungsi yang mendemonstrasikan sintaks dan struktur.

Editor Kode dengan Nomor Baris

Editor menampilkan nomor baris, indentasi Tab/Shift+Tab, dan umpan balik kesalahan real-time. Kesalahan sintaks ditampilkan dengan jelas di bawah editor sehingga Anda dapat memperbaiki masalah segera.

Opsi Ekspor Fleksibel

Ekspor diagram selesai Anda sebagai SVG untuk grafis vektor yang dapat diskalakan, atau PNG untuk gambar resolusi tinggi pada skala 2x. Anda juga dapat menyalin kode SVG langsung ke clipboard Anda.

Zoom dan Ubah Ukuran

Perbesar pratinjau dari 25% hingga 300% menggunakan tombol atau Ctrl + roda mouse. Seret pegangan ubah ukuran untuk menyesuaikan ukuran panel editor dan pratinjau sesuai preferensi Anda.

Penyimpanan Otomatis

Kode Anda disimpan secara otomatis ke penyimpanan lokal browser Anda. Saat Anda kembali ke editor, pekerjaan Anda persis di mana Anda meninggalkannya.

Mode Gelap

Editor sepenuhnya mendukung mode gelap. Saat Anda beralih tema, tema diagram Mermaid secara otomatis diperbarui agar sesuai, memastikan diagram Anda selalu terlihat benar.

Data Anda Tetap Pribadi

Semua rendering terjadi di browser Anda

Tidak ada unggahan — Kode Anda tidak pernah meninggalkan perangkat Anda
Tidak ada pelacakan — Kami tidak mengumpulkan data penggunaan

Pertanyaan yang Sering Diajukan

Apa itu Mermaid.js?

Mermaid.js adalah perpustakaan JavaScript open-source yang menghasilkan diagram dan bagan dari definisi berbasis teks. Alih-alih menggambar diagram secara manual, Anda menulis kode sederhana yang mendeskripsikan struktur, dan Mermaid merender sebagai diagram visual.

Pendekatan ini membuat diagram dapat dikontrol versi, mudah diperbarui, dan sempurna untuk disematkan dalam dokumentasi, wiki, dan file markdown.

Jenis diagram apa yang dapat saya buat?

Editor ini mendukung 9 jenis diagram:

Flowchart
Diagram urutan
Diagram kelas
Diagram state
Diagram ER (entity-relationship)
Gantt chart
Pie chart
Mindmap
Git graph

Bagaimana cara mempelajari sintaks Mermaid?

Cara termudah untuk memulai adalah dengan memilih template dari menu dropdown. Setiap template menyediakan contoh yang berfungsi yang dapat Anda pelajari dan modifikasi.

Dokumentasi Mermaid.js juga menyediakan referensi sintaks komprehensif untuk setiap jenis diagram. Mulai dengan contoh sederhana dan secara bertahap tambahkan kompleksitas saat Anda menjadi familiar dengan sintaksnya.

Apa perbedaan antara ekspor SVG dan PNG?

SVG

Format Vektor

Diskalakan ke ukuran apa pun tanpa kehilangan kualitas
Ideal untuk dokumen dan situs web
Dapat diedit dalam perangkat lunak grafis vektor
Ukuran file lebih kecil untuk diagram sederhana

PNG

Gambar Raster

Diekspor pada resolusi 2x untuk tampilan tajam
Cocok untuk presentasi dan berbagi
Bekerja di layar DPI tinggi
Kompatibilitas universal

Apakah kode saya disimpan?

Ya, kode Anda disimpan secara otomatis ke penyimpanan lokal browser Anda. Saat Anda mengunjungi kembali editor, kode terakhir Anda dipulihkan.

Penting: Menghapus data browser Anda juga akan menghapus kode yang disimpan. Untuk diagram penting, ekspor sebagai file SVG atau PNG untuk cadangan.

Mengapa diagram saya menampilkan kesalahan?

Mermaid memiliki aturan sintaks spesifik untuk setiap jenis diagram. Masalah umum meliputi:

Panah yang hilang (misalnya, --> atau --->)
Kata kunci atau deklarasi jenis diagram yang tidak benar
Kurung atau tanda kutip yang tidak cocok
ID node atau karakter khusus yang tidak valid
Indentasi yang tidak tepat dalam jenis diagram tertentu

Periksa pesan kesalahan di bawah editor untuk detail tentang apa yang salah. Pesan biasanya menunjukkan nomor baris dan jenis kesalahan.

Bisakah saya menggunakan ini di mobile?

Ya. Di layar yang lebih kecil, tata letak beralih ke pengaturan vertikal dengan editor di atas dan pratinjau di bawah. Semua fitur tetap tersedia, termasuk template, opsi ekspor, dan kontrol zoom.

Untuk pengalaman terbaik di mobile, kami merekomendasikan menggunakan orientasi lanskap saat bekerja dengan diagram kompleks.