Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Pengatur Diagram Mermaid

PengembangGambarTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Pengatur Diagram Mermaid

Salin kode mermaid.js dan segera lihat diagram interaktif yang bisa Anda salin atau unduh. Mendukung flowchart, diagram urutan, grafik Gantt, diagram lingkaran, diagram kelas, dan lainnya — semua di-render di sisi klien di browser Anda, tanpa server, akun, atau instalasi yang diperlukan.

Mermaid sangat baik untuk "diagram sebagai kode": diagram Anda berada di sekitar proyek Anda sebagai teks biasa, tetapi manusia membutuhkan renderer untuk melihat gambar. Alat ini mengisi celah tersebut — masukkan potongan mermaid apa pun, ubah tema, dan ekspor hasilnya sebagai SVG atau PNG.

Cara Penggunaan

Salin kode mermaid Anda ke editor — atau klik Flowchart, Urutan, Gantt, Pie, atau Kelas untuk memuat contoh awal.
Pilih sebuah tema (Default, Gelap, Hutan, Netral, Basis) dan sebuah latar belakang (Transparan, Putih, Abu-abu terang, Gelap) untuk sesuai dengan presentasi atau dokumen Anda.
Perhatikan diagram diperbarui secara langsung saat Anda mengetik. Jika sintaks Anda salah, Anda akan melihat pesan kesalahan mermaid yang tepat di bawah pratinjau.
Saat terlihat benar, klik Unduh SVG untuk mendapatkan vektor yang dapat diperbesar secara sempurna, Unduh PNG untuk screenshot raster, atau Menyalin untuk mengambil sumber SVG untuk disisipkan.

Fitur

Pratinjau langsung – diagram diperbarui saat Anda mengedit, dengan penundaan (debounce) agar diagram besar tetap lancar.
Semua jenis diagram utama mermaid – flowchart, urutan, Gantt, lingkaran, kelas, ER, state, perjalanan, dan semua sintaks lain yang didukung mermaid v11.
5 tema bawaan – Default, Gelap, Hutan, Netral, dan Basis, ditambah latar belakang pratinjau yang dapat dikonfigurasi untuk transparan, putih, abu-abu, atau gelap.
Ekspor SVG dan PNG – unduh SVG vektor yang tajam atau PNG skala 2x tanpa meninggalkan halaman.
Sumber SVG siap disalin – ambil markup asli untuk disalin ke README, dokumen, atau halaman web.
Laporan kesalahan langsung – kesalahan sintaks mermaid ditampilkan secara jelas sehingga Anda bisa memperbaikinya dalam hitungan detik.
Privasi pertama – semua berjalan di browser Anda. Diagram tidak pernah menyentuh server kami.

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu mermaid.js?

Mermaid adalah perpustakaan JavaScript terbuka yang mengubah definisi diagram teks menjadi diagram SVG. Ini dibuat agar insinyur, penulis teknis, dan tim produk dapat menyimpan diagram di bawah kontrol versi bersama kode mereka, bukan menyimpan file biner di alat desain terpisah. Mermaid mendukung banyak jenis diagram secara langsung, dari flowchart sederhana hingga diagram hubungan entitas dan grafik Gantt.
Mengapa menggunakan diagram sebagai kode daripada aplikasi gambar?

Diagram yang ditulis dalam teks berada di repositori Anda, berubah secara jelas dalam permintaan pull, dan diperbarui secara langsung saat ide-ide dasarnya berubah. Mereka dapat dicari, dijalankan sebagai skrip, dan tidak pernah terpisah dari kodebase seperti screenshot di wiki. Alat gambar visual sangat baik untuk presentasi satu kali, tetapi untuk dokumentasi yang hidup, format berbasis teks jauh lebih baik dalam berkembang bersama tim Anda.
Apa perbedaan antara SVG dan PNG saat mengunduh diagram?

SVG adalah format vektor — menyimpan bentuk dan teks sebagai matematika, sehingga tetap tajam pada ukuran apa pun dan ukuran file kecil untuk diagram biasa. PNG adalah format raster yang menyimpan grid piksel tetap, yang membuatnya pilihan aman untuk alat yang tidak mendukung SVG (presentasi lama, beberapa aplikasi chat, platform hanya gambar). Untuk dokumen, halaman web, dan alat presentasi modern, SVG hampir selalu pilihan terbaik.
Bagaimana tema mermaid memengaruhi rendering?

Tema mermaid adalah himpunan aturan warna dan tata letak default yang diterapkan pada diagram yang di-render. Tema Default bersifat cerah dan cocok untuk latar belakang terang, tema Gelap membalikkan warna untuk antarmuka gelap, tema Hutan menggunakan nuansa hijau, tema Netral berwarna abu-abu, dan tema Basis adalah dasar yang bisa diatur dengan variabel tema. Perubahan tema hanya mengubah tampilan SVG — struktur diagram dasar tetap sama.
Apakah rendering dilakukan secara lokal atau di server?

Rendering terjadi sepenuhnya di browser menggunakan mesin JavaScript mermaid. Tidak ada yang diunggah, dikirim ke server, atau disimpan secara jarak jauh. Ini menjaga diagram arsitektur pribadi tetap aman dan berarti alat ini tetap berfungsi bahkan saat koneksi jaringan lambat atau offline.