Mermaid Flowchart Gallery

Selamat datang di folder dokumentasi visual saya! Folder ini berisi 4 (empat) bentuk flowchart menggunakan Mermaid.js yang bisa langsung digunakan dan diedit.

🚀 Mengapa Menggunakan Mermaid?

Mermaid memungkinkan kita membuat diagram menggunakan teks (markup), sehingga:

• Git-friendly: Perubahan diagram bisa dilacak lewat commit history.
• Mudah diedit: Tidak perlu aplikasi desain, cukup ketik kode.
• Rapi: GitHub merender kode ini secara otomatis menjadi diagram yang cantik.

---

🛠 Cara Menggunakan

Saya mengedit atau melihat flowchart ini di VS Code, dan menggunakan/menginstal Markdown Preview Enhanced extension.

Langkah-langkah:

1. Instal Ekstensi:
   • Buka VS Code.
   • Pergi ke tab Extensions (Ctrl+Shift+X).
   • Cari dan instal: Markdown Preview Enhanced.
2. Cara Menjalankan:
   • Buka file .md yang berisi kode Mermaid.
   • Klik kanan di dalam editor kode.
   • Pilih Markdown Preview Enhanced: Open to the Side (atau tekan Ctrl + K lalu V).
3. Keunggulan:
   • Render diagram jauh lebih cepat dan akurat.
   • Bisa ekspor diagram ke format PNG, SVG, bahkan PDF dengan mudah.

---

📂 Pratinjau Flowchart

Berikut adalah daftar dokumentasi flowchart yang tersedia di repositori ini:

Nama Diagram	Pratinjau (Thumbnail)	Link Dokumentasi
Simple Flowchart		Lihat Kode
Horizontal Flowchart		Lihat Kode
Color & Shapes		Lihat Kode
TypeScript Compilation		Lihat Kode

---

📝 Kode Mermaid

Sebagai contoh sederhana, salin kode di bawah ini untuk menggunakannya di editor Markdown kamu.

graph TD
    A[Mulai Belajar] --> B{Paham Konsep?}
    B -- Belum --> C[Baca Dokumentasi/Bikin Flowchart]
    C --> A
    B -- Sudah --> D[Implementasi Kode TS]
    D --> E[Selesai & Commit]

Catatan: Jika kamu menyalin kode ini dan terdapat tulisan text di baris teratas blok kode, silakan ganti menjadi mermaid agar kode tersebut dapat dirender menjadi flowchart.

Bentuk kurung mempengaruhi output sebagai berikut.

1. Jajaran Genjang [/.../] Input: Menerima data mentah dari pengguna.
2. Subrutin [[...]] Proses Kompleks: Rangkaian langkah detail (misalnya, memeriksa panjang ID, memformat nama, menghapus karakter ilegal).
3. Berlian {...} Keputusan: Menguji kondisi (Ya/Tidak).
4. Jajaran Genjang [/.../] Output: Menampilkan pesan atau data keluar (pesan error dikirim kembali ke pengguna).
5. Subrutin [[...]] Proses Kompleks: Melambangkan proses generating file, yang mungkin melibatkan banyak langkah layout dan pemformatan.
6. Jajaran Genjang [/.../] Output: Data (laporan) dikirim keluar dari sistem ke lingkungan eksternal (email pengguna).
7. Lingkaran Ganda ((...)) Terminator: Akhir dari alur.

---

📚 Referensi Tambahan

• Dokumentasi Resmi Mermaid - Panduan lengkap kode dan struktur diagram.
• Mermaid Live Editor - Alat untuk mencoba kode Mermaid secara online.
• Markdown Preview Enhanced - Dokumentasi resmi ekstensi VS Code yang kita gunakan.
• Cheat Sheet Markdown - Referensi cepat untuk penulisan Markdown.

---

Contact & Connect

Terima kasih telah melihat catatan belajar saya! Jika ada pertanyaan/diskusi, saya di:

Scan atau klik QR di bawah untuk terhubung di LinkedIn:

---

This is part of the Nurjam Projects collection — exploring code, one experiment at a time.