|
| 1 | +# FossFLOW - Alat Diagram Isometrik <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" /> |
| 2 | + |
| 3 | +<p align="center"> |
| 4 | + <a href="../README.md">English</a> | <a href="README.cn.md">简体中文</a> | <a href="README.es.md">Español</a> | <a href="README.pt.md">Português</a> | <a href="README.fr.md">Français</a> | <a href="README.hi.md">हिन्दी</a> | <a href="README.bn.md">বাংলা</a> | <a href="README.ru.md">Русский</a> | <a href="README.id.md">Bahasa Indonesia</a> |
| 5 | +</p> |
| 6 | + |
| 7 | +<b>Halo!</b> Saya Stan, jika Anda telah menggunakan FossFLOW dan ini membantu Anda, <b>saya akan sangat menghargai jika Anda bisa menyumbang sesuatu yang kecil :)</b> Saya bekerja penuh waktu, dan menemukan waktu untuk mengerjakan proyek ini sudah cukup menantang. |
| 8 | +Jika saya telah mengimplementasikan fitur untuk Anda atau memperbaiki bug, akan sangat bagus jika Anda bisa menyumbang :) jika tidak, tidak masalah, software ini akan selalu tetap gratis! |
| 9 | + |
| 10 | + |
| 11 | +<b>Juga!</b> Jika Anda belum melakukannya, silakan lihat library dasar yang digunakan untuk membangun ini oleh <a href="https://github.com/markmanx/isoflow">@markmanx</a> Saya benar-benar berdiri di atas bahu raksasa di sini 🫡 |
| 12 | + |
| 13 | +[](https://ko-fi.com/P5P61KBXA3) |
| 14 | + |
| 15 | +<img width="30" height="30" alt="image" src="https://github.com/user-attachments/assets/dc6ec9ca-48d7-4047-94cf-5c4f7ed63b84" /> <b> https://buymeacoffee.com/stan.smith </b> |
| 16 | + |
| 17 | + |
| 18 | +Terima kasih, |
| 19 | + |
| 20 | +-Stan |
| 21 | + |
| 22 | +## Coba Secara Online |
| 23 | + |
| 24 | +Kunjungi <b> --> https://stan-smith.github.io/FossFLOW/ <-- </b> |
| 25 | + |
| 26 | + |
| 27 | +------------------------------------------------------------------------------------------------------------------------------ |
| 28 | +FossFLOW adalah aplikasi web progresif (PWA) open-source yang powerful untuk membuat diagram isometrik yang indah. Dibangun dengan React dan library <a href="https://github.com/markmanx/isoflow">Isoflow</a> (Sekarang di-fork dan dipublikasikan ke NPM sebagai fossflow), berjalan sepenuhnya di browser Anda dengan dukungan offline. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +- **📝 [FOSSFLOW_TODO.md](https://github.com/stan-smith/FossFLOW/blob/master/FOSSFLOW_TODO.md)** - Masalah saat ini dan roadmap dengan pemetaan codebase, sebagian besar keluhan adalah dengan library isoflow itu sendiri. |
| 33 | +- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cara berkontribusi pada proyek. |
| 34 | + |
| 35 | +## Pembaruan Terbaru (Oktober 2025) |
| 36 | + |
| 37 | +### Pembaruan Performa |
| 38 | + - **Mengurangi delay refresh frame, seharusnya terlihat lebih halus sekarang** |
| 39 | + |
| 40 | +### Dukungan Multibahasa |
| 41 | +- **9 Bahasa Didukung** - Terjemahan antarmuka lengkap dalam Bahasa Inggris, Cina (Sederhana), Spanyol, Portugis (Brasil), Prancis, Hindi, Bengali, Rusia, dan Bahasa Indonesia |
| 42 | +- **Pemilih Bahasa** - Pengganti bahasa yang mudah digunakan di header aplikasi |
| 43 | +- **Terjemahan Lengkap** - Semua menu, dialog, pengaturan, tooltip, dan konten bantuan diterjemahkan |
| 44 | +- **Sadar Lokal** - Secara otomatis mendeteksi dan mengingat preferensi bahasa Anda |
| 45 | + |
| 46 | +### Alat Konektor yang Ditingkatkan |
| 47 | +- **Pembuatan Berbasis Klik** - Mode default baru: klik node pertama, lalu klik node kedua untuk terhubung |
| 48 | +- **Opsi Mode Seret** - Drag-and-drop asli masih tersedia melalui pengaturan |
| 49 | +- **Pemilihan Mode** - Beralih antara mode klik dan seret di Pengaturan → tab Konektor |
| 50 | +- **Keandalan Lebih Baik** - Mode klik memberikan pembuatan koneksi yang lebih dapat diprediksi |
| 51 | + |
| 52 | +### Impor Ikon Kustom |
| 53 | +- **Impor Ikon Anda Sendiri** - Unggah ikon kustom (PNG, JPG, SVG) untuk digunakan dalam diagram Anda |
| 54 | +- **Penskalaan Otomatis** - Ikon secara otomatis diskalakan ke ukuran yang konsisten untuk tampilan profesional |
| 55 | +- **Toggle Isometrik/Datar** - Pilih apakah ikon yang diimpor muncul sebagai 3D isometrik atau 2D datar |
| 56 | +- **Persistence Cerdas** - Ikon kustom disimpan dengan diagram dan bekerja di semua metode penyimpanan |
| 57 | +- **Sumber Daya Ikon** - Temukan ikon gratis di: |
| 58 | + - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Ribuan ikon SVG gratis |
| 59 | + - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Paket ikon isometrik berkualitas tinggi |
| 60 | + |
| 61 | +### Dukungan Penyimpanan Server |
| 62 | +- **Penyimpanan Persisten** - Diagram disimpan ke filesystem server, bertahan di seluruh sesi browser |
| 63 | +- **Akses Multi-perangkat** - Akses diagram Anda dari perangkat apa pun saat menggunakan deployment Docker |
| 64 | +- **Deteksi Otomatis** - UI secara otomatis menampilkan penyimpanan server saat tersedia |
| 65 | +- **Perlindungan Penimpaan** - Dialog konfirmasi saat menyimpan dengan nama duplikat |
| 66 | +- **Integrasi Docker** - Penyimpanan server diaktifkan secara default dalam deployment Docker |
| 67 | + |
| 68 | +### Fitur Interaksi yang Ditingkatkan |
| 69 | +- **Hotkey yang Dapat Dikonfigurasi** - Tiga profil (QWERTY, SMNRCT, None) untuk pemilihan alat dengan indikator visual |
| 70 | +- **Kontrol Pan Lanjutan** - Beberapa metode pan termasuk seret area kosong, klik tengah/kanan, tombol modifier (Ctrl/Alt), dan navigasi keyboard (Arrow/WASD/IJKL) |
| 71 | +- **Toggle Panah Konektor** - Opsi untuk menampilkan/menyembunyikan panah pada konektor individual |
| 72 | +- **Pemilihan Alat Persisten** - Alat konektor tetap aktif setelah membuat koneksi |
| 73 | +- **Dialog Pengaturan** - Konfigurasi terpusat untuk hotkey dan kontrol pan |
| 74 | + |
| 75 | +### Peningkatan Docker & CI/CD |
| 76 | +- **Build Docker Otomatis** - Workflow GitHub Actions untuk deployment Docker Hub otomatis pada commit |
| 77 | +- **Dukungan Multi-arsitektur** - Image Docker untuk `linux/amd64` dan `linux/arm64` |
| 78 | +- **Image Pra-dibangun** - Tersedia di `stnsmith/fossflow:latest` |
| 79 | + |
| 80 | +### Arsitektur Monorepo |
| 81 | +- **Repositori tunggal** untuk library dan aplikasi |
| 82 | +- **NPM Workspaces** untuk manajemen dependensi yang efisien |
| 83 | +- **Proses build terpadu** dengan `npm run build` di root |
| 84 | + |
| 85 | +### Perbaikan UI |
| 86 | +- Memperbaiki masalah tampilan ikon toolbar editor Quill |
| 87 | +- Menyelesaikan peringatan key React di menu konteks |
| 88 | +- Meningkatkan styling editor markdown |
| 89 | + |
| 90 | +## Fitur |
| 91 | + |
| 92 | +- 🎨 **Diagram Isometrik** - Buat diagram teknis bergaya 3D yang menakjubkan |
| 93 | +- 💾 **Auto-Save** - Pekerjaan Anda secara otomatis disimpan setiap 5 detik |
| 94 | +- 📱 **Dukungan PWA** - Instal sebagai aplikasi native di Mac dan Linux |
| 95 | +- 🔒 **Privasi Pertama** - Semua data disimpan secara lokal di browser Anda |
| 96 | +- 📤 **Impor/Ekspor** - Bagikan diagram sebagai file JSON |
| 97 | +- 🎯 **Penyimpanan Sesi** - Simpan cepat tanpa dialog |
| 98 | +- 🌐 **Dukungan Offline** - Bekerja tanpa koneksi internet |
| 99 | +- 🗄️ **Penyimpanan Server** - Penyimpanan persisten opsional saat menggunakan Docker (diaktifkan secara default) |
| 100 | +- 🌍 **Multibahasa** - Dukungan lengkap untuk 9 bahasa: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский, Bahasa Indonesia |
| 101 | + |
| 102 | + |
| 103 | +## 🐳 Deploy Cepat dengan Docker |
| 104 | + |
| 105 | +```bash |
| 106 | +# Menggunakan Docker Compose (disarankan - termasuk penyimpanan persisten) |
| 107 | +docker compose up |
| 108 | + |
| 109 | +# Atau jalankan langsung dari Docker Hub dengan penyimpanan persisten |
| 110 | +docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest |
| 111 | +``` |
| 112 | + |
| 113 | +Penyimpanan server diaktifkan secara default di Docker. Diagram Anda akan disimpan ke `./diagrams` di host. |
| 114 | + |
| 115 | +Untuk menonaktifkan penyimpanan server, set `ENABLE_SERVER_STORAGE=false`: |
| 116 | +```bash |
| 117 | +docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest |
| 118 | +``` |
| 119 | + |
| 120 | +## Mulai Cepat (Pengembangan Lokal) |
| 121 | + |
| 122 | +```bash |
| 123 | +# Clone repositori |
| 124 | +git clone https://github.com/stan-smith/FossFLOW |
| 125 | +cd FossFLOW |
| 126 | + |
| 127 | +# Install dependensi |
| 128 | +npm install |
| 129 | + |
| 130 | +# Build library (diperlukan pertama kali) |
| 131 | +npm run build:lib |
| 132 | + |
| 133 | +# Mulai development server |
| 134 | +npm run dev |
| 135 | +``` |
| 136 | + |
| 137 | +Buka [http://localhost:3000](http://localhost:3000) di browser Anda. |
| 138 | + |
| 139 | +## Struktur Monorepo |
| 140 | + |
| 141 | +Ini adalah monorepo yang berisi dua paket: |
| 142 | + |
| 143 | +- `packages/fossflow-lib` - Library komponen React untuk menggambar diagram jaringan (dibangun dengan Webpack) |
| 144 | +- `packages/fossflow-app` - Progressive Web App untuk membuat diagram isometrik (dibangun dengan RSBuild) |
| 145 | + |
| 146 | +### Perintah Pengembangan |
| 147 | + |
| 148 | +```bash |
| 149 | +# Pengembangan |
| 150 | +npm run dev # Mulai development server aplikasi |
| 151 | +npm run dev:lib # Mode watch untuk pengembangan library |
| 152 | + |
| 153 | +# Build |
| 154 | +npm run build # Build library dan aplikasi |
| 155 | +npm run build:lib # Build library saja |
| 156 | +npm run build:app # Build aplikasi saja |
| 157 | + |
| 158 | +# Testing & Linting |
| 159 | +npm test # Jalankan unit test |
| 160 | +npm run lint # Periksa error linting |
| 161 | + |
| 162 | +# E2E Tests (Selenium) |
| 163 | +cd e2e-tests |
| 164 | +./run-tests.sh # Jalankan end-to-end tests (memerlukan Docker & Python) |
| 165 | + |
| 166 | +# Publishing |
| 167 | +npm run publish:lib # Publish library ke npm |
| 168 | +``` |
| 169 | + |
| 170 | +## Cara Menggunakan |
| 171 | + |
| 172 | +### Membuat Diagram |
| 173 | + |
| 174 | +1. **Tambahkan Item**: |
| 175 | + - Tekan tombol "+" di menu kanan atas, library komponen akan muncul di kiri |
| 176 | + - Seret dan lepas komponen dari library ke kanvas |
| 177 | + - Atau klik kanan pada grid dan pilih "Add node" |
| 178 | + |
| 179 | +2. **Hubungkan Item**: |
| 180 | + - Pilih alat Konektor (tekan 'C' atau klik ikon konektor) |
| 181 | + - **Mode klik** (default): Klik node pertama, lalu klik node kedua |
| 182 | + - **Mode seret** (opsional): Klik dan seret dari node pertama ke node kedua |
| 183 | + - Beralih mode di Pengaturan → tab Konektor |
| 184 | + |
| 185 | +3. **Simpan Pekerjaan Anda**: |
| 186 | + - **Simpan Cepat** - Menyimpan ke sesi browser |
| 187 | + - **Ekspor** - Unduh sebagai file JSON |
| 188 | + - **Impor** - Muat dari file JSON |
| 189 | + |
| 190 | +### Opsi Penyimpanan |
| 191 | + |
| 192 | +- **Penyimpanan Sesi**: Simpan sementara yang dihapus saat browser ditutup |
| 193 | +- **Ekspor/Impor**: Penyimpanan permanen sebagai file JSON |
| 194 | +- **Auto-Save**: Secara otomatis menyimpan perubahan setiap 5 detik ke sesi |
| 195 | + |
| 196 | +## Berkontribusi |
| 197 | + |
| 198 | +Kami menyambut kontribusi! Silakan lihat [CONTRIBUTORS.md](../CONTRIBUTORS.md) untuk panduan. |
| 199 | + |
| 200 | +## Dokumentasi |
| 201 | + |
| 202 | +- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Panduan lengkap untuk codebase |
| 203 | +- [FOSSFLOW_TODO.md](../FOSSFLOW_TODO.md) - Masalah saat ini dan roadmap |
| 204 | +- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Panduan kontribusi |
| 205 | + |
| 206 | +## Lisensi |
| 207 | + |
| 208 | +MIT |
| 209 | + |
0 commit comments