Pengembang / Diagram

Editor Live Mermaid

Tulis kode Mermaid dan lihat diagramnya saat Anda mengetik: flowchart, diagram urutan, diagram kelas, diagram Gantt, dan diagram pai, dengan opsi download SVG dan PNG.

Editor Live Mermaid: Editor ini menggambar diagram dengan Mermaid, library open-source yang digunakan GitHub, GitLab, dan banyak tool dokumentasi untuk membuat diagram dari teks. Editor berjalan dalam strict mode, sehingga kode dari orang lain tidak dapat menjalankan skrip atau menambahkan click handler. Hasil download SVG tetap tajam pada ukuran apa pun; hasil download PNG dibuat dengan ukuran dua kali lipat dari tampilan di layar, menggunakan latar belakang putih. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori: Tools developer
Dijalankan: Di browser Anda
Biaya: Gratis · tanpa daftar
Ketersediaan: Siap digunakan

Editor diagram MermaidPemrosesan lokal

Berjalan sepenuhnya di browser Anda

flowchart TD
  A[Start] --> B{Is it working?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Debug]
  D --> B

…

Diagram digambar di browser Anda menggunakan Mermaid dalam mode ketat, sehingga kode diagram tidak dapat menjalankan skrip. Tempelkan kode yang sama ke Markdown GitHub, GitLab, atau Notion dalam blok kode mermaid untuk menampilkannya di sana.

Diagram sebagai teks

Diagram yang digambar di program grafis akan cepat usang karena setiap perubahan mengharuskan Anda membuka file itu lagi. Diagram Mermaid terdiri dari beberapa baris teks yang berada di samping kode atau dokumen yang dijelaskannya, berubah dalam commit yang sama, dan tampil sebagai diff yang mudah dibaca saat ditinjau.

Setiap diagram diawali dengan tipenya: flowchart dengan arah seperti TD (atas ke bawah) atau LR (kiri ke kanan), sequenceDiagram, classDiagram, gantt, atau pie. Node ditulis sekali beserta labelnya, A[Start], lalu dirujuk berdasarkan namanya, A --> B.

Mengekspor

SVG menjaga garis dan teks tetap tajam pada ukuran apa pun dan merupakan pilihan yang lebih baik untuk dokumen serta slide; PNG cocok untuk aplikasi chat dan tempat yang tidak menerima SVG. Untuk mengedit SVG hasil ekspor secara manual, buka di SVG editor.

Cara menggunakannya

Mulai dari contoh atau tempel kode Mermaid Anda sendiri.
Edit kodenya; diagram diperbarui saat Anda mengetik, atau pesan error ditampilkan.
Download diagram sebagai SVG atau PNG, atau salin kodenya.

Privasi & batasan

Diagram digambar di browser Anda, dan kode Anda hanya disimpan di browser ini agar tetap tersedia saat Anda menggunakannya lagi.

Alat terkait

Pertanyaan umum

Apa itu Mermaid?

Cara menulis diagram sebagai teks. Baris seperti A --> B akan menggambar dua kotak yang dihubungkan oleh panah, sehingga diagram dapat disimpan dalam file Markdown dan code review, lalu diubah cukup dengan mengedit teks, tanpa tool gambar.

Bagaimana cara menampilkan diagram di GitHub?

Masukkan kode ke dalam blok kode berpagar yang diberi penanda mermaid di file Markdown, issue, atau pull request: tiga backtick, diikuti kata mermaid, kodenya, lalu tiga backtick. GitHub, GitLab, dan Notion akan menggambarnya langsung di tempatnya.

Mengapa diagram saya menampilkan error?

Pesan tersebut menyebutkan baris yang tidak dapat dibaca oleh Mermaid. Penyebab umumnya adalah jenis diagram yang hilang pada baris pertama, seperti flowchart TD, tanda kurung atau tanda kutip yang belum ditutup, serta teks dengan karakter khusus yang perlu diapit tanda kutip.

Jenis diagram apa saja yang didukung?

Semua jenis yang tersedia dalam versi Mermaid yang dimuat editor, termasuk flowchart, diagram urutan, diagram kelas, diagram status, diagram entity-relationship, diagram Gantt, diagram pai, mind map, timeline, dan git graph. Contoh yang tersedia mencakup lima jenis yang paling umum.

Alat gratis · berjalan di browser anda · tanpa perlu akun