Tempel Mermaid. Lihat diagramnya. Seketika.

Tempel Mermaid, pratinjau instan, ekspor SVG/PNG, unggah file, seret untuk menggeser, dan bagikan lewat URL.

Template cepat
Buka file MermaidLetakkan di mana saja — .mmd · .mermaid · .md · .txt · Cara membuka berkas .mmd
Memuat Mermaid...Brs 1, Kol 1
Tip: di pratinjau, klik-dan-seret (atau sentuh-seret) untuk menggeser. Jatuhkan file ke pratinjau untuk memuatnya.

Apa itu Mermaid?

Mermaid adalah alat diagram dan charting berbasis JavaScript yang menggunakan definisi teks terinspirasi Markdown untuk membuat dan memodifikasi diagram secara dinamis. Ini adalah proyek open-source yang memungkinkan Anda menghasilkan diagram dari deskripsi teks sederhana.

Alih-alih menggunakan alat gambar yang kompleks, Anda menulis sintaks mirip kode yang menggambarkan diagram Anda, dan Mermaid merendernya sebagai diagram visual. Pendekatan ini membuat diagram dapat dikontrol versinya, mudah diperbarui, dan sempurna untuk dokumentasi.

Mermaid terintegrasi mulus dengan platform dokumentasi, wiki, dan file Markdown, menjadikannya alat favorit di antara pengembang dan penulis teknis.

Mengapa menggunakan Mermaid?

  • Kontrol versi: diagram adalah file teks sehingga dapat dilacak di Git bersama kode Anda
  • Pembaruan cepat: ubah beberapa baris teks alih-alih menggambar ulang seluruh diagram
  • Konsistensi: Mermaid menangani tata letak dan gaya secara otomatis, memastikan diagram yang konsisten
  • Tanpa alat desain: tidak perlu Visio, Lucidchart, atau alat mahal lainnya
  • Dokumentasi sebagai kode: simpan diagram di repositori yang sama dengan dokumentasi Anda
  • Lintas platform: berjalan di browser dan Node.js serta terintegrasi dengan banyak platform
  • Gratis dan open source: tanpa biaya lisensi, komunitas aktif
  • Berbagai jenis diagram: mendukung flowchart, diagram sekuens, diagram kelas, dan lainnya

Diagram Alir

Buat flowchart profesional menggunakan sintaks berbasis teks yang sederhana. Pratinjau instan, ekspor ke SVG/PNG, dan bagikan melalui URL - semuanya gratis.

Diagram Sekuensial

Desain diagram sekuensial UML untuk memvisualisasikan interaksi antara komponen sistem. Sempurna untuk dokumentasi API dan desain sistem.

Diagram Gantt

Rencanakan dan visualisasikan timeline proyek dengan gantt chart. Lacak tugas, dependensi, dan milestone menggunakan sintaks teks sederhana.

Diagram Kelas

Desain sistem berorientasi objek dengan diagram kelas UML. Definisikan kelas, atribut, metode, dan relasi menggunakan teks sederhana.

Diagram State

Visualisasikan state machine dan perilaku sistem dengan diagram state. Modelkan state, transisi, dan event menggunakan teks sederhana.

Diagram ER

Desain skema database dengan diagram entitas-relasi. Definisikan entitas, atribut, dan relasi menggunakan sintaks teks sederhana.

Iklan

Panduan Lengkap Diagram Mermaid

Pelajari cara membuat diagram profesional dengan sintaks sederhana berbasis teks

Pertanyaan yang Sering Diajukan

Pertanyaan umum tentang penggunaan Mermaid Viewer dan pembuatan diagram

Apakah editor Mermaid ini benar-benar gratis?
Ya, sepenuhnya gratis. Anda bisa membuat diagram tanpa batas, ekspor ke SVG/PNG, berbagi lewat URL, dan memakai semua fitur tanpa daftar atau pembayaran. Alat ini didukung iklan yang tidak mengganggu.
Apakah saya perlu instal apa pun?
Tidak perlu instal apa pun. Ini adalah alat berbasis web yang berjalan sepenuhnya di browser. Cukup buka situsnya dan langsung mulai membuat diagram di desktop, tablet, atau ponsel.
Bagaimana cara menyimpan diagram?
Ada beberapa cara menyimpan: 1) ekspor sebagai SVG atau PNG, 2) bagikan lewat URL (kode diagram tersimpan di URL), 3) salin kode Mermaid ke file Anda sendiri, 4) unggah/unduh file .mmd atau .mermaid.
Bisakah diagram dipakai di dokumentasi?
Tentu. Ekspor diagram sebagai SVG (skalabel) atau PNG lalu gunakan di dokumentasi, presentasi, atau situs web. Anda juga bisa menyematkan kode Mermaid langsung di platform seperti GitHub, GitLab, atau Notion.
Apa bedanya SVG dan PNG?
SVG adalah format vektor, tetap tajam di ukuran apa pun, dan ideal untuk web/dokumentasi. PNG adalah format raster, bagus untuk berbagi cepat tetapi kualitasnya turun saat diubah ukurannya.
Kenapa diagram saya tidak ter-render?
Periksa kesalahan sintaks pada kode Mermaid Anda. Masalah umum: tanda kutip tidak tertutup, titik dua/titik koma hilang, ID node salah, atau sintaks yang tidak didukung. Sederhanakan diagram untuk menemukan sumber masalah.
Bisakah saya berkolaborasi dengan orang lain?
Kolaborasi real-time belum tersedia, tetapi Anda bisa berbagi diagram dengan mudah lewat URL. Orang lain bisa membuka, mengedit, lalu membagikan kembali versinya. Karena berbasis teks, Mermaid juga cocok untuk Git.
Apakah bisa dipakai offline?
Pemuatan pertama membutuhkan koneksi internet. Setelah dimuat, fitur edit dasar sering tetap bisa dipakai offline. Namun beberapa fitur seperti ekspor mungkin tetap memerlukan koneksi.
Bagaimana belajar sintaks Mermaid?
Mulailah dari panduan Mermaid lengkap kami yang mencakup semua jenis diagram beserta contoh. Gunakan panel template untuk mulai lebih cepat, lalu lengkapi dengan dokumentasi resmi di mermaid.js.org.
Bisakah saya menyesuaikan tampilannya?
Ya. Diagram mengikuti tema situs: beralih antara terang dan gelap dengan tombol Tema di bilah atas, dan diagram akan dirender ulang dengan tema Mermaid yang sesuai. Untuk kustomisasi lanjutan, gunakan directive %%{init:...}%% untuk mengatur warna, font, dan properti visual lainnya.
Jenis diagram apa saja yang didukung?
Editor ini mendukung jenis diagram Mermaid utama: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Git Graph, User Journey, dan lainnya.
Apakah data diagram saya privat?
Kode diagram Anda tidak dikirim ke server kami. Seluruh proses render terjadi di browser Anda. Saat berbagi lewat URL, kodenya ada di URL itu sendiri; kami tidak menyimpan atau melacak isi diagram Anda.
Mengapa memakai diagram berbasis teks?
Diagram berbasis teks punya banyak keunggulan: bisa version control (ideal untuk Git), cepat diperbarui, gaya konsisten, mudah dicari, ringan, dan bisa dibuat secara programatis. Diagram juga lebih mudah direview di pull request.
Bisakah Mermaid disematkan ke website?
Ya. Anda bisa menambahkan library JavaScript Mermaid ke situs web Anda lalu menulis blok kode Mermaid. Banyak platform sudah mendukung Mermaid secara native, termasuk GitHub, GitLab, Notion, dan Obsidian.
Berapa ukuran diagram maksimum yang disarankan?
Tidak ada batas keras, tetapi diagram yang sangat besar (lebih dari ~100 node) bisa dirender lebih lambat tergantung perangkat. Untuk sistem kompleks, sebaiknya dipecah menjadi beberapa diagram kecil yang fokus.