# FossFLOW - Herramienta de Diagramas Isométricos 
English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch
¡Hola! Soy Stan, si has usado FossFLOW y te ha ayudado, ¡realmente agradecería si pudieras donar algo pequeño :) Trabajo a tiempo completo, y encontrar tiempo para trabajar en este proyecto ya es bastante desafiante.
Si he implementado una función para ti o arreglado un error, sería genial si pudieras :) si no, no hay problema, ¡este software siempre será gratuito!
¡También! Si aún no lo has hecho, por favor echa un vistazo a la biblioteca subyacente en la que esto está construido por @markmanx Realmente estoy sobre los hombros de un gigante aquí 🫡
[](https://ko-fi.com/P5P61KBXA3)
https://buymeacoffee.com/stan.smith
Gracias,
-Stan
## Pruébalo en línea
Ve a --> https://stan-smith.github.io/FossFLOW/ <--
------------------------------------------------------------------------------------------------------------------------------
FossFLOW es una potente aplicación web progresiva (PWA) de código abierto para crear hermosos diagramas isométricos. Construido con React y la biblioteca Isoflow (Ahora bifurcada y publicada en NPM como fossflow), se ejecuta completamente en tu navegador con soporte sin conexión.
- **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Cómo contribuir al proyecto.
## Actualizaciones Recientes (Octubre 2025)
### Soporte Multilingüe
- **8 Idiomas Soportados** - Traducción completa de la interfaz en inglés, chino (simplificado), español, portugués (brasileño), francés, hindi, bengalí y ruso
- **Selector de Idioma** - Selector de idioma fácil de usar en el encabezado de la aplicación
- **Traducción Completa** - Todos los menús, diálogos, configuraciones, información sobre herramientas y contenido de ayuda traducidos
- **Consciente de la Localización** - Detecta y recuerda automáticamente tu preferencia de idioma
### Herramienta de Conector Mejorada
- **Creación Basada en Clics** - Nuevo modo predeterminado: haz clic en el primer nodo, luego en el segundo nodo para conectar
- **Opción de Modo de Arrastre** - El arrastre y colocación original sigue disponible a través de configuración
- **Selección de Modo** - Cambia entre los modos de clic y arrastre en Configuración → pestaña Conectores
- **Mejor Fiabilidad** - El modo de clic proporciona una creación de conexión más predecible
### Importación de Iconos Personalizados
- **Importa Tus Propios Iconos** - Sube iconos personalizados (PNG, JPG, SVG) para usar en tus diagramas
- **Escalado Automático** - Los iconos se escalan automáticamente a tamaños consistentes para una apariencia profesional
- **Alternar Isométrico/Plano** - Elige si los iconos importados aparecen como 3D isométrico o 2D plano
- **Persistencia Inteligente** - Los iconos personalizados se guardan con los diagramas y funcionan en todos los métodos de almacenamiento
- **Recursos de Iconos** - Encuentra iconos gratuitos en:
- [Iconify Icon Sets](https://icon-sets.iconify.design/) - Miles de iconos SVG gratuitos
- [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Paquetes de iconos isométricos de alta calidad
### Soporte de Almacenamiento en Servidor
- **Almacenamiento Persistente** - Diagramas guardados en el sistema de archivos del servidor, persisten entre sesiones del navegador
- **Acceso Multi-dispositivo** - Accede a tus diagramas desde cualquier dispositivo cuando uses implementación Docker
- **Detección Automática** - La interfaz de usuario muestra automáticamente el almacenamiento del servidor cuando está disponible
- **Protección contra Sobrescritura** - Diálogo de confirmación al guardar con nombres duplicados
- **Integración Docker** - Almacenamiento en servidor habilitado por defecto en implementaciones Docker
### Funciones de Interacción Mejoradas
- **Teclas de Acceso Rápido Configurables** - Tres perfiles (QWERTY, SMNRCT, Ninguno) para selección de herramientas con indicadores visuales
- **Controles de Panorámica Avanzados** - Múltiples métodos de panorámica incluyendo arrastre de área vacía, clic medio/derecho, teclas modificadoras (Ctrl/Alt) y navegación por teclado (Flechas/WASD/IJKL)
- **Alternar Flechas de Conector** - Opción para mostrar/ocultar flechas en conectores individuales
- **Selección de Herramienta Persistente** - La herramienta de conector permanece activa después de crear conexiones
- **Diálogo de Configuración** - Configuración centralizada para teclas de acceso rápido y controles de panorámica
### Mejoras de Docker y CI/CD
- **Compilaciones Docker Automatizadas** - Flujo de trabajo de GitHub Actions para implementación automática de Docker Hub en commits
- **Soporte Multi-arquitectura** - Imágenes Docker para `linux/amd64` y `linux/arm64`
- **Imágenes Pre-construidas** - Disponibles en `stnsmith/fossflow:latest`
### Arquitectura Monorepo
- **Repositorio único** para biblioteca y aplicación
- **NPM Workspaces** para gestión de dependencias optimizada
- **Proceso de compilación unificado** con `npm run build` en la raíz
### Correcciones de Interfaz
- Se corrigió el problema de visualización de iconos de la barra de herramientas del editor Quill
- Se resolvieron advertencias de clave React en menús contextuales
- Se mejoró el estilo del editor de markdown
## Características
- 🎨 **Diagramación Isométrica** - Crea impresionantes diagramas técnicos en estilo 3D
- 💾 **Autoguardado** - Tu trabajo se guarda automáticamente cada 5 segundos
- 📱 **Soporte PWA** - Instala como una aplicación nativa en Mac y Linux
- 🔒 **Privacidad Primero** - Todos los datos se almacenan localmente en tu navegador
- 📤 **Importar/Exportar** - Comparte diagramas como archivos JSON
- 🎯 **Almacenamiento de Sesión** - Guardado rápido sin diálogos
- 🌐 **Soporte Sin Conexión** - Trabaja sin conexión a internet
- 🗄️ **Almacenamiento en Servidor** - Almacenamiento persistente opcional cuando se usa Docker (habilitado por defecto)
- 🌍 **Multilingüe** - Soporte completo para 8 idiomas: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский
## 🐳 Implementación Rápida con Docker
```bash
# Usando Docker Compose (recomendado - incluye almacenamiento persistente)
docker compose up
# O ejecutar directamente desde Docker Hub con almacenamiento persistente
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest
```
El almacenamiento en servidor está habilitado por defecto en Docker. Tus diagramas se guardarán en `./diagrams` en el host.
Para deshabilitar el almacenamiento en servidor, establece `ENABLE_SERVER_STORAGE=false`:
```bash
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest
```
## Inicio Rápido (Desarrollo Local)
```bash
# Clonar el repositorio
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
# Instalar dependencias
npm install
# Compilar la biblioteca (requerido la primera vez)
npm run build:lib
# Iniciar servidor de desarrollo
npm run dev
```
Abre [http://localhost:3000](http://localhost:3000) en tu navegador.
## Estructura del Monorepo
Este es un monorepo que contiene dos paquetes:
- `packages/fossflow-lib` - Biblioteca de componentes React para dibujar diagramas de red (construida con Webpack)
- `packages/fossflow-app` - Aplicación Web Progresiva para crear diagramas isométricos (construida con RSBuild)
### Comandos de Desarrollo
```bash
# Desarrollo
npm run dev # Iniciar servidor de desarrollo de la aplicación
npm run dev:lib # Modo watch para desarrollo de biblioteca
# Compilación
npm run build # Compilar biblioteca y aplicación
npm run build:lib # Compilar solo biblioteca
npm run build:app # Compilar solo aplicación
# Pruebas y Linting
npm test # Ejecutar pruebas unitarias
npm run lint # Verificar errores de linting
# Pruebas E2E (Selenium)
cd e2e-tests
./run-tests.sh # Ejecutar pruebas end-to-end (requiere Docker y Python)
# Publicación
npm run publish:lib # Publicar biblioteca en npm
```
## Cómo Usar
### Crear Diagramas
1. **Agregar Elementos**:
- Presiona el botón "+" en el menú superior derecho, la biblioteca de componentes aparecerá a la izquierda
- Arrastra y suelta componentes de la biblioteca al lienzo
- O haz clic derecho en la cuadrícula y selecciona "Agregar nodo"
2. **Conectar Elementos**:
- Selecciona la herramienta Conector (presiona 'C' o haz clic en el icono del conector)
- **Modo de clic** (predeterminado): Haz clic en el primer nodo, luego haz clic en el segundo nodo
- **Modo de arrastre** (opcional): Haz clic y arrastra desde el primer nodo al segundo
- Cambia de modo en Configuración → pestaña Conectores
3. **Guardar Tu Trabajo**:
- **Guardado Rápido** - Guarda en la sesión del navegador
- **Exportar** - Descargar como archivo JSON
- **Importar** - Cargar desde archivo JSON
### Opciones de Almacenamiento
- **Almacenamiento de Sesión**: Guardados temporales eliminados cuando se cierra el navegador
- **Exportar/Importar**: Almacenamiento permanente como archivos JSON
- **Autoguardado**: Guarda automáticamente los cambios cada 5 segundos en la sesión
## Contribuir
¡Damos la bienvenida a las contribuciones! Por favor consulta [CONTRIBUTORS.md](../CONTRIBUTORS.md) para las pautas.
## Documentación
- [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Guía completa del código base
- [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Pautas de contribución
## Licencia
MIT