Editor Mermaid
Buat diagram alur, diagram urutan, Gantt, dan lainnya dari teks dengan editor Mermaid. Render, perbesar, dan ekspor SVG atau PNG di browser Anda.
Apa itu Mermaid?
Mermaid adalah bahasa pembuatan diagram open source yang memungkinkan Anda membuat diagram dari teks biasa, mirip Markdown. Anda mendeskripsikan node dan koneksi dengan sintaks sederhana, lalu perender menggambar diagramnya secara otomatis.
Jenis diagram apa saja yang didukung?
Editor ini menyediakan contoh diagram alur, urutan, kelas, status, ER, Gantt, lingkaran, peta pikiran, dan garis waktu. Mermaid 11 mendukung banyak varian lain yang bisa diketik manual.
Bagaimana cara membuat diagram?
Pilih contoh dari menu tarik-turun atau ketik kode Anda di editor kiri. Pratinjau dirender ulang sekitar 350 ms setelah berhenti mengetik; jika sintaks tidak valid, panel merah menampilkan pesan kesalahan persisnya sementara diagram lama tetap ada.
Apakah kode saya dikirim ke mana pun?
Tidak. Semuanya dirender lokal di browser Anda dengan JavaScript. Kode tidak pernah meninggalkan perangkat Anda.
Bagaimana mengekspor diagram?
Gunakan Unduh SVG untuk berkas vektor yang dapat diskalakan atau Unduh PNG untuk gambar resolusi dua kali lipat dengan opsi latar transparan. Salin kode menyalin sumber Mermaid ke papan klip.
Mengapa ekspor PNG kadang gagal?
Beberapa fitur Mermaid dirender melalui foreignObject yang mungkin ditolak dirasterisasi oleh browser. Saat itu terjadi, ekspor PNG menampilkan galat, tetapi unduhan SVG selalu berfungsi karena tidak butuh rasterisasi.
Bagaimana cara kerja zoom?
Pratinjau mendukung skala 0,5x hingga 2x. Tombol + dan - melangkah 10%, Sesuaikan mengukur diagram agar pas di area pratinjau, dan 100% mengembalikan ukuran asli.
Bisakah memakai Mermaid di dokumentasi sendiri?
Bisa. GitHub, GitLab, dan banyak alat dokumentasi merender blok Mermaid secara bawaan: bungkus kode dalam blok kode berpagar mermaid dan diagram digambar otomatis.
Apakah editor mendukung mode gelap?
Ya. Diagram mengikuti tema platform: saat antarmuka beralih ke mode gelap, diagram dirender ulang otomatis dengan tema dark Mermaid.
Tips agar diagram mudah dibaca?
Gunakan label node singkat, pilih arah yang sesuai (TD ke bawah atau LR ke samping), pecah graf yang sangat besar menjadi subgraf, dan gunakan contoh bawaan sebagai templat untuk tiap jenis diagram.
Cara Menggunakan Editor Mermaid
Mermaid mengubah teks biasa menjadi diagram alur, diagram urutan, bagan Gantt, dan lainnya. Editor langsung ini merender ulang kode saat Anda mengetik, sepenuhnya di browser — tidak ada yang meninggalkan perangkat Anda.
- Pilih titik awal dari dropdown «Contoh» — sembilan diagram siap pakai mencakup diagram alur, urutan, kelas, status, ER, Gantt, lingkaran, peta pikiran, dan garis waktu; memilih salah satunya memuat kodenya ke editor.
- Edit kode Mermaid di panel kiri; Pratinjau di kanan merender ulang sekitar sepertiga detik setelah Anda berhenti mengetik. Saat kesalahan sintaks muncul di panel merah, diagram valid terakhir tetap terlihat selagi Anda memperbaikinya.
- Zoom antara 50% dan 200% dengan tombol plus dan minus, tekan «Sesuaikan» untuk menskalakan diagram ke kotak pratinjau, atau «100%» untuk kembali ke ukuran asli.
- Centang «Latar belakang transparan» jika ingin PNG tanpa latar putih, lalu tekan «Unduh SVG» atau «Unduh PNG» — PNG diekspor pada resolusi ganda agar tetap tajam saat disematkan.
- Tekan «Salin kode» untuk menaruh sumber Mermaid ke clipboard dan menempelkannya di dokumentasi, wiki, atau repositori.
Bila diagram gagal dirender, jadikan komentar pada baris yang baru Anda ubah untuk mengisolasi kesalahan — pesan galat menyebut baris bermasalah, dan pratinjau menyimpan versi valid terakhir sampai sintaksnya benar kembali.
Alat Terkait
- Kode ke Gambar Ubah cuplikan kode menjadi gambar yang dapat dibagikan dengan sorotan sintaks, tema kustom, dan dekorasi jendela. 100% privasi, semuanya di browser Anda.
- Pratinjau Markdown Editor Markdown online gratis dengan pratinjau langsung. Tulis, render, dan ekspor Markdown dengan dukungan GFM penuh.
- Penampil & Editor SVG Pratinjau, edit dan optimalkan file SVG online. Pratinjau real-time, pengeditan kode dan alat optimasi.
- Penampil pohon JSON Visualisasikan data JSON sebagai pohon interaktif yang dapat dilipat. Cari kunci dan nilai, lacak JSONPath saat hover, dan tangani file besar dengan lazy loading. Mendukung drag & drop file .json.
- Pemeriksa Hash Hitung dan verifikasi hash MD5, SHA-1, SHA-256, SHA-512 secara lokal
- Kalkulator Chmod Kalkulator chmod online gratis untuk memvisualisasikan dan menghitung izin file Linux dengan kotak centang. Konversi instan antara notasi numerik (755, 644) dan simbolik (rwxr-xr-x). Mendukung izin khusus seperti setuid, setgid, sticky bit.
- Tabel ASCII Referensi pengkodean karakter ASCII lengkap dengan kode desimal, heksadesimal, oktal, biner, entitas HTML, dan deskripsi karakter. Cari dan filter secara instan.
- Penampil Hex Lihat konten file dalam format hex dump dengan pencarian, navigasi offset, dan pengguliran virtual