Saga3D is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the Isoflow (Now forked and published to NPM as fossflow) library, it runs entirely in your browser with offline support.

Tell your system's saga in 3D

• 📝 FOSSFLOW_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/Saga3D
cd Saga3D

# 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
• NEW Crtl+Z undo Ctrl+Y redo

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

If you need the app to be deployed to a custom path (i.e. not root), use instead:

# Create optimized production build for given path
PUBLIC_URL="https://mydomain.tld/path/to/app" npm run build

That will add the defined PUBLIC_URL as a prefix to all links to static files.

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.

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

Built with the Isoflow library.

Tell your system's saga in 3D with Saga3D.