GitHub - stan-smith/FossFLOW: Make beautiful isometric infrastructure diagrams

Resumen Principal

FossFLOW es una aplicación web progresiva (PWA) de código abierto y altamente eficiente, diseñada específicamente para la creación de diagramas isométricos de manera intuitiva y visualmente atractiva. Desarrollada con React y construida sobre una bifurcación de la librería Isoflow (ahora publicada como fossflow en NPM), esta herramienta se ejecuta completamente en el navegador y ofrece soporte offline, garantizando accesibilidad y funcionalidad en diversas condiciones. Su reciente actualización ha introducido mejoras significativas en el rendimiento, resultando en una experiencia de usuario más fluida, y ha ampliado drásticamente su alcance global gracias a un soporte multilingüe robusto que abarca nueve idiomas. Además, la herramienta ha refinado su funcionalidad principal de conexión de elementos, ofreciendo modos de interacción más predecibles y fiables. FossFLOW no solo destaca por su facilidad de uso para dibujar, sino también por sus sólidas opciones de despliegue y desarrollo, haciendo honor a su filosofía de ser una solución potente y accesible.

Elementos Clave

Plataforma y Propósito: FossFLOW es una Progressive Web App (PWA) de código abierto que permite crear diagramas isométricos visualmente atractivos. Funciona íntegramente en el navegador, ofreciendo soporte offline, lo que la convierte en una herramienta versátil y siempre disponible para usuarios que necesitan diseñar estructuras o redes con una perspectiva isométrica.
Base Tecnológica y Arquitectura: La aplicación está construida con React y utiliza una librería subyacente (fossflow) que es una bifurcación de Isoflow. Su estructura es un monorepo que organiza packages/fossflow-lib (una librería de componentes React para dibujar diagramas) y packages/fossflow-app (la PWA que envuelve y presenta la librería), lo que facilita tanto su desarrollo como su mantenimiento modular.
Mejoras en Usabilidad y Accesibilidad: Recientes actualizaciones han optimizado el rendimiento con una reducción del retardo de actualización de fotogramas, lo que resulta en una experiencia más fluida. Además, ofrece soporte multilingüe completo en 9 idiomas, con un selector fácil de usar y detección de preferencias, y ha mejorado la herramienta de conexión con un modo de creación por clic más fiable, manteniendo la opción de arrastre.
Despliegue y Contribución: FossFLOW es fácil de desplegar con Docker, permitiendo una configuración rápida con persistencia de datos o la opción de deshabilitarla. Para desarrolladores, el monorepo facilita el desarrollo local con comandos específicos para la librería y la aplicación, así como para pruebas, linting y publicación, promoviendo activamente la contribución a su código abierto.

Análisis e Implicaciones

FossFLOW tiene implicaciones significativas para la visualización técnica y el diseño, al ofrecer una herramienta de código abierto que democratiza la creación de diagramas isométricos complejos. Su naturaleza de PWA y el soporte offline garantizan una amplia adopción y utilidad en diversos entornos, eliminando barreras de software y hardware. El énfasis en la facilidad de uso y el soporte multilingüe amplía su audiencia potencial, desde ingenieros y arquitectos hasta educadores y estudiantes.

Contexto Adicional

El desarrollador, Stan, solicita amablemente donaciones para el proyecto, destacando los desafíos de trabajar en él a tiempo completo y rinde homenaje al creador de la librería subyacente, @markmanx, reconociendo su contribución fundamental.

FossFLOW - Isometric Diagramming Tool

Hey! Stan here, if you've used FossFLOW and it's helped you, I'd really appreciate if you could donate something small :) I work full time, and finding the time to work on this project is challenging enough. If you've had a feature that I've implemented for you, or fixed a bug it'd be great if you could :) if not, that's not a problem, this software will always remain free!

Also! If you haven't yet, please check out the underlying library this is built on by @markmanx I truly stand on the shoulders of a giant here 🫡

Thanks,

-Stan

Try it online

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

Check out my latest project: SlingShot - Dead easy video streaming over QUIC

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.

📝 FOSSFLOW_TODO.md - Current issues and roadmap with codebase mappings, most gripes are with the isoflow library itself.
🤝 CONTRIBUTING.md - How to contribute to the project.

Performance updates

Reduced frame refresh delay, should look much smoother now

Multilingual Support

9 Languages Supported - Full interface translation in English, Chinese (Simplified), Spanish, Portuguese (Brazilian), French, Hindi, Bengali, Russian, and Indonesian
Language Selector - Easy-to-use language switcher in the app header
Complete Translation - All menus, dialogs, settings, tooltips, and help content translated
Locale-Aware - Automatically detects and remembers your language preference

Improved Connector Tool

Click-based Creation - New default mode: click first node, then second node to connect
Drag Mode Option - Original drag-and-drop still available via settings
Mode Selection - Switch between click and drag modes in Settings → Connectors tab
Better Reliability - Click mode provides more predictable connection creation

🐳 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

Quick Start (Local Development)

# Clone the repository
git clone https://github.com/stan-smith/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

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"
Connect Items:
- Select the Connector tool (press 'C' or click connector icon)
- Click mode (default): Click first node, then click second node
- Drag mode (optional): Click and drag from first to second node
- Switch modes in Settings → Connectors tab
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 CONTRIBUTING.md for guidelines.

Documentation

FOSSFLOW_ENCYCLOPEDIA.md - Comprehensive guide to the codebase
FOSSFLOW_TODO.md - Current issues and roadmap
CONTRIBUTING.md - Contributing guidelines

License

MIT

Absortio