Konverter online gratis MERMAID ke SVG

Apa itu format MERMAID

Dalam konteks mind map dan flowchart, file MERMAID adalah file source teks biasa yang berisi sintaks Mermaid, biasanya disimpan dengan ekstensi .mmd atau .mermaid. Source tersebut mendeskripsikan flowchart, sequence diagram, class diagram, state diagram, entity-relationship diagram, dan mind map, bukan menyimpan gambar yang sudah jadi.

File Mermaid dibuat atau diedit di Mermaid Live Editor, Visual Studio Code dengan ekstensi Mermaid, Obsidian, dan sistem dokumentasi yang mendukung blok Mermaid. Membuka file di text editor akan menampilkan deklarasi seperti flowchart TD atau mindmap; deklarasi tersebut harus dirender oleh engine yang kompatibel dengan Mermaid.

Apa itu format SVG

SVG, atau Scalable Vector Graphics, adalah format gambar berbasis XML yang menyimpan path, bentuk, dan teks. Browser, alat dokumentasi, editor vektor, dan banyak aplikasi penerbitan dapat menampilkannya tanpa Mermaid runtime.

SVG tetap tajam saat diperbesar, umumnya dapat diskalakan dengan lebih baik daripada screenshot raster, dan dapat diberi style atau diedit di aplikasi seperti Inkscape. File yang diekspor adalah diagram yang telah dirender, bukan source Mermaid asli, sehingga perubahan struktur diagram nantinya lebih mudah dilakukan dari file .mmd.

Cara mengonversi MERMAID ke SVG

Menggunakan Mermaid CLI

Mermaid CLI adalah metode desktop atau command-line yang paling langsung dan memerlukan Node.js. Instal renderer dengan:

npm install -g @mermaid-js/mermaid-cli

Simpan source sebagai diagram.mmd, lalu render dengan:

mmdc -i diagram.mmd -o diagram.svg

Opsi -i menentukan source Mermaid dan -o menentukan output SVG. Untuk diagram yang menggunakan custom theme atau file konfigurasi, teruskan dengan:

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

Anda juga dapat melakukan render langsung dengan npx tanpa instalasi global:

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Menggunakan Mermaid Live Editor

Buka source di Mermaid Live Editor, periksa preview hasil render untuk menemukan syntax error, lalu gunakan Actions → Export Diagram → SVG atau kontrol ekspor SVG yang setara. Simpan file yang diunduh dengan ekstensi .svg. Metode ini sesuai digunakan ketika Node.js tidak dapat diinstal, tetapi bergantung pada versi Mermaid yang didukung editor dan fitur diagram yang tersedia.

Menggunakan online converter bawaan

Anda dapat mengonversi file secara gratis di 101convert.com tanpa menginstal software: upload file .mmd atau .mermaid, pilih SVG sebagai format output, mulai konversi, lalu download file .svg yang dihasilkan.

Pertimbangan kualitas dan kompatibilitas

Error konversi biasanya disebabkan oleh sintaks Mermaid yang tidak didukung, dependensi diagram yang hilang, atau indentasi yang tidak valid dalam konstruksi seperti mind map. Render source sebelum mengekspornya dan periksa SVG pada ukuran tampilan yang dituju.

Output SVG dapat bergantung pada font yang tersedia, rendering browser, versi Mermaid, dan pengaturan theme. Jika tampilan yang persis sangat penting, gunakan font umum atau konversi teks menjadi path di editor vektor setelah ekspor; mengonversi teks menjadi path akan menyulitkan pengeditan teks selanjutnya.

Beberapa SVG consumer membatasi embedded style, script, hyperlink, atau elemen foreign XML. Untuk kompatibilitas maksimum, gunakan static SVG biasa dan hapus fitur interaktif yang bergantung pada JavaScript. Simpan file Mermaid asli bersama SVG agar diagram tetap dapat diedit secara struktural.