# Cara Menggunakan Mermaid.js untuk Membuat Diagram Alir dalam NoteRich – Tutorial lengkap Visualisasi proses yang kompleks, arsitektur sistem, atau pohon keputusan boleh menjadi sukar hanya dengan teks. **Mermaid.js** merupakan alat pembuatan diagram dan grafik berbasis JavaScript yang kuat, yang memungkinkan anda membuat diagram menggunakan definisi teks yang sederhana. Dalam **NoteRich**, kami telah mengintegrasikan Mermaid.js ke dalam editor, sehingga anda dapat membuat diagram alir, diagram urutan, dan lain-lain tanpa perlu meninggalkan catatan anda. Panduan ini akan membimbing anda melalui segala hal yang perlu anda ketahui untuk menguasai penggunaan diagram Mermaid dalam NoteRich, termasuk cara menggunakan AI dan OCR untuk menghasilkan diagram secara instan. --- ## 🚀 Mengapa Gunakan Mermaid dalam NoteRich? * **Berdasarkan Teks:** Definisikan diagram anda menggunakan kode, sehingga mudah dikontrol versi dan diedit. * **Udara Sambung:** 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:** Menghasilkan diagram dari deskripsi bahasa alami atau dengan memindai gambar yang sudah ada. * **Fokus pada Lokasi:** Definisi diagram anda disimpan secara lokal dalam catatan anda, sehingga privasi dan akses offline terjamin. --- ## 📝 Memulai: Menambahkan Diagram Mermaid Terdapat tiga cara utama untuk menambahkan diagram Mermaid dalam NoteRich: ### Cara 1: Komando Slash (`/`) 1. Letakkan kursor di tempat yang ingin Anda tambahkan diagram. 2. Ketik `/` untuk membuka pilihan komponen. 3. Cari **"Mermaid"** atau **"Diagram"**. 4. Pilih **Diagram Mermaid** dari daftar. ### Cara 2:工具栏 1. Klik tombol **Insert** di toolbar. 2. Pergi ke bagian **Visualisasi** atau **Diagram**. 3. Klik **Mermaid**. ### Cara 3: Asisten AI 1. Buka **Asisten AI** (melalui `/ai` atau toolbar). 2. Jelaskan diagram yang Anda inginkan (misalnya, “Buat diagram alir untuk proses login pengguna”). 3. AI akan menghasilkan kode Mermaid untuk Anda, yang dapat Anda tambahkan langsung ke catatan Anda. Setelah ditambahkan, akan muncul kotak konfigurasi dengan editor kode dan jendela uji coba langsung. --- ## 🛠️ Antarmuka Editor Mermaid Editor Mermaid dalam NoteRich dirancang untuk efisiensi: * **Area Kode:** Area teks monospaced tempat Anda menulis sintaks Mermaid. * **Udara Sambung:** Pemrosesan 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 rinci. * **Tombol Konfirmasi:** Simpan diagram Anda dan tambahkannya ke catatan Anda. > **Tips:** Anda dapat mengklik dua kali pada diagram Mermaid yang sudah ada dalam catatan Anda untuk membuka editor kembali dan membuat perubahan. --- ## 📊 Sintaks Diagram Alir Dasar Diagram alir merupakan kasus penggunaan yang paling umum untuk Mermaid. Berikut cara membuatnya. ### 1. Mendefinisikan Arah Mulai dengan mendefinisikan arah alirannya: * `graph TD`: Atas-Bawah * `graph LR`: Kiri-Bawah * `graph BT`: Bawah-Atas * `graph RL`: Kanan-Bawah ### 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)`: Node berbentuk persegi panjang yang bulat. * `((Text))`: Node berbentuk lingkaran. * `{Text}`: Node berbentuk rombus (keputusan). * `[[Text]]`: Node berbentuk subrutin. ### 3. Mengikat 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. Ketik prompt seperti: *“Buat diagram urutan Mermaid untuk pelanggan yang memesan barang secara 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. Salin kode atau gunakan tombol “Insert” jika tersedia di antarmuka AI Anda untuk menambahkannya 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. Upload 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. Lihat kode yang dihasilkan dalam 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 ### Menyederhanakan 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 ``` ### Subgrafik 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 visualisasi interaksi antara 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 Pro untuk Pengguna NoteRich 1. **Mengelakkan Karakter Khusus:** Jika teks node Anda mengandungi karakter khusus seperti `[]` atau `()`, bungkus teks tersebut dalam tanda kutip. ```mermaid graph TD A["Node dengan [bracket]"] --> B["Node dengan (parent bracket)] ``` 2. **Menyalin sebagai Gambar:** Setelah diagram Anda diproses, klik pada diagram tersebut untuk menampilkan toolbar yang mengambang. Gunakan tombol **Menyalin Gambar** untuk menempelkan diagram ke aplikasi lain seperti Slack, Notion, atau email. 3. **Unduh SVG:** Pengguna pro dapat mengunduh diagram sebagai file SVG berkualitas tinggi untuk digunakan dalam presentasi atau publikasi. --- ## ❓ Penyelesaian Masalah * **Diagram Tidak Diproses?** Periksa overlay kesalahan dalam jendela uji coba. Masalah umum termasuk kurangnya tanda titik penutup `]` 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 [di sini](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 “Perbaiki sintaks Mermaid”. --- ## 🏁 Kesimpulan Mermaid.js dalam 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 yang kompleks kini menjadi lebih mudah. Mulai visualisasi ide Anda hari ini! ---