​

Working with Mermaid Diagrams

​

🎯 Quick Actions

​

1. Zoom In/Out

• Browser Zoom: Cmd/Ctrl + Scroll atau Cmd/Ctrl + Plus/Minus
• Open in New Tab: Klik kanan pada diagram → “Open Image in New Tab”
• Fullscreen: Tekan F11 untuk fullscreen mode

​

2. Download Diagram

​

Method A: Via Mermaid Live Editor (Recommended)

1. Copy code Mermaid dari dokumentasi
2. Buka Mermaid Live Editor
3. Paste code di editor
4. Klik Actions → Download:
   • PNG (untuk presentasi)
   • SVG (untuk editing lebih lanjut)
   • PDF (untuk dokumentasi)

​

Method B: Via Browser DevTools

1. Klik kanan pada diagram → Inspect Element
2. Find <svg> element
3. Klik kanan pada <svg> → Copy → Copy outerHTML
4. Paste ke text editor dan save sebagai .svg
5. Buka di browser atau convert ke PNG menggunakan tool online

​

Method C: Via Screenshot

1. macOS: Cmd + Shift + 4 → select area
2. Windows: Win + Shift + S → select area
3. Linux: PrtScn atau screenshot tool

​

3. Edit Diagram

1. Copy code Mermaid
2. Buka Mermaid Live Editor
3. Edit sesuai kebutuhan
4. Download hasil edit

​

🔧 Mermaid Live Editor Features

• ✅ Live Preview - Real-time rendering
• ✅ Export Options - PNG, SVG, PDF
• ✅ Theme Selection - Light/Dark/Custom themes
• ✅ Share Link - Generate shareable link
• ✅ Configuration - Customize diagram appearance

​

📋 Example Workflow

​

Scenario: Download ERD Diagram

1. Buka halaman dengan ERD diagram (contoh: /40-database/erd-diagram)
2. Copy Mermaid code:

3. Paste ke Mermaid Live:
   • Buka https://mermaid.live
   • Paste code
   • Diagram akan ter-render otomatis
4. Customize (optional):
   • Pilih theme (default, dark, forest, etc.)
   • Adjust configuration
5. Download:
   • Klik Actions → Download SVG atau Download PNG
   • Save ke local machine

​

🎨 Advanced: Custom Styling

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#035478',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#0284c7',
    'lineColor': '#38bdf8',
    'secondaryColor': '#f0f9ff',
    'tertiaryColor': '#e0f2fe'
  }
}}%%

​

🔗 Useful Links

​

💡 Pro Tips

​

🚀 Quick Reference

​

📞 Need Help?

1. Check Mermaid Documentation
2. Try Mermaid Live Editor untuk troubleshooting
3. Contact team untuk assistance