Konverter online gratis MERMAID ke PNG

PNG berguna ketika diagram Mermaid harus dimasukkan ke dalam dokumen, presentasi, issue tracker, atau arsip berbasis gambar yang tidak dapat merender source Mermaid. Mengonversi diagram juga membuat snapshot visual tetap untuk dibagikan, sementara file Mermaid asli tetap dapat diedit.

Apa itu format MERMAID

File MERMAID adalah definisi diagram plain-text, yang umumnya disimpan dengan ekstensi .mermaid atau .mmd. File ini berisi sintaks Mermaid untuk flowchart, mind map, sequence diagram, class diagram, state diagram, entity-relationship diagram, dan grafik terstruktur lainnya, bukan piksel yang disimpan.

File Mermaid dibuat atau diedit di Mermaid Live Editor, Mermaid CLI, Visual Studio Code dengan ekstensi Mermaid, serta aplikasi seperti Obsidian, GitLab, dan GitHub yang mendukung rendering Mermaid. Anda mungkin menjumpainya ketika diagram disimpan di source-code repository, dokumen Markdown, aplikasi catatan, atau proyek dokumentasi.

Apa itu format PNG

PNG adalah format gambar raster yang didukung oleh web browser, software office, tool presentasi, image viewer, dan sebagian besar sistem dokumen. Format ini menggunakan kompresi lossless, mempertahankan garis berwarna solid dan teks yang tajam lebih baik daripada JPEG, serta dapat menyimpan background transparan.

PNG sesuai ketika penerima memerlukan gambar biasa, bukan sintaks Mermaid. Format ini tidak ideal untuk mengedit elemen diagram satu per satu atau untuk diagram yang sangat besar, karena memperbesar gambar raster dapat membuat teks dan garis tampak berpiksel.

Cara mengonversi MERMAID ke PNG

Menggunakan 101convert online

1. Buka converter MERMAID-to-PNG di 101convert.com.
2. Upload file .mermaid atau .mmd.
3. Mulai konversi dan download file .png yang dihasilkan.

Opsi ini tidak memerlukan software yang terinstal dan sesuai digunakan ketika file Mermaid tidak berisi informasi sensitif.

Menggunakan Mermaid CLI

Untuk konversi lokal yang dapat diulang, instal Mermaid CLI dengan Node.js:

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

Render source file dengan:

mmdc -i diagram.mermaid -o diagram.png

Input juga dapat menggunakan ekstensi .mmd. Untuk meningkatkan resolusi raster, terapkan scale factor:

mmdc -i diagram.mmd -o diagram.png -s 2

Gunakan background color ketika transparansi tidak sesuai:

mmdc -i diagram.mmd -o diagram.png -b white

Mermaid CLI merender source dengan headless browser. Jika instalasi melaporkan masalah Chromium atau browser, ikuti instruksi browser setup untuk versi Mermaid CLI tersebut sebelum menjalankan kembali command.

Menggunakan diagram editor

Buka source di Mermaid Live Editor atau editor lain yang kompatibel dengan Mermaid, periksa apakah preview dirender dengan benar, lalu pilih Export → PNG atau command image-export yang setara. Pengaturan export mungkin memungkinkan background transparan, pemilihan theme, atau penyesuaian scale.

Pertimbangan kualitas dan kompatibilitas

PNG mencerminkan Mermaid renderer, versi Mermaid, theme, font yang tersedia, dan initialization settings yang digunakan selama export. Oleh karena itu, diagram dapat terlihat berbeda ketika dirender oleh aplikasi atau versi lain.

Tingkatkan export scale untuk diagram yang berisi label kecil; mengubah lebar PNG setelah export tidak akan mengembalikan detail yang hilang. Simpan source Mermaid asli bersama PNG karena PNG tidak mempertahankan node, link, layout rules, atau teks yang dapat diedit.

Jika tujuan mendukung grafik vector, SVG biasanya lebih baik untuk diagram besar dan resize selanjutnya. Pilih PNG ketika aplikasi tujuan hanya menerima gambar raster atau ketika gambar berukuran tetap diperlukan.