# Cara Menggunakan Mermaid.js untuk Diagram Alir di NoteRich – Tutorial Lengkap Visualisasi proses yang kompleks, arsitektur sistem, atau pohon keputusan hanya bisa dilakukan dengan teks saja. **Mermaid.js** adalah alat pembuatan diagram dan grafik berbasis JavaScript yang kuat, yang memungkinkan Anda membuat diagram menggunakan definisi teks yang sederhana. Di **NoteRich**, kami telah mengintegrasikan Mermaid.js ke dalam editor, sehingga Anda dapat membuat diagram alir, diagram urutan, dan lain-lain tanpa harus meninggalkan catatan Anda. Petunjuk ini akan membimbing Anda melalui segala hal yang perlu Anda ketahui untuk menguasai diagram Mermaid di NoteRich, termasuk cara menggunakan AI dan OCR untuk membuat diagram secara instan. --- ## 🚀 Mengapa Menggunakan Mermaid di NoteRich? * **Berdasarkan Teks:** Definisikan diagram Anda menggunakan kode, sehingga mudah dikontrol versi dan diedit. * **Preview Sesuai Waktu Nyata:** Lihat perubahan Anda secara instan saat Anda mengetik. * **Serbaguna:** Mendukung diagram alir, diagram urutan, diagram kelas, diagram keadaan, diagram Gantt, dan lain-lain. * **Didukung oleh AI & OCR:** Buat diagram dari deskripsi bahasa alami atau dengan memindai gambar yang sudah ada. * **Fokus pada Lokasi:** Definisi diagram Anda disimpan secara lokal di catatan Anda, sehingga menjaga privasi dan akses offline. --- ## 📝 Memulai: Memasukkan Diagram Mermaid Ada tiga cara utama untuk memasukkan diagram Mermaid di NoteRich: ### Metode 1: Komando Slash (`/`) 1. Letakkan kursor di tempat yang ingin Anda gunakan untuk diagram. 2. Ketik `/` untuk membuka pilihan komponen. 3. Cari **"Mermaid"** atau **"Diagram"**. 4. Pilih **Diagram Mermaid** dari daftar. ### Metode 2:工具栏 1. Klik tombol **Insert** di toolbar. 2. Navigasikan ke bagian **Visualisasi** atau **Diagram**. 3. Klik **Mermaid**. ### Metode 3: Asisten AI 1. Buka **Asisten AI** (melalui `/ai` atau toolbar). 2. Deskripsikan diagram yang Anda inginkan (misalnya, "Buat diagram alir untuk proses login pengguna"). 3. AI akan menghasilkan kode Mermaid untuk Anda, yang dapat Anda masukkan langsung ke catatan Anda. Setelah dimasukkan, akan muncul kotak konfigurasi dengan editor kode dan jendela preview sesaat. --- ## 🛠️ Antarmuka Editor Mermaid Editor Mermaid di NoteRich dirancang untuk efisiensi: * **Area Kode:** Area teks monospaced tempat Anda menulis sintaks Mermaid. * **Preview Sesuai Waktu Nyata:** Penampilan diagram secara real-time. Jika ada kesalahan sintaks, akan muncul overlay kesalahan untuk membantu Anda memperbaiki. * **Ikon Bantuan:** Klik ikon `?` di samping "Kode Diagram" untuk membuka dokumentasi resmi [Mermaid.js](https://mermaid.js.org/intro/) untuk referensi sintaks yang lebih detail. * **Tombol Konfirmasi:** Simpan diagram Anda dan masukkan ke catatan. > **Tips:** Anda dapat mengklik dua kali pada diagram Mermaid yang sudah ada di catatan Anda untuk membuka editor kembali dan membuat perubahan. --- ## 📊 Sintaks Diagram Alir Dasar Diagram alir adalah kasus penggunaan yang paling umum untuk Mermaid. Berikut cara membuatnya. ### 1. Mendefinisikan Arah Mulai dengan mendefinisikan arah alirannya: * `graph TD`: Top-Down * `graph LR`: Left-Right * `graph BT`: Bottom-Top * `graph RL`: Right-Left ### 2. Menambahkan Node Node didefinisikan dengan ID dan label. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]`: Node berbentuk persegi panjang. * `(Text)`: Persegi panjang yang bulat. * `((Text))`: Lingkaran. * `{Text}`: Rhombus (Keputusan). * `[[Text]]`: Subrutin. ### 3. Menghubungkan Node * `-->`: Panah solid. * `-.->`: Panah berpotongan. * `==>`: Panah tebal. * `-- Text -->`: Panah dengan label. --- ## 🤖 Generasi Diagram Berbasis AI Tidak ingin menulis kode? Biarkan AI NoteRich melakukannya untuk Anda. 1. Buka **Asisten AI**. 2. Ketikkan prompt seperti: *"Buat diagram urutan Mermaid untuk pelanggan yang memesan online."* 3. AI akan mengembalikan blok kode seperti ini: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. Kopi kode atau gunakan tombol **Insert** jika tersedia di antarmuka AI Anda untuk menambangkannya ke catatan Anda. --- ## 📸 OCR: Memindai Diagram Tulis atau Diagram Cetak Ada foto papan tulis atau diagram alir cetak? **NoteScanner (OCR)** NoteRich dapat mengubahnya menjadi kode Mermaid yang dapat diedit. 1. Buka **Asisten AI** dan pilih **NoteScanner (OCR)**. 2. Unggah gambar diagram yang ditulis tangan atau dicetak. 3. Dalam prompt, tentukan: *"Ubah gambar ini menjadi kode diagram Mermaid.js."* 4. AI akan menganalisis struktur gambar dan menghasilkan sintaks Mermaid yang sesuai. 5. Tinjau kode yang dihasilkan di editor dan sesuaikan kesalahan pengenalan yang kecil. > **Catatan:** Untuk hasil terbaik, pastikan gambar jelas dan teks mudah dibaca. Sketsa tangan yang kompleks mungkin memerlukan beberapa pengaturan manual setelah konversi. --- ## 🎨 Fitur Lanjutan ### Menyukai Node Anda dapat menyesuaikan penampilan node tertentu menggunakan kelas CSS atau gaya dalaman. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgraph Kumpulkan node yang relevan untuk organisasi yang lebih baik. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Diagram Urutan Mermaid bukan hanya untuk diagram alir. Anda juga dapat membuat diagram urutan untuk memvisualisasi interaksi antar sistem. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Edit Note NoteRich->>Server: Save Data Server-->>NoteRich: Confirm Save NoteRich-->>User: Update UI ``` --- ## 💡 Tips Profesional untuk Pengguna NoteRich 1. **Menyingkirkan Karakter Khusus:** Jika teks node Anda mengandung karakter khusus seperti `[]` atau `()`, gunakan tanda kutip untuk membungkus teks tersebut. ```mermaid graph TD A["Node dengan [bracket]"] --> B["Node dengan (parent bracket)"] ``` 2. **Menyalin sebagai Gambar:** Setelah diagram Anda ditampilkan, klik pada diagram tersebut untuk menampilkan toolbar yang bergerak. Gunakan tombol **Menyalin Gambar** untuk menempelkan diagram ke aplikasi lain seperti Slack, Notion, atau email. 3. **Unduh SVG:** Pengguna profesional dapat mengunduh diagram sebagai file SVG berkualitas tinggi untuk digunakan dalam presentasi atau publikasi. --- ## ❓ Penyelesaian Masalah * **Diagram Tidak Ditampilkan?** Periksa overlay kesalahan di jendela preview. Masalah umum termasuk absennya tanda tuntas `]` atau sintaks panah yang salah. * **Kesalahan Sintaks?** Pastikan Anda menggunakan sintaks versi Mermaid yang benar. NoteRich menggunakan versi stabil terbaru dari Mermaid.js. Jika Anda tidak yakin, lihat dokumentasi resmi [https://mermaid.js.org/intro/](https://mermaid.js.org/intro/). * **Akurasi OCR?** Jika hasil OCR tidak sempurna, gunakan Asisten AI untuk memperbaiki kode. Anda dapat menempelkan hasil OCR yang kurang sempurna dan meminta AI untuk "Memperbaiki sintaks Mermaid". --- ## 🏁 Kesimpulan Mermaid.js di NoteRich mengubah cara Anda mendokumentasikan proses dan sistem. Dengan menyimpan diagram Anda sebagai kode, Anda memastikan bahwa diagram tersebut selalu terbaru, mudah diubah, dan terintegrasi dengan baik dengan basis pengetahuan Anda. Dengan generasi AI dan pemindaian OCR, membuat visualisasi kompleks kini menjadi lebih mudah. Mulai visualisasi ide Anda hari ini! ---