# FossFLOW - Alat Diagram Isometrik fossflow

English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch

Halo! Saya Stan, jika Anda telah menggunakan FossFLOW dan ini membantu Anda, saya akan sangat menghargai jika Anda bisa menyumbang sesuatu yang kecil :) Saya bekerja penuh waktu, dan menemukan waktu untuk mengerjakan proyek ini sudah cukup menantang. 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! Juga! Jika Anda belum melakukannya, silakan lihat library dasar yang digunakan untuk membangun ini oleh @markmanx Saya benar-benar berdiri di atas bahu raksasa di sini 🫡 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3) image https://buymeacoffee.com/stan.smith Terima kasih, -Stan ## Coba Secara Online Kunjungi --> https://stan-smith.github.io/FossFLOW/ <-- ------------------------------------------------------------------------------------------------------------------------------ FossFLOW adalah aplikasi web progresif (PWA) open-source yang powerful untuk membuat diagram isometrik yang indah. Dibangun dengan React dan library Isoflow (Sekarang di-fork dan dipublikasikan ke NPM sebagai fossflow), berjalan sepenuhnya di browser Anda dengan dukungan offline. ![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55) - **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cara berkontribusi pada proyek. ## Pembaruan Terbaru (Oktober 2025) ### Impor Ikon Kustom - **Impor Ikon Anda Sendiri** - Unggah ikon kustom (PNG, JPG, SVG) untuk digunakan dalam diagram Anda - **Penskalaan Otomatis** - Ikon secara otomatis diskalakan ke ukuran yang konsisten untuk tampilan profesional - **Toggle Isometrik/Datar** - Pilih apakah ikon yang diimpor muncul sebagai 3D isometrik atau 2D datar - **Persistence Cerdas** - Ikon kustom disimpan dengan diagram dan bekerja di semua metode penyimpanan - **Sumber Daya Ikon** - Temukan ikon gratis di: - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Ribuan ikon SVG gratis - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Paket ikon isometrik berkualitas tinggi ### Dukungan Penyimpanan Server - **Penyimpanan Persisten** - Diagram disimpan ke filesystem server, bertahan di seluruh sesi browser - **Akses Multi-perangkat** - Akses diagram Anda dari perangkat apa pun saat menggunakan deployment Docker - **Deteksi Otomatis** - UI secara otomatis menampilkan penyimpanan server saat tersedia - **Perlindungan Penimpaan** - Dialog konfirmasi saat menyimpan dengan nama duplikat - **Integrasi Docker** - Penyimpanan server diaktifkan secara default dalam deployment Docker ### Fitur Interaksi yang Ditingkatkan - **Hotkey yang Dapat Dikonfigurasi** - Tiga profil (QWERTY, SMNRCT, None) untuk pemilihan alat dengan indikator visual - **Kontrol Pan Lanjutan** - Beberapa metode pan termasuk seret area kosong, klik tengah/kanan, tombol modifier (Ctrl/Alt), dan navigasi keyboard (Arrow/WASD/IJKL) - **Toggle Panah Konektor** - Opsi untuk menampilkan/menyembunyikan panah pada konektor individual - **Pemilihan Alat Persisten** - Alat konektor tetap aktif setelah membuat koneksi - **Dialog Pengaturan** - Konfigurasi terpusat untuk hotkey dan kontrol pan ### Peningkatan Docker & CI/CD - **Build Docker Otomatis** - Workflow GitHub Actions untuk deployment Docker Hub otomatis pada commit - **Dukungan Multi-arsitektur** - Image Docker untuk `linux/amd64` dan `linux/arm64` - **Image Pra-dibangun** - Tersedia di `stnsmith/fossflow:latest` ### Arsitektur Monorepo - **Repositori tunggal** untuk library dan aplikasi - **NPM Workspaces** untuk manajemen dependensi yang efisien - **Proses build terpadu** dengan `npm run build` di root ### Perbaikan UI - Memperbaiki masalah tampilan ikon toolbar editor Quill - Menyelesaikan peringatan key React di menu konteks - Meningkatkan styling editor markdown ## Fitur - 🎨 **Diagram Isometrik** - Buat diagram teknis bergaya 3D yang menakjubkan - 💾 **Auto-Save** - Pekerjaan Anda secara otomatis disimpan setiap 5 detik - 📱 **Dukungan PWA** - Instal sebagai aplikasi native di Mac dan Linux - 🔒 **Privasi Pertama** - Semua data disimpan secara lokal di browser Anda - 📤 **Impor/Ekspor** - Bagikan diagram sebagai file JSON - 🎯 **Penyimpanan Sesi** - Simpan cepat tanpa dialog - 🌐 **Dukungan Offline** - Bekerja tanpa koneksi internet - 🗄️ **Penyimpanan Server** - Penyimpanan persisten opsional saat menggunakan Docker (diaktifkan secara default) - 🌍 **Multibahasa** - Dukungan lengkap untuk 9 bahasa: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский, Bahasa Indonesia ## 🐳 Deploy Cepat dengan Docker ```bash # Menggunakan Docker Compose (disarankan - termasuk penyimpanan persisten) docker compose up # Atau jalankan langsung dari Docker Hub dengan penyimpanan persisten docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest ``` Penyimpanan server diaktifkan secara default di Docker. Diagram Anda akan disimpan ke `./diagrams` di host. Untuk menonaktifkan penyimpanan server, set `ENABLE_SERVER_STORAGE=false`: ```bash docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest ``` ## Mulai Cepat (Pengembangan Lokal) ```bash # Clone repositori git clone https://github.com/stan-smith/FossFLOW cd FossFLOW # Install dependensi npm install # Build library (diperlukan pertama kali) npm run build:lib # Mulai development server npm run dev ``` Buka [http://localhost:3000](http://localhost:3000) di browser Anda. ## Struktur Monorepo Ini adalah monorepo yang berisi dua paket: - `packages/fossflow-lib` - Library komponen React untuk menggambar diagram jaringan (dibangun dengan Webpack) - `packages/fossflow-app` - Progressive Web App untuk membuat diagram isometrik (dibangun dengan RSBuild) ### Perintah Pengembangan ```bash # Pengembangan npm run dev # Mulai development server aplikasi npm run dev:lib # Mode watch untuk pengembangan library # Build npm run build # Build library dan aplikasi npm run build:lib # Build library saja npm run build:app # Build aplikasi saja # Testing & Linting npm test # Jalankan unit test npm run lint # Periksa error linting # E2E Tests (Selenium) cd e2e-tests ./run-tests.sh # Jalankan end-to-end tests (memerlukan Docker & Python) # Publishing npm run publish:lib # Publish library ke npm ``` ## Cara Menggunakan ### Membuat Diagram 1. **Tambahkan Item**: - Tekan tombol "+" di menu kanan atas, library komponen akan muncul di kiri - Seret dan lepas komponen dari library ke kanvas - Atau klik kanan pada grid dan pilih "Add node" 2. **Hubungkan Item**: - Pilih alat Konektor (tekan 'C' atau klik ikon konektor) - **Mode klik** (default): Klik node pertama, lalu klik node kedua - **Mode seret** (opsional): Klik dan seret dari node pertama ke node kedua - Beralih mode di Pengaturan → tab Konektor 3. **Simpan Pekerjaan Anda**: - **Simpan Cepat** - Menyimpan ke sesi browser - **Ekspor** - Unduh sebagai file JSON - **Impor** - Muat dari file JSON ### Opsi Penyimpanan - **Penyimpanan Sesi**: Simpan sementara yang dihapus saat browser ditutup - **Ekspor/Impor**: Penyimpanan permanen sebagai file JSON - **Auto-Save**: Secara otomatis menyimpan perubahan setiap 5 detik ke sesi ## Berkontribusi Kami menyambut kontribusi! Silakan lihat [CONTRIBUTORS.md](../CONTRIBUTORS.md) untuk panduan. ## Dokumentasi - [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Panduan lengkap untuk codebase - [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Panduan kontribusi ## Lisensi MIT