stan-smith/OpenFLOW: Make beautiful isometric infrastructure diagrams

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

• 🎨 Isometric Diagramming – Create stunning 3D-style technical diagrams
• 💾 Auto-Save – Your work is automatically saved every 5 seconds
• 🔒 Privacy-First – All data stored locally in your browser
• 📤 Import/Export – Share diagrams as JSON files
• 🌐 Offline Support – Work without internet connection

# Clone the repository
git clone https://github.com/stan-smith/OpenFLOW
cd openflow-local

# 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
• Ctrl/Cmd + Z – Undo (if supported by browser)
• 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.

MIT

Built with the ISOFLOW (https://github.com/markmanx/isoflow) library.

Check out my website:
x0z.co

Keep your files stored safely and securely with the SanDisk 2TB Extreme Portable SSD. With over 69,505 ratings and an impressive 4.6 out of 5 stars, this product has been purchased over 8K+ times in the past month. At only $129.99, this Amazon’s Choice product is a must-have for secure file storage.

Help keep private content private with the included password protection featuring 256-bit AES hardware encryption. Order now for just $129.99 on Amazon!

Help Power Techcratic’s Future – Scan To Support

If Techcratic’s content and insights have helped you, consider giving back by supporting the platform with crypto. Every contribution makes a difference, whether it’s for high-quality content, server maintenance, or future updates. Techcratic is constantly evolving, and your support helps drive that progress.

As a solo operator who wears all the hats, creating content, managing the tech, and running the site, your support allows me to stay focused on delivering valuable resources. Your support keeps everything running smoothly and enables me to continue creating the content you love. I’m deeply grateful for your support, it truly means the world to me! Thank you!