OpenFLOW - Alat untuk Membuat Diagram Infrastruktur yang Indah dengan Cepat Secara Lokal

 (github.com/stan-smith)
46 poin oleh GN⁺ 2025-07-02 | 1 komentar | Bagikan ke WhatsApp
  • PWA pembuat diagram isometrik (gaya 3D) open-source yang berjalan berbasis browser
  • Berbasis React dan mesin Isoflow, bekerja offline tanpa instalasi serta menyediakan beragam fitur seperti perlindungan privasi, penyimpanan otomatis, dan Import/Export yang mudah
  • Semua data disimpan di penyimpanan lokal browser, dan diagram dapat dibagikan atau dicadangkan dengan bebas sebagai file JSON
  • Mendukung hosting statis seperti GitHub Pages dan Netlify, dan fitur PWA dapat digunakan sepenuhnya di lingkungan HTTPS

Ikhtisar OpenFLOW dan Nilai Proyek

  • OpenFLOW adalah PWA (Progressive Web App) open-source gratis yang berguna bagi developer dan profesional IT saat memvisualisasikan desain infrastruktur dan struktur jaringan
  • Dibandingkan alat pesaing, pekerjaan dapat dilakukan lebih cepat dan aman secara lokal, serta fitur dapat digunakan bahkan tanpa koneksi jaringan
  • Dengan memanfaatkan mesin Isoflow, OpenFLOW dapat membuat diagram bergaya 3D yang menarik, dan menjamin privasi yang kuat karena semua data tidak dikirim ke server eksternal
  • Berkat UI yang intuitif, penyimpanan otomatis, serta fitur impor/ekspor yang praktis untuk pekerjaan nyata, berbagai tim dan individu dapat dengan mudah mendokumentasikan jaringan dan arsitektur
  • Kebutuhan lingkungan pengembangannya rendah, dan pekerjaan bisa langsung dimulai hanya dengan web browser tanpa instalasi khusus

Fitur Utama

  • Pembuatan diagram isometrik: visualisasi jaringan, sistem, diagram teknis, dan lainnya dengan nuansa 3D
  • Penyimpanan otomatis: riwayat pekerjaan disimpan otomatis setiap 5 detik
  • Perlindungan privasi: data hanya disimpan secara lokal di browser (batas 5~10MB)
  • Import/Export: mendukung berbagi dan pencadangan diagram sebagai file JSON
  • Mode offline: semua fitur dapat digunakan tanpa internet
  • Eksekusi cepat: dapat diinstal dan dijalankan sebagai PWA

Deployment dan Hosting

  • Hosting statis: deploy folder build ke GitHub Pages, Netlify, Vercel, AWS S3, dan lainnya
  • HTTPS wajib: HTTPS diperlukan agar PWA berfungsi dengan baik (lokal dikecualikan)
  • Pencadangan berkala disarankan: untuk pekerjaan penting, ekspor ke JSON untuk cadangan

Tech Stack

  • React, TypeScript, Isoflow, PWA

Browser yang Kompatibel

  • Chrome/Edge (disarankan), Firefox, Safari, dukungan PWA mobile

Open Source dan Kontribusi

  • Isoflow Community Edition (lisensi MIT) + OpenFLOW (Unlicense)
  • Siapa pun bebas menggunakan, memodifikasi, dan mendistribusikannya

Bacaan terkait

1 komentar

 
GN⁺ 2025-07-02
Komentar Hacker News
  • Menjelaskan bahwa mereka tetap menggunakan Mermaid.js karena meski tampilannya kurang disukai, sintaksnya sulit, dan cukup banyak bug, alat ini tetap menjadi salah satu tool diagram yang paling didukung oleh static site generator; mereka juga berharap diagram Isoflow bisa di-embed ke Markdown semudah ini
    • Terima kasih atas komentarnya yang menarik, akan ditambahkan ke daftar TODO
    • Ide Mermaid sendiri bagus, tetapi sintaksnya terlalu rumit dan integrasinya dengan tool seperti GitLab bermasalah dan tidak stabil
    • Jika ada fitur integrasi Markdown, itu akan memberi manfaat yang jauh lebih besar bagi pengguna
  • Ada usulan bahwa Isoflow akan cocok dipakai bersama Styus; Stylus diperkenalkan sebagai home status server ringan yang otomatis mengubah class CSS, dan tautan terkait juga dibagikan https://github.com/mmastrac/stylus; ada harapan ini akan kompatibel dengan baik dengan library Isoflow
  • Membagikan bahwa mereka selalu menyukai diagram isometrik yang muncul dalam buku Clive Maxfield, dan bahwa banyak skema rangkaian memiliki struktur non-planar seperti flip-flop, lapisan semikonduktor, dan arsitektur FPGA; menurut pengalaman mereka, penambahan perspektif membuat informasi terasa kurang rumit dan lebih mudah dipahami atau diingat, sehingga pendekatan ini dinilai cocok juga untuk berbagai bidang teknis https://www.clivemaxfield.com
  • Mengingatkan bahwa Snowflake baru-baru ini merilis produk bernama Openflow, jadi nama ini mungkin akan sulit ditemukan; perlu dipikirkan kembali soal penamaan
  • Bertanya sebenarnya apa yang ditambahkan di atas Isoflow, karena terasa seperti Isoflow-lah yang memegang peran paling inti
    • Menjelaskan secara terbuka bahwa Isoflow memang mengerjakan 90% dari pekerjaan; tidak ada yang disembunyikan, hanya saja belum ada bentuk yang siap langsung dipakai dari community pack sehingga mereka menyediakannya sendiri
  • Menekankan bahwa tanpa pekerjaan khusus apa pun, mereka hanya membungkus ISOFLOW Community Edition https://github.com/markmanx/isoflow agar setup dan menjalankannya menjadi sangat mudah; juga menyediakan kemudahan ekspor dan impor ulang backup JSON diagram, sehingga praktis memungkinkan pembuatan diagram tanpa batas dan langsung mengatasi keterbatasan versi komunitas
    • Ada pertanyaan dari pengguna yang tidak akrab dengan Node.js: di mana grafik ikon bergaya 3D berada dalam kode Isoflow, apakah itu file SVG, dan apakah ikon kustom bisa ditambahkan
  • Pujian untuk kualitas diagramnya; juga mengenang bahwa proyek serupa di masa lalu pernah kesulitan melakukan monetisasi lalu berhenti, sementara proyek ini terasa tidak menjadikan monetisasi sebagai tujuan utama karena berlisensi MIT OSS; mereka juga menemukan bahwa tautan "Built with the Isoflow library" di bagian bawah menghasilkan error 404 dan memberi tahu hal itu https://github.com/isoflow/isoflow
    • Menjelaskan bahwa hampir seluruh kredit untuk desain dan ikon memang milik Isoflow, dan bahwa Community Edition dirancang untuk mendorong upsell ke versi Pro; sama sekali tidak ada rencana monetisasi, hanya berharap orang-orang senang menggunakannya; soal tautan yang salah akan segera diperbaiki
  • Bertanya apakah ini juga bisa di-host di GitHub Pages dan meminta tautan demo
  • Menilai ini sebagai aplikasi yang menarik dan memberikan umpan balik positif atas informasi detail yang dibagikan