Diagram Mermaid

Apa Itu Mermaid?

Mermaid adalah bahasa diagramming berbasis teks. Alih-alih drag shape di tool visual, Anda menulis deskripsi singkat diagram dan Mermaid merendernya sebagai grafik visual. Ini dirancang untuk hidup bersama kode — di dalam file Markdown, wiki, atau dokumentasi — sehingga diagram Anda tetap version-controlled dan mudah diupdate.

Mermaid mendukung banyak jenis diagram:

• Flowchart — decision tree dan process flow
• Sequence diagram — bagaimana sistem atau layanan saling memanggil seiring waktu
• Entity-relationship (ER) diagram — schema database
• Diagram arsitektur — komponen dan relasinya
• Gantt chart — timeline dan jadwal project

Rendering Diagram Live

Buka file .md apa pun di IDE Strip yang berisi blok kode Mermaid. Blok Mermaid terlihat seperti ini:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

Saat IDE Strip mendeteksi blok Mermaid, ia merender panel diagram visual di samping sumber. Anda melihat keduanya sekaligus: deskripsi teks di kiri dan diagram yang di-render di kanan. Edit teks dan diagram update segera — tidak ada langkah save-and-reload yang diperlukan.

Editing Interaktif

Di sinilah dukungan Mermaid 1DevTool melampaui renderer standar. Anda bisa drag node di diagram visual, dan source code update otomatis untuk mencerminkan layout baru. Ini bekerja di kedua arah:

• Edit teks → diagram update — ubah label atau tambahkan koneksi baru di sumber dan lihat diagram digambar ulang.
• Drag node → source update — pindahkan node di diagram visual dan data posisi yang sesuai di source code menyesuaikan agar cocok.

Anda juga bisa resize node dan reconnect edge dengan drag dari edge satu node ke node lainnya. Sumber tetap sinkron sepanjang waktu.

Ini membuat diagram Mermaid terasa jauh kurang seperti pengalaman "tulis dan berharap yang terbaik". Anda bisa mendapatkan struktur kira-kira benar dalam teks, lalu fine-tune layout secara visual.

Gunakan dengan AI Agent

Salah satu kombinasi paling kuat di 1DevTool adalah meminta AI agent menghasilkan diagram Mermaid lalu mengatur ulang hasilnya secara visual. Misalnya, buka terminal Claude Code dan minta:

"Hasilkan diagram Mermaid yang menunjukkan bagaimana komponen utama di codebase ini berinteraksi satu sama lain."

Agent membaca codebase Anda dan menulis file .md berisi diagram Mermaid. Buka file tersebut di IDE Strip, dan diagram merender secara visual. Jika layout sulit dibaca, drag node ke pengaturan yang lebih jelas. Source update otomatis, sehingga Anda bisa commit diagram yang diperbaiki.

Ini juga bekerja dengan baik untuk schema database, urutan panggilan API, dan diagram arsitektur deployment.

Tip: Minta Claude Code: "Buat diagram Mermaid yang menunjukkan bagaimana komponen di repo ini berinteraksi." Lalu buka file .md yang dihasilkan untuk melihat dan mengatur ulang diagram secara visual.