FossFLOW - Alat Diagram Isometrik

<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. 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!

<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 🫡

<b> https://buymeacoffee.com/stan.smith </b>

Terima kasih,

-Stan

Coba Secara Online

Kunjungi <b> --> https://stan-smith.github.io/FossFLOW/ <-- </b>

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.

• 🤝 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 - Ribuan ikon SVG gratis
  • Flaticon Isometric Icons - 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

# 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:

docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

Mulai Cepat (Pengembangan Lokal)

# 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 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

# 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 untuk panduan.

Dokumentasi

• FOSSFLOW_ENCYCLOPEDIA.md - Panduan lengkap untuk codebase
• CONTRIBUTORS.md - Panduan kontribusi

Lisensi

MIT