FossFLOW: Offline-Ready Isometric Diagram Builder for the Browser

FossFLOW is an open-source isometric drawing tool built with React and the Isoflow library. It runs directly in your browser, allowing you to design professional network architecture maps, technical flowcharts, and cloud deployment diagrams. Once the app is loaded, no internet connection is required.

Isometric Drawing Create 3D-style technical diagrams with visual depth.

Auto-Save Your progress is automatically saved every five seconds.

PWA Support Install FossFLOW as a standalone application on macOS, Linux, and Windows.

Privacy First All data remains stored locally within your browser.

Import / Export Share or archive diagrams as clean JSON files.

Session Storage Quickly save your work without interrupted workflows or pop-up windows.

Offline Ready The application remains fully functional without an active Wi-Fi connection.

Get Started with FossFLOW

Try It Online

Visit [stan-smith.github.io/FossFLOW/](https://stan-smith.github.io/FossFLOW/) to start drawing immediately.

Local Setup

1. Clone the repository:

   git clone https://github.com/stan-smith/FossFLOW
   cd FossFLOW
   

2. Ensure you have npm installed on your system.

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm start
   

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

How to Use FossFLOW

Building a Diagram

Add Elements Click the “+” button in the top-right menu to open the component panel. You can drag components directly onto the canvas or right-click the grid and select “Add node.” To customize a node’s appearance, click it to open the configuration options in the left sidebar.

Connect Elements Use connectors to define the relationships and data flow between different components.

Customize Modify colors, labels, and specific properties to suit your documentation needs.

Navigate Pan across the canvas by clicking and dragging, and use the mouse wheel to zoom in or out.

Saving Your Work

Auto-Save The tool automatically writes the current state of your diagram to your browser storage every five seconds.

Quick Save Select “Quick Save (Session)” for an instant save that bypasses confirmation dialogs.

Save a Copy Use the “Save New” option to fork your current work into a new file with a different name.

Managing Diagrams

Load Click “Load” to view and open your saved diagrams.

Import Load external diagrams by uploading a compatible JSON file.

Export Download your diagrams as JSON files for external backups or sharing with teammates.

Storage Manager Open the “Storage Manager” to monitor how much of your browser's localStorage quota is in use.

Keyboard Shortcuts

• Delete – Remove selected items
• Mouse wheel – Zoom in and out
• Click and drag – Pan the canvas
• Ctrl+Z – Undo
• Ctrl+Y – Redo

Production Build

1. Generate an optimized production build:

   npm run build
   

2. Serve the build locally:

   npx serve -s build
   

The build directory contains all files necessary for deployment.

To serve the app from a specific subdirectory, provide the public URL during the build process:

PUBLIC_URL="https://mydomain.tld/path/to/app" npm run build

Deployment

Static Hosting

The build folder can be hosted on any static web server or platform, including:

• GitHub Pages
• Netlify
• Vercel
• AWS S3

Important Notes

HTTPS Requirement PWA features and service workers require an HTTPS connection, except when running on localhost.

Browser Storage Diagrams are stored in localStorage, which is generally limited to 5–10 MB per domain.

Backups Since data is stored locally in the browser, you should regularly export important diagrams as JSON files to prevent data loss if browser cache is cleared.

Browser Support

• Chrome / Edge (Recommended) ✅
• Firefox ✅
• Safari ✅
• PWA-capable mobile browsers ✅

Troubleshooting

Storage Full

• Use the Storage Manager to delete unnecessary files.
• Export diagrams to JSON and then delete them from the app.
• Clearing browser site data will remove all stored diagrams.

PWA Won't Install

• Verify you are accessing the site via HTTPS.
• Use a Chromium-based browser like Chrome or Edge.
• Check if the application is already installed in your OS.

Missing Diagrams

• Check localStorage via the browser’s Developer Tools (Application tab).
• Look for auto-saved entries in the Load menu.

Tech Stack

• React – UI Library
• TypeScript – Type Safety
• Isoflow – Isometric Engine
• PWA – Offline Functionality