Back Original

OpenFLOW – Quickly make beautiful infrastructure diagrams local to your machine

FossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the Isoflow library, it runs entirely in your browser with offline support.

Screenshot_20250630_160954

  • 📝 ISOFLOW_TODO.md - Current issues and roadmap with codebase mappings, most gripes are with the isoflow library itself.
  • 🤝 CONTRIBUTORS.md - How to contribute to the project.
  • 🎨 Isometric Diagramming - Create stunning 3D-style technical diagrams
  • 💾 Auto-Save - Your work is automatically saved every 5 seconds
  • 📱 PWA Support - Install as a native app on Mac and Linux
  • 🔒 Privacy-First - All data stored locally in your browser
  • 📤 Import/Export - Share diagrams as JSON files
  • 🎯 Session Storage - Quick save without dialogs
  • 🌐 Offline Support - Work without internet connection
# Clone the repository
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW

# Make sure you have npm installed

# Install dependencies
npm install

# Start development server
npm start

Open http://localhost:3000 in your browser.

  1. Add Items: Drag and drop components from the library onto the canvas
  2. Connect Items: Use connectors to show relationships between components
  3. Customize: Change colors, labels, and properties of items
  4. Navigate: Pan and zoom to work on different areas
  • Auto-Save: Diagrams are automatically saved to browser storage every 5 seconds
  • Quick Save: Click "Quick Save (Session)" for instant saves without popups
  • Save As: Use "Save New" to create a copy with a different name
  • Load: Click "Load" to see all your saved diagrams
  • Import: Load diagrams from JSON files shared by others
  • Export: Download your diagrams as JSON files to share or backup
  • Storage: Use "Storage Manager" to manage browser storage space
  • Delete - Remove selected items
  • Mouse wheel - Zoom in/out
  • Click and drag - Pan around canvas
# Create optimized production build
npm run build

# Serve the production build locally
npx serve -s build

The build folder contains all files needed for deployment.

Deploy the build folder to any static hosting service:

  • GitHub Pages
  • Netlify
  • Vercel
  • AWS S3
  • Any web server
  1. HTTPS Required: PWA features require HTTPS (except localhost)
  2. Browser Storage: Diagrams are saved in browser localStorage (~5-10MB limit)
  3. Backup: Regularly export important diagrams as JSON files
  • Chrome/Edge (Recommended) ✅
  • Firefox ✅
  • Safari ✅
  • Mobile browsers with PWA support ✅
  • Use Storage Manager to free space
  • Export and delete old diagrams
  • Clear browser data (last resort - will delete all diagrams)
  • Ensure using HTTPS
  • Try Chrome or Edge browsers
  • Check if already installed
  • Check browser's localStorage
  • Look for auto-saved versions
  • Always export important work
  • React - UI framework
  • TypeScript - Type safety
  • Isoflow - Isometric diagram engine
  • PWA - Offline-first web app

Contributions are welcome! Please feel free to submit a Pull Request.

Isoflow is released under the MIT license.

FossFLOW is released under the Unlicense license, do what you want with it.

Built with the Isoflow library.

x0z.co