FossFLOW - Isometric Diagramming Tool

English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch

Note:

This repo is a fork of stan-smith/FossFLOW (which in turn was a fork of markmanx/isoflow) originally made for the purpose of contributing to the original repo through PRs, however the username of the author seems to have been changed to mug-book-droid and their activity set to private (account suspended maybe?), making the original repo inaccessible.

For now, I intend to make this repo a continuation of development to FossFLOW from myself, and any contributions through PRs are welcome as well.

You can check out the last state of the original repo that I fetched on backup/stan-smith-FossFLOW branch.

Try it online

Go to --> https://abrar74774.github.io/FossFLOW/ <--

This just in: Connectors get multiplexed!

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.

• 🤝 CONTRIBUTING.md - How to contribute to the project.

🐳 Quick Deploy with Docker

# Using Docker Compose (recommended - includes persistent storage)
docker compose up

# Or run directly from Docker Hub with persistent storage
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

Server storage is enabled by default in Docker. Your diagrams will be saved to ./diagrams on the host.

To disable server storage, set ENABLE_SERVER_STORAGE=false:

docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

HTTP Basic Authentication (Optional)

Protect your FossFLOW instance with HTTP Basic Auth:

# With Docker Compose
HTTP_AUTH_USER=admin HTTP_AUTH_PASSWORD=secret docker compose up

# Or with docker run
docker run -p 80:80 \
  -e HTTP_AUTH_USER=admin \
  -e HTTP_AUTH_PASSWORD=secret \
  stnsmith/fossflow:latest

Note: Both variables must be set to enable authentication. If either is empty, the app is accessible without login.

Quick Start (Local Development)

# Clone the repository
git clone https://github.com/Abrar74774/FossFLOW
cd FossFLOW

# Install dependencies
npm install

# Build the library (required first time)
npm run build:lib

# Start development server
npm run dev

Open 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 which wraps the lib and presents it (built with RSBuild)

Development Commands

# 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 unit tests
npm run lint         # Check for linting errors

# E2E Tests (Selenium)
cd e2e-tests
./run-tests.sh       # Run end-to-end tests (requires Docker & Python)

# Publishing
npm run publish:lib  # Publish library to npm

How to Use

Creating Diagrams

1. Add Items:
2. Press the "+" button on the top right menu, the library of components will appear on the left
3. Drag and drop components from the library onto the canvas

4. Or right-click on the grid and select "Add node"

5. Connect Items:

6. Select the Connector tool (press 'C' or click connector icon)
7. Click mode (default): Click first node, then click second node
8. Drag mode (optional): Click and drag from first to second node

9. Switch modes in Settings → Connectors tab

10. Save Your Work:

11. Quick Save - Saves to browser session
12. Export - Download as JSON file
13. 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 CONTRIBUTING.md for guidelines.

Documentation

• FOSSFLOW_ENCYCLOPEDIA.md - Comprehensive guide to the codebase
• CONTRIBUTING.md - Contributing guidelines

License

MIT