mirror of
https://github.com/stan-smith/FossFLOW.git
synced 2025-12-24 06:58:48 -05:00
docs: Update README with comprehensive monorepo information
- Add prominent recent updates section highlighting monorepo migration - Feature Docker improvements with multi-arch support - Include quick Docker deployment instructions - Add monorepo structure explanation - Update development commands for workspace setup - Fix documentation links to point to FossFLOW repo (not fossflow-lib) - Document UI fixes and improvements - Maintain original features and usage instructions
This commit is contained in:
Stan
153
README.md
153
README.md
@@ -1,60 +1,133 @@
|
||||
# FossFLOW Monorepo
|
||||
# FossFLOW - Isometric Diagramming Tool
|
||||
|
||||
A monorepo containing the FossFLOW diagram editor library and application.
|
||||
FossFLOW 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.
|
||||
|
||||
## Structure
|
||||
|
||||
|
||||
- `packages/fossflow-lib` - React component library for drawing network diagrams
|
||||
- `packages/fossflow-app` - Progressive Web App for creating isometric diagrams
|
||||
- **📝 [FOSSFLOW_TODO.md](https://github.com/stan-smith/FossFLOW/blob/main/ISOFLOW_TODO.md)** - Current issues and roadmap with codebase mappings, most gripes are with the isoflow library itself.
|
||||
- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/main/CONTRIBUTORS.md)** - How to contribute to the project.
|
||||
|
||||
## Quick Start
|
||||
## ✨ Recent Updates (August 2025)
|
||||
|
||||
### Monorepo Architecture
|
||||
We've successfully migrated from separate repositories to a unified monorepo structure, making development and contribution significantly easier:
|
||||
- **Single repository** for both the library (`fossflow-lib`) and application (`fossflow-app`)
|
||||
- **NPM Workspaces** for streamlined dependency management
|
||||
- **Instant library updates** available in the app during development
|
||||
- **Unified build process** with `npm run build` at the root
|
||||
|
||||
### 🐳 Docker & Deployment Improvements
|
||||
- **Multi-architecture Docker support** - Images now support both `linux/amd64` and `linux/arm64`
|
||||
- **Docker Hub integration** - Pre-built images available at `stnsmith/fossflow:latest`
|
||||
- **Simple deployment** - Just run `docker compose up` to deploy
|
||||
- **Production-ready** - Nginx-based serving with optimized builds
|
||||
|
||||
### UI Fixes
|
||||
- Fixed Quill editor toolbar icons display issue
|
||||
- Resolved React key warnings in context menus
|
||||
- Improved markdown editor styling
|
||||
|
||||
## Features
|
||||
|
||||
- 🎨 **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
|
||||
|
||||
## Try it online
|
||||
|
||||
Go to https://stan-smith.github.io/FossFLOW/
|
||||
|
||||
## 🐳 Quick Deploy with Docker
|
||||
|
||||
```bash
|
||||
# Using Docker Compose (recommended)
|
||||
docker compose up
|
||||
|
||||
# Or run directly from Docker Hub
|
||||
docker run -p 80:80 stnsmith/fossflow:latest
|
||||
```
|
||||
|
||||
## Quick Start (Local Development)
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/stan-smith/FossFLOW
|
||||
cd FossFLOW
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Run the app in development mode
|
||||
npm run dev
|
||||
|
||||
# Build both packages
|
||||
npm run build
|
||||
|
||||
# Build only the library
|
||||
# Build the library (required first time)
|
||||
npm run build:lib
|
||||
|
||||
# Build only the app
|
||||
npm run build:app
|
||||
|
||||
# Run tests
|
||||
npm test
|
||||
|
||||
# Publish the library to npm
|
||||
npm run publish:lib
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
This monorepo uses npm workspaces to manage dependencies and build processes.
|
||||
|
||||
### Working on the library
|
||||
|
||||
```bash
|
||||
npm run dev:lib
|
||||
```
|
||||
|
||||
### Working on the app
|
||||
|
||||
```bash
|
||||
# Start development server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Changes to the library are immediately available in the app during development.
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
|
||||
## Monorepo Structure
|
||||
|
||||
This is a monorepo containing two packages:
|
||||
|
||||
- `packages/fossflow-lib` - React component library for drawing network diagrams (built with Webpack)
|
||||
- `packages/fossflow-app` - Progressive Web App for creating isometric diagrams (built with RSBuild)
|
||||
|
||||
### Development Commands
|
||||
|
||||
```bash
|
||||
# Development
|
||||
npm run dev # Start app development server
|
||||
npm run dev:lib # Watch mode for library development
|
||||
|
||||
# Building
|
||||
npm run build # Build both library and app
|
||||
npm run build:lib # Build library only
|
||||
npm run build:app # Build app only
|
||||
|
||||
# Testing & Linting
|
||||
npm test # Run tests
|
||||
npm run lint # Check for linting errors
|
||||
|
||||
# Publishing
|
||||
npm run publish:lib # Publish library to npm
|
||||
```
|
||||
|
||||
## How to Use
|
||||
|
||||
### Creating Diagrams
|
||||
|
||||
1. **Add Items**:
|
||||
- Press the "+" button on the top right menu, the library of components will appear on the left
|
||||
- Drag and drop components from the library onto the canvas
|
||||
- Or right-click on the grid and select "Add node"
|
||||
|
||||
2. **Connect Items**: Use connectors to show relationships
|
||||
|
||||
3. **Save Your Work**:
|
||||
- **Quick Save** - Saves to browser session
|
||||
- **Export** - Download as JSON file
|
||||
- **Import** - Load from JSON file
|
||||
|
||||
### Storage Options
|
||||
|
||||
- **Session Storage**: Temporary saves cleared when browser closes
|
||||
- **Export/Import**: Permanent storage as JSON files
|
||||
- **Auto-Save**: Automatically saves changes every 5 seconds to session
|
||||
|
||||
## Contributing
|
||||
|
||||
We welcome contributions! Please see [CONTRIBUTORS.md](CONTRIBUTORS.md) for guidelines.
|
||||
|
||||
## Documentation
|
||||
|
||||
- [ISOFLOW_ENCYCLOPEDIA.md](packages/fossflow-lib/ISOFLOW_ENCYCLOPEDIA.md) - Comprehensive guide to the codebase
|
||||
- [ISOFLOW_TODO.md](packages/fossflow-lib/ISOFLOW_TODO.md) - Current issues and roadmap
|
||||
- [CONTRIBUTORS.md](packages/fossflow-lib/CONTRIBUTORS.md) - Contributing guidelines
|
||||
- [ISOFLOW_ENCYCLOPEDIA.md](ISOFLOW_ENCYCLOPEDIA.md) - Comprehensive guide to the codebase
|
||||
- [ISOFLOW_TODO.md](ISOFLOW_TODO.md) - Current issues and roadmap
|
||||
- [CONTRIBUTORS.md](CONTRIBUTORS.md) - Contributing guidelines
|
||||
|
||||
## License
|
||||
|
||||
|
||||
Reference in New Issue
Block a user