stan-smith · akmalsyrf · Dec 23, 2025
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # FossFLOW - Isometric Diagramming Tool <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <a href="README.md">English</a> | <a href="docs/README.cn.md">简体中文</a> | <a href="docs/README.es.md">Español</a> | <a href="docs/README.pt.md">Português</a> | <a href="docs/README.fr.md">Français</a> | <a href="docs/README.hi.md">हिन्दी</a> | <a href="docs/README.bn.md">বাংলা</a> | <a href="docs/README.ru.md">Русский</a>
+ <a href="README.md">English</a> | <a href="docs/README.cn.md">简体中文</a> | <a href="docs/README.es.md">Español</a> | <a href="docs/README.pt.md">Português</a> | <a href="docs/README.fr.md">Français</a> | <a href="docs/README.hi.md">हिन्दी</a> | <a href="docs/README.bn.md">বাংলা</a> | <a href="docs/README.ru.md">Русский</a> | <a href="docs/README.id.md">Bahasa Indonesia</a>
 </p>
 
 <b>Hey!</b> Stan here, if you've used FossFLOW and it's helped you, <b>I'd really appreciate if you could donate something small :)</b> I work full time, and finding the time to work on this project is challenging enough.
@@ -37,7 +37,7 @@ FossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beaut
  - **Reduced frame refresh delay, should look much smoother now**
 
 ### Multilingual Support
-- **8 Languages Supported** - Full interface translation in English, Chinese (Simplified), Spanish, Portuguese (Brazilian), French, Hindi, Bengali, and Russian
+- **9 Languages Supported** - Full interface translation in English, Chinese (Simplified), Spanish, Portuguese (Brazilian), French, Hindi, Bengali, Russian, and Indonesian
 - **Language Selector** - Easy-to-use language switcher in the app header
 - **Complete Translation** - All menus, dialogs, settings, tooltips, and help content translated
 - **Locale-Aware** - Automatically detects and remembers your language preference
@@ -96,7 +96,7 @@ FossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beaut
 - 🎯 **Session Storage** - Quick save without dialogs
 - 🌐 **Offline Support** - Work without internet connection
 - 🗄️ **Server Storage** - Optional persistent storage when using Docker (enabled by default)
-- 🌍 **Multilingual** - Full support for 8 languages: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский
+- 🌍 **Multilingual** - Full support for 9 languages: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский, Bahasa Indonesia
 
 
 ## 🐳 Quick Deploy with Docker

diff --git a/docs/README.bn.md b/docs/README.bn.md
@@ -1,7 +1,7 @@
 # FossFLOW - আইসোমেট্রিক ডায়াগ্রাম টুল <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <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.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>
 </p>
 
 <b>হ্যালো!</b> আমি Stan, যদি আপনি FossFLOW ব্যবহার করে থাকেন এবং এটি আপনাকে সাহায্য করেছে, <b>আমি সত্যিই প্রশংসা করব যদি আপনি কিছু ছোট দান করতে পারেন :)</b> আমি পূর্ণকালীন কাজ করি, এবং এই প্রকল্পে কাজ করার সময় খুঁজে পাওয়াটা যথেষ্ট চ্যালেঞ্জিং।

diff --git a/docs/README.cn.md b/docs/README.cn.md
@@ -1,7 +1,7 @@
 # FossFLOW - 等距图表工具 <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <a href="../README.md">English</a> | <a href="README.cn.md">简体中文</a>
+ <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>
 </p>
 
 <b>嗨！</b> 我是 Stan，如果您使用过 FossFLOW 并觉得它对您有帮助，<b>我会非常感激您能捐助一点点 :)</b> 我全职工作，抽时间来维护这个项目已经很不容易了。

diff --git a/docs/README.es.md b/docs/README.es.md
@@ -1,7 +1,7 @@
 # FossFLOW - Herramienta de Diagramas Isométricos <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <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.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>
 </p>
 
 <b>¡Hola!</b> Soy Stan, si has usado FossFLOW y te ha ayudado, <b>¡realmente agradecería si pudieras donar algo pequeño :)</b> Trabajo a tiempo completo, y encontrar tiempo para trabajar en este proyecto ya es bastante desafiante.

diff --git a/docs/README.fr.md b/docs/README.fr.md
@@ -1,7 +1,7 @@
 # FossFLOW - Outil de Diagrammes Isométriques <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <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.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>
 </p>
 
 <b>Salut !</b> C'est Stan, si vous avez utilisé FossFLOW et qu'il vous a aidé, <b>j'apprécierais vraiment si vous pouviez faire un petit don :)</b> Je travaille à temps plein, et trouver le temps de travailler sur ce projet est déjà assez difficile.

diff --git a/docs/README.hi.md b/docs/README.hi.md
@@ -1,7 +1,7 @@
 # FossFLOW - आइसोमेट्रिक आरेख उपकरण <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <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.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>
 </p>
 
 <b>नमस्ते!</b> मैं Stan हूं, यदि आपने FossFLOW का उपयोग किया है और इसने आपकी मदद की है, <b>तो मैं वास्तव में सराहना करूंगा यदि आप कुछ छोटा दान कर सकें :)</b> मैं पूर्णकालिक काम करता हूं, और इस परियोजना पर काम करने के लिए समय निकालना पर्याप्त चुनौतीपूर्ण है।

diff --git a/docs/README.id.md b/docs/README.id.md
@@ -0,0 +1,209 @@
+# FossFLOW - Alat Diagram Isometrik <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
+
+<p align="center">
+ <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>
+</p>
+
+<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 🫡
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3)
+
+<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>
+
+
+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.
+
+![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55)
+
+- **📝 [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.
+- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cara berkontribusi pada proyek.
+
+## Pembaruan Terbaru (Oktober 2025)
+
+### Pembaruan Performa
+ - **Mengurangi delay refresh frame, seharusnya terlihat lebih halus sekarang**
+
+### Dukungan Multibahasa
+- **9 Bahasa Didukung** - Terjemahan antarmuka lengkap dalam Bahasa Inggris, Cina (Sederhana), Spanyol, Portugis (Brasil), Prancis, Hindi, Bengali, Rusia, dan Bahasa Indonesia
+- **Pemilih Bahasa** - Pengganti bahasa yang mudah digunakan di header aplikasi
+- **Terjemahan Lengkap** - Semua menu, dialog, pengaturan, tooltip, dan konten bantuan diterjemahkan
+- **Sadar Lokal** - Secara otomatis mendeteksi dan mengingat preferensi bahasa Anda
+
+### Alat Konektor yang Ditingkatkan
+- **Pembuatan Berbasis Klik** - Mode default baru: klik node pertama, lalu klik node kedua untuk terhubung
+- **Opsi Mode Seret** - Drag-and-drop asli masih tersedia melalui pengaturan
+- **Pemilihan Mode** - Beralih antara mode klik dan seret di Pengaturan → tab Konektor
+- **Keandalan Lebih Baik** - Mode klik memberikan pembuatan koneksi yang lebih dapat diprediksi
+
+### 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
+- [FOSSFLOW_TODO.md](../FOSSFLOW_TODO.md) - Masalah saat ini dan roadmap
+- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Panduan kontribusi
+
+## Lisensi
+
+MIT
+
diff --git a/docs/README.pt.md b/docs/README.pt.md
@@ -1,7 +1,7 @@
 # FossFLOW - Ferramenta de Diagramas Isométricos <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
 
 <p align="center">
- <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.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>
 </p>
 
 <b>Olá!</b> Aqui é o Stan, se você usou o FossFLOW e ele te ajudou, <b>eu realmente agradeceria se você pudesse doar algo pequeno :)</b> Eu trabalho em tempo integral, e encontrar tempo para trabalhar neste projeto já é desafiador o suficiente.