Mermaid Preview
Mermaid Preview — berjalan dalam pelayar. Input tidak disimpan.
Pratonton Mermaid
Masukkan nilai, kemudian tekan Kira.
Hasil render
Merender sintaks Mermaid seperti flowchart dan sequenceDiagram dalam pelayar. Input tidak dihantar ke pelayan.
Cara guna
- Tampal sintaks seperti flowchart atau sequenceDiagram ke Sumber Mermaid. Ada juga contoh placeholder.
- Klik Pratonton. Pertama kali, pustaka mermaid dimuat dari CDN.
- Semak diagram SVG di Hasil render di bawah.
- Jika sintaks salah, mesej ralat muncul. Perbaiki sumber dan pratonton lagi.
- Reset mengembalikan sumber sampel atau mengosongkan kolom.
Konsep utama
Pratonton Mermaid untuk menggambar bagan alir dan diagram urutan sebelum anda commit ke repositori. Memuat dinamis jsDelivr mermaid 10 dan merender SVG dalam pelayar. Sumber tidak dihantar ke pelayan. Sintaks hampir sama dengan GitHub Markdown, tetapi beberapa ekstensi boleh berbeza menurut versi.
Jenis yang didukung mermaid 10, seperti diagram kelas, Gantt, dan ER, umumnya boleh dicoba. Grafik sangat besar boleh membebani pelayar. Pautan gambar luaran atau injeksi HTML boleh dihadi demi keamanan. Guna nomor baris di mesej ralat untuk memperbaiki panah dan ID simpul.
Contoh
Pratonton 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 mesej berurutan waktu muncul. Spasi di id simpul menyebabkan ralat 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 tampal baru agar tidak tercampur keluaran sebelumnya. Di komputer kongsi, kosongkan medan apabila selesai. Menutup tab pelayar juga menghapus yang baru anda tempel; anda tidak perlu menghantar permintaan hapus ke pelayan. Nama butang dan judul medan cocok alat di atas halaman, jadi anda boleh mengikuti artikel ini sambil jalan. Jika hasil kosong, semak dulu medan wajib terisi dan mesej ralat tidak tersembunyi. Artikel ini adalah cara pakai; tidak berarti data masukan disimpan di repositori luaran. Di telefon bimbit, butang salin boleh meminta kebenaran papan keratan — izinkan, lalu ketuk lagi.
Berkaitan: Pratonton Markdown · Pratonton rumus LaTeX
Soalan lazim
Versi apa pratonton Mermaid?
Memuat dinamis jsDelivr mermaid 10.
Adakah sumber disimpan di pelayan?
Tidak. Dirender hanya dalam pelayar.
Mengapa gambar berbeza dari GitHub?
Versi mermaid GitHub dan 10 boleh berbeza. Sederhanakan sintaks dan gambar lagi.
Bisakah saya simpan sebagai PNG?
Skrin ini hasil render SVG. Tidak ada butang muat turun PNG.
Di mana saya melihat ralat sintaks?
Muncul di mesej panduan di bawah hasil render.
Adakah diagram urutan juga berfungsi?
Ya. Contoh flowchart dan sequenceDiagram dijelaskan di petunjuk.
Disemak terakhir: 2026-09-04