Langsung ke konten utama
LibraTool logoLibraTool

Editor Diagram Mermaid gratis

Tulis diagram alur, diagram urutan, diagram Gantt, dan lainnya dalam sintaks Mermaid dengan pratinjau langsung. Ekspor sebagai SVG atau PNG. Berjalan sepenuhnya di browser Anda.

πŸ’‘ Tulis diagram dengan sintaks Mermaid β€” diagram alur, diagram urutan, bagan Gantt, diagram kelas, dan lainnya β€” lalu ekspor sebagai SVG atau PNG. Semuanya berjalan di browser Anda: teks diagram tidak pernah diunggah, dan mesin render Mermaid disajikan dari situs ini, bukan dari CDN pihak ketiga.

Penggunaan umum

  • Buat FlowchartBuat flowchart dari teks dan ekspor sebagai gambar.
  • Gambar Diagram UrutanDiagram cara sistem atau orang berinteraksi dari waktu ke waktu.
  • Tambahkan Diagram ke READMEBuat diagram yang GitHub render secara native di README Anda.
  • Bangun Bagan GanttTata jadwal proyek sebagai bagan Gantt dari teks.
  • Buat Diagram KelasDiagram kelas dan hubungan mereka untuk desain perangkat lunak.

Cara kerja

Mermaid memungkinkan Anda menulis diagram sebagai teks dan membuat mereka dirender secara otomatis β€” bagus untuk menjaga diagram dalam kontrol versi. Ini adalah editor langsung yang merender saat Anda mengetik.

  1. 1
    Mesin Mermaid dimuat
    Pustaka Mermaid dimuat dari LibraTool saat pertama kali memakai alat ini, lalu browser menyimpannya di cache.
  2. 2
    Anda menulis kode diagram
    Bagan alur, diagram urutan, bagan Gantt, diagram kelas, bagan pai dan lainnya β€” menggunakan sintaks teks Mermaid.
  3. 3
    Dirender secara langsung
    Kode Anda diurai dan dirender ke SVG di browser Anda saat Anda mengetik, dengan tema cerah dan gelap.
  4. 4
    Ekspor SVG atau PNG
    Unduh diagram sebagai SVG yang dapat diskalakan atau PNG 2Γ— untuk dimasukkan ke dokumen, slide, atau README.

Kode diagram Anda β€” yang mungkin menggambarkan sistem internal β€” dirender sepenuhnya di browser Anda dan tidak pernah diunggah.

Alat terkait

πŸ“

Editor Markdown

Tulis dan pratinjau Markdown secara real time. Mendukung judul, tebal, miring, blok kode, tabel, dan daftar.

Coba
🟦

Generator CSS Grid

Desain CSS grid secara visual β€” track, unit, dan gap β€” lalu salin CSS dan HTML yang dihasilkan.

Coba
🌳

Generator Pohon ASCII

Ubah daftar berindentasi menjadi pohon folder yang rapi (β”œβ”€β”€ └──) untuk README dan dokumentasi. Output Unicode atau ASCII biasa. Berjalan sepenuhnya di browser Anda.

Coba

Pertanyaan yang sering diajukan