Flowchart Alur Navigasi Aplikasi

graph TD %% Mendefinisikan Style berdasarkan Kaidah Flowchart Universal %% Terminator (Mulai/Selesai) - Oval classDef terminator fill:#fee2e2,stroke:#ef4444,stroke-width:2px,rx:30,ry:30,color:#7f1d1d; %% Process (Proses) - Persegi Panjang classDef process fill:#e0f2fe,stroke:#0ea5e9,stroke-width:2px,rx:4,ry:4,color:#0c4a6e; %% Decision (Keputusan) - Belah Ketupat (Diamond) classDef decision fill:#fef08a,stroke:#eab308,stroke-width:2px,color:#713f12; %% Data / Input-Output - Jajargenjang classDef io fill:#dcfce7,stroke:#22c55e,stroke-width:2px,color:#14532d; %% Node Flowchart Start([Mulai Aplikasi]):::terminator Loading[Proses Memuat Data & Aset
State: loading]:::process Home[Halaman Utama
State: home]:::process MenuDec{Pilih Aksi / Menu}:::decision Panduan[Menampilkan Panduan
State: panduan]:::process Fullscreen[/Aksi: Toggle Fullscreen/]:::io Topik[Menampilkan Pilihan Topik
Contoh: Heat Concept]:::process TopikDec{Pilih Aksi Topik}:::decision Subtopik[Menampilkan Subtopik
Padat, Konduksi, Konveksi]:::process SubtopikDec{Pilih Aksi Subtopik}:::decision AR[Inisialisasi Mode AR
State: ar]:::process Kamera[/Meminta Izin & Akses Kamera/]:::io Interaksi[/Input Pengguna:
Play/Pause, Slider Suhu, Material/]:::io ARDelay{Lanjut Simulasi?}:::decision %% Alur Logika (Connections) Start --> Loading Loading -->|Inisialisasi Selesai| Home Home --> MenuDec MenuDec -->|Klik Panduan| Panduan Panduan -->|Klik Tombol Kembali| Home MenuDec -->|Klik Icon Layar| Fullscreen Fullscreen -.-> Home MenuDec -->|Klik Mulai| Topik Topik --> TopikDec TopikDec -->|Pilih Subtopik| Subtopik TopikDec -->|Klik Tombol Kembali| Home Subtopik --> SubtopikDec SubtopikDec -->|Pilih Submateri| AR SubtopikDec -->|Klik Tombol Kembali| Topik AR --> Kamera Kamera -->|Kamera Aktif & Objek Tampil| Interaksi Interaksi --> ARDelay ARDelay -->|Ya, Ubah Nilai| Interaksi ARDelay -->|Klik Tombol Kembali| Subtopik