Editor diagram Mermaid
Ketik Mermaid di satu sisi dan diagramnya tergambar di sisi lain seiring Anda menulis. Kesalahan ditandai di barisnya sendiri, sementara versi terakhir yang berhasil tetap tampil di layar. Semuanya berjalan di tab peramban ini.
Cara kerjanya
Mermaid adalah cara menulis diagram sebagai teks. Beberapa baris seperti “A --> B” menjadi diagram alir, diagram urutan, diagram kelas atau basis data, bagan Gantt, atau peta pikiran. GitHub, GitLab, Notion, dan sebagian besar alat dokumentasi menggambarnya langsung di tempat, itulah sebabnya diagram di README dan dokumentasi begitu sering ditulis dengan Mermaid. Yang tidak mereka sediakan adalah tempat yang enak untuk menulisnya.
Editor ini menggambar diagramnya selagi Anda mengetik. Kalau ada baris yang salah, baris itu digarisbawahi dan pesannya menyebut apa yang diharapkan Mermaid, sementara versi terakhir yang berhasil tetap tampil di layar dalam warna redup, jadi gambarnya tidak hilang setiap kali Anda baru setengah jalan mengetik sebuah panah. Diagram besar bisa diseret dan diperbesar.
Kalau sudah terlihat pas, simpan sebagai SVG, atau sebagai PNG yang ukurannya disesuaikan dengan tujuannya: dokumen, slide, atau halaman cetak. Anda juga bisa langsung menyalinnya ke clipboard. Draf Anda disimpan di peramban ini dari kunjungan ke kunjungan, dan tautan berbagi membawa diagram di dalam tautan itu sendiri, jadi tidak ada apa pun tentangnya yang pernah disimpan di server.
Cara memakainya
- 1 Ketik atau tempel Mermaid, buka berkas .mmd atau Markdown, atau mulai dari contoh.
- 2 Perhatikan pratinjaunya. Kalau ada baris yang digarisbawahi, perbaiki; pesannya menyebut apa yang diharapkan Mermaid.
- 3 Pilih tampilan, lalu seret atau perbesar pratinjau untuk memeriksa detailnya.
- 4 Unduh SVG atau PNG, salin gambarnya, atau salin tautan untuk membagikan diagram.
Perlu diketahui
- Membuka berkas Markdown akan membuka blok ```mermaid pertamanya, jadi diagram di README bisa disunting tersendiri.
- Memilih contoh akan mengganti isi editor, dan Ctrl+Z mengembalikan diagram Anda.
- SVG tetap tajam di ukuran berapa pun dan cocok dipakai di web. PNG adalah yang paling andal diterima slide, aplikasi chat, dan pengolah kata.
- Tema yang diatur di dalam diagram dengan baris %%{init}%% mengalahkan pengaturan Tampilan.
- Tidak ada yang diunggah. Diagram digambar di tab ini, dan tautan berbagi menyimpannya di bagian alamat yang tidak pernah dikirim peramban ke server.
Dukungan peramban
- Chrome 94 ke atas
- Firefox 93 ke atas · kecepatan penuh sejak 113
- Safari 16.4 ke atas
- Edge 94 ke atas
Ini versi paling lama yang punya semua yang dipakai alat ini. Angkanya dihitung dari alatnya sendiri, jadi ikut berubah kalau alatnya berubah.
Nomor versi diperiksa pada 2026-09-04.
Pertanyaan yang sering diajukan
Apakah diagram saya diunggah ke suatu tempat?
Tidak. Mermaid berjalan di dalam tab peramban ini, dan draf Anda hanya disimpan di peramban ini. Anda bisa memastikannya di peralatan pengembang peramban, pada tab Network: mengetik tidak mengirim apa pun.
Bagaimana tautan berbagi bekerja tanpa server?
Diagram dikompresi lalu ditulis ke bagian tautan setelah tanda #. Peramban tidak pernah mengirim bagian itu ke situs web, jadi tautannya membuka diagram di perangkat siapa pun tanpa situsnya sendiri pernah menerimanya. Diagram yang panjang menghasilkan tautan yang panjang.
Jenis diagram apa saja yang didukung?
Semua yang digambar Mermaid 12: diagram alir, diagram urutan, kelas, status, dan hubungan entitas, bagan Gantt, diagram lingkaran, peta pikiran, linimasa, perjalanan pengguna, grafik Git, bagan kuadran, bagan Sankey dan XY, serta diagram block, packet, architecture, kanban, radar, dan treemap yang lebih baru.
Kenapa ada baris yang digarisbawahi?
Di situlah Mermaid berhenti memahami diagramnya. Pesan di sampingnya adalah pesan Mermaid sendiri, yang menyebut apa yang ia harapkan ditemukan. Sering kali kesalahan sebenarnya ada tepat sebelumnya, misalnya kurung atau tanda kutip yang tidak pernah ditutup.
Berapa ukuran PNG yang akan saya dapat?
Tergantung untuk apa. Untuk dokumen, dua kali ukuran diagram saat digambar, yang tetap tajam di layar berkerapatan tinggi. Untuk slide, sebesar yang muat di layar 4K. Untuk cetak, sebesar yang muat di A4 pada 300 dpi. Tombolnya menunjukkan ukuran piksel yang pasti sebelum Anda mengunduh.
Bisakah saya menyunting diagram dari README saya?
Bisa. Buka berkas Markdown-nya dan blok Mermaid pertama di dalamnya terbuka di editor. Setelah selesai, salin teksnya kembali ke berkas.
Amankah membuka diagram yang dikirim orang lain?
Diagram digambar dalam mode ketat Mermaid. Apa pun yang bisa menjalankan kode dihapus, dan baris di dalam diagram tidak bisa mematikan mode itu.
Alat terkait
File Anda diproses di perangkat Anda dan tidak diunggah. Anda bisa memverifikasinya di alat pengembang browser Anda, pada tab Network.