Mermaid Preview
Mermaid Preview — berjalan di browser. Input tidak disimpan.
Pratinjau Mermaid
Masukkan nilai, lalu tekan Hitung.
Hasil render
Merender sintaks Mermaid seperti flowchart dan sequenceDiagram di browser. Input tidak dikirim ke server.
Cara menggunakan
- Tempel sintaks seperti flowchart atau sequenceDiagram ke Sumber Mermaid. Ada juga contoh placeholder.
- Klik Pratinjau. Pertama kali, pustaka mermaid dimuat dari CDN.
- Cek diagram SVG di Hasil render di bawah.
- Jika sintaks salah, pesan galat muncul. Perbaiki sumber dan pratinjau lagi.
- Reset mengembalikan sumber sampel atau mengosongkan kolom.
Konsep utama
Pratinjau Mermaid untuk menggambar bagan alir dan diagram urutan sebelum Anda commit ke repositori. Memuat dinamis jsDelivr mermaid 10 dan merender SVG di browser. Sumber tidak dikirim ke server. Sintaks hampir sama dengan GitHub Markdown, tetapi beberapa ekstensi bisa berbeda menurut versi.
Jenis yang didukung mermaid 10, seperti diagram kelas, Gantt, dan ER, umumnya bisa dicoba. Grafik sangat besar bisa membebani browser. Tautan gambar eksternal atau injeksi HTML bisa dibatasi demi keamanan. Pakai nomor baris di pesan galat untuk memperbaiki panah dan ID simpul.
Contoh
Pratinjau sampel flowchart TD di mana A mulai pergi ke kondisi B, Ya selesai, dan Tidak coba lagi, dan kotak serta belah ketupat digambar. Tulis peserta dan panah sebagai sequenceDiagram dan pesan berurutan waktu muncul. Spasi di id simpul menyebabkan galat sintaks, jadi pisah id Inggris dan label kurung. Diagram urutan tetap lebih pendek jika Anda kumpulkan deklarasi peserta di atas. Saat menaruhnya di dokumen, salin hanya sumber yang berhasil dirender untuk mengurangi kesenjangan versi. Jika Anda mencoba masukan yang sama beberapa kali, reset lalu tempel baru agar tidak tercampur keluaran sebelumnya. Di komputer bersama, kosongkan kolom saat selesai. Menutup tab browser juga menghapus yang baru Anda tempel; Anda tidak perlu mengirim permintaan hapus ke server. Nama tombol dan judul kolom cocok alat di atas halaman, jadi Anda bisa mengikuti artikel ini sambil jalan. Jika hasil kosong, cek dulu kolom wajib terisi dan pesan galat tidak tersembunyi. Artikel ini adalah cara pakai; tidak berarti data masukan disimpan di repositori eksternal. Di ponsel, tombol salin bisa meminta izin papan klip — izinkan, lalu ketuk lagi.
Terkait: Pratinjau Markdown · Pratinjau rumus LaTeX
Pertanyaan umum
Versi apa pratinjau Mermaid?
Memuat dinamis jsDelivr mermaid 10.
Apakah sumber disimpan di server?
Tidak. Dirender hanya di browser.
Mengapa gambar berbeda dari GitHub?
Versi mermaid GitHub dan 10 bisa berbeda. Sederhanakan sintaks dan gambar lagi.
Bisakah saya simpan sebagai PNG?
Layar ini hasil render SVG. Tidak ada tombol unduh PNG.
Di mana saya melihat galat sintaks?
Muncul di pesan panduan di bawah hasil render.
Apakah diagram urutan juga berfungsi?
Ya. Contoh flowchart dan sequenceDiagram dijelaskan di petunjuk.
Terakhir ditinjau: 2026-09-04