Cómo insatlar FossFLOW en Docker - Creador de diagramas isométricos autohospedado en Docker

FossFLOW | Isometric Diagrams | Docker

FossFLOW: Creador de diagramas isométricos de infraestructura autohospedado en Docker (alternativa open source a Cloudcraft)

Diseña diagramas isométricos de infraestructura con arrastrar/soltar. PWA con soporte offline. Almacenamiento en servidor. Componentes personalizables. JSON import/export. React + TypeScript. Open source MIT.

¿Qué es FossFLOW?


FossFLOW es una herramienta open source para crear hermosos diagramas isométricos de infraestructura completamente gratis, sin dependencias cloud, y sin límites de features. Es la alternativa gratuita y self-hosted a Cloudcraft (que cobra), permitiéndote visualizar arquitecturas de nube, infraestructura on-premise, y diseños de red de forma clara y profesional.

Propuesta clave: PWA moderno (Progressive Web App) que funciona offline en el navegador. Sin servidor requerido para funciones básicas, pero con opción de almacenamiento servidor para persistencia entre dispositivos. Todos los diagramas editables mediante drag-and-drop. Auto-save cada 5 segundos. Export/import JSON. Componentes isométricos 3D hermosos basados en isoflow library.

Características principales: Creación de diagramas isométricos drag-and-drop. Auto-save cada 5 segundos. Componentes personalizables (AWS, Azure, Google Cloud, infraestructura genérica). Importa tus propios íconos (PNG, JPG, SVG). Toggle isométrico/plano. Soporte offline completo (PWA). Almacenamiento local en navegador o servidor (Docker). Multi-dispositivo (sincroniza entre devices). Export JSON para compartir. Import JSON para cargar. Hotkeys configurables (QWERTY, SMNRCT, etc). Dark mode. Responsive design (desktop, tablet, móvil). Multi-idioma. Monorepo arquitectura: fossflow-lib (React component library) + fossflow-app (PWA) + fossflow-backend (optional Express server storage). React + TypeScript. MIT open source.

Para arquitectos/DevOps/engineers: Dibuja infraestructura profesional sin pagar. Sin vendor lock-in. Control total. Offline-capable.

Características principales

Diagrama isométrico drag-and-drop

Interfaz intuitiva. Coloca componentes con arrastrar/soltar.

PWA con soporte offline

Funciona completamente offline en navegador. Edita sin internet.

Componentes pre-built

AWS, Azure, GCP, infraestructura genérica. Creciente biblioteca.

Importa tus propios íconos

PNG, JPG, SVG custom. Escalado automático. Toggle isométrico/plano.

Auto-save cada 5 segundos

Tus cambios siempre guardados. Nunca pierdes trabajo.

Export/Import JSON

Comparte diagramas. Versión control. Portabilidad.

Almacenamiento en servidor

Docker: diagrams persisten en filesystem. Multi-dispositivo.

Hotkeys configurables

Perfiles: QWERTY, SMNRCT, None. Eficiencia.

Dark mode + Responsive

UI moderna. Desktop, tablet, móvil. Accesible.

Multi-idioma

Soporte múltiples idiomas. i18n integrado.

Zero dependencies (local)

No requiere BD, Redis, u otros servicios para funcionar.

Open source MIT

Código abierto. Gratis. Comunidad. Contribuye.

Requisitos del sistema

  • Docker & Docker Compose (opcional, para almacenamiento servidor)
  • 256 MB RAM mínimo (muy ligero)
  • 100 MB espacio disco (para imagen Docker)
  • Puerto 80 o custom (para acceso web)
  • Navegador moderno: Chrome, Edge, Firefox, Safari
  • Soporte para PWA (requerido para instalación app)
Ultra-ligero: PWA funciona sin servidor. Docker opcional solo para persistencia multi-dispositivo.

Instalación con Docker Compose (recomendado)

Opción 1: Docker Compose (almacenamiento persistente)

cat > docker-compose.yml << 'EOF' version: '3.8' services: fossflow: image: stnsmith/fossflow:latest container_name: fossflow restart: unless-stopped ports: - "80:80" volumes: - ./diagrams:/data/diagrams environment: # Almacenamiento en servidor (recomendado) - ENABLE_SERVER_STORAGE=true - STORAGE_PATH=/data/diagrams # Modo producción - NODE_ENV=production # Backup a Git (opcional) - ENABLE_GIT_BACKUP=false healthcheck: test: ["CMD-SHELL", "nc -z 127.0.0.1 80 || exit 1"] interval: 10s timeout: 5s retries: 3 EOF docker compose up -d

Opción 2: Docker run simple (almacenamiento local navegador)

docker run -d \ --name fossflow \ --restart unless-stopped \ -p 80:80 \ -e ENABLE_SERVER_STORAGE=false \ stnsmith/fossflow:latest

Acceder

http://localhost - Dashboard FossFLOW (o http://localhost:PUERTO si cambias puerto)

Primer uso

  1. Abre http://localhost en navegador
  2. Verás editor isométrico en blanco
  3. Arrastra componentes del panel izquierdo
  4. Diseña tu diagrama
  5. Auto-save automático cada 5 segundos
  6. ¡Listo!

Primeros pasos

1. Explorar componentes disponibles

  1. Panel izquierdo: componentes (AWS, Azure, GCP, genéricos)
  2. Haz scroll para ver más
  3. Click en componente para seleccionar
  4. Click en canvas para colocar

2. Crear primer diagrama simple (ejemplo AWS)

  1. Busca "EC2" o "Lambda" en panel
  2. Arrastra al canvas
  3. Arrastra "RDS" (database)
  4. Arrastra "S3" (storage)
  5. Click y arrastra elementos para mover
  6. Posiciona en forma de arquitectura (tier: web, app, data)

3. Agregar conexiones (líneas entre componentes)

  1. Busca "Connector" o línea en panel
  2. Dibuja líneas conectando componentes
  3. Crea diagrama de arquitectura clara

4. Cambiar tema (Dark mode)

  1. Click ícono luna (moon) arriba a la derecha
  2. Toggle dark/light mode
  3. Preferencia guardada

5. Agregar tus propios íconos

  1. Click "Upload Icon" en panel
  2. Selecciona PNG/JPG/SVG
  3. El ícono aparece en diagrama
  4. Toggle isométrico/plano si quieres

6. Hotkeys configurables

  1. Settings (engranaje) → Hotkeys
  2. Elige perfil: QWERTY (default), SMNRCT, None
  3. Mejora velocidad dibujo

7. Export diagrama (JSON)

  1. Menu superior → "Export"
  2. Descarga .json
  3. Comparte con equipo o guarda versión control

8. Import diagrama (JSON)

  1. Menu superior → "Import"
  2. Selecciona .json previamente exportado
  3. Se carga automáticamente

9. Instalar como PWA (Mac/Linux/Chrome)

  1. URL bar → icono instalación (o menu) → "Install app"
  2. Se instala como app nativa
  3. Icono en desktop/dock
  4. Funciona offline

Casos de uso

  • Arquitectos cloud: Diseña AWS, Azure, GCP sin pagar Cloudcraft.
  • DevOps/SRE: Visualiza infraestructura para documentación, onboarding.
  • Documentación técnica: Hermosos diagramas para proposals, presentaciones, wikis.
  • Design workshops: Colaborativo (exporta/importa JSON). Iterate rápido.
  • Homelab: Documenta tu infraestructura personal. Offline. Gratis.

HTTPS con Caddy (producción)

Caddyfile

diagrams.tudominio.com { reverse_proxy localhost:80 }

Acceso remoto seguro

https://diagrams.tudominio.com con HTTPS automático

Nota importante: WebSocket requerido para HTTPS

Si usas Caddy con HTTPS, asegúrate que WebSocket está habilitado en reverse proxy.

Gestión y mantenimiento

Ver logs

docker compose logs -f fossflow

Backup de diagramas

cp -r ./diagrams ./diagrams-backup-$(date +%Y%m%d)

Restore de backup

rm -rf ./diagrams cp -r ./diagrams-backup-YYYYMMDD ./diagrams docker compose restart fossflow

Reiniciar

docker compose restart fossflow

Actualizar a versión más reciente

docker compose pull docker compose up -d

Monitorear consumo

docker stats fossflow # Verás: mínimo CPU, ~50-100MB RAM

Limpiar almacenamiento (opcional)

du -sh ./diagrams # Ver tamaño total de diagramas almacenados

Comparativa con alternativas

vs Cloudcraft

FossFLOW gana: Gratis, open source, self-hosted, offline. Cloudcraft gana: Más features, integración AWS, collaboration tools.

vs Draw.io (Diagrams.net)

FossFLOW gana: Isométrico especializado, simpler. Draw.io gana: Más general, more diagram types.

vs Lucidchart

FossFLOW gana: Gratis, isométrico. Lucidchart gana: Enterprise, más collaboration, templates.

Mejor para: Quién necesita diagramas isométricos hermosos sin pagar. Self-hosted. Open source. Para arquitectura cloud/infraestructura.

Referencias oficiales

Apoya el canal GENBYTE

Suscríbete al canal de YouTube Suscríbete a la newsletter semanal Invítame a un Ko-fi genbyte@proton.me

Sígueme en mis redes sociales

Telegram Discord YouTube GitHub Blog Twitter

Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo Instalar y configurar SERVIDOR VPN WIREGUARD en MIKROTIK 🔐 #VPN #Wireguard #Mikrotik #RouterOS

Imagen
Wireguard en Mikrotik Breve Explicación de Wireguard ¿Qué es WireGuard VPN? WireGuard es un nuevo protocolo de VPN. No se trata de un software, sino de un conjunto de instrucciones que permite crear VPNs de forma muy sencilla. Ha sido desarrollada como una alternativa a IPsec, OpenVPN y similares VPNs, pero más rápida y sencilla de usar. En esencia, WireGuard está basado en ideas del protocolo IPsec. WireGuard es una VPN extremadamente simple, pero rápida y moderna que utiliza criptografía de última generación. Su objetivo es ser más rápido, más simple, y más versátil que IPSec, evitando al mismo tiempo el enorme dolor de cabeza (sobre todo en redes con NAT). Pretende ser considerablemente más eficaz que OpenVPN. WireGuard está diseñado como una VPN de propósito general para ejecutarse en interfaces embebidas, apto para muchas circunstancias diferentes. Se ejecuta sobre el protocolo UDP, por lo tanto es considerado un túnel de capa 3. ¿Cómo funciona Wireguard VPN? WireGuard es un proto...
Read more »

Cómo instalar y configurar DSM SYNOLOGY 7.2.2 en PC | Guía completa, instalación, RAID 1, SMB

Imagen
Instalación y puesta en marcha de Synology DSM 7.2.2 en PC Vídeo ACTUALIZADO, NUEVA VERSIÓN DEL ARC LOADER:  https://youtu.be/LgghogL-UCA https://genbyte.blogspot.com/2025/08/como-convertir-pc-en-synlogy-con-6-tb.html ----- Proceso de instalación y puesta en marcha de sistema operativo DSM Synology versión 7.2.2 en un PC, concretamente un HP 800 G1 EliteDesk. El PC tendrá 3 discos SSD, uno de 120 GB para el S.O. DSM, y otros dos de 240GB cada en RAID 1 para los Datos. Los 3 dicos duros conectados al PC mediante cables SATA. Lo primero que necesitamos es descargar la imagen bootloader ARC, desde el siguiente repositorio de Gothub, también necesitamos Rufus, en este momento, es la versión 4.6. Imagen ARC:  https://github.com/AuxXxilium/arc Imagen usado en el vídeo 1.1.29:  https://github.com/AuxXxilium/arc/releases/tag/1.1.29 Rufus:  https://rufus.ie/es/ Después de descargar la imagen ARC.img, conectamos nuestro primer disco SSD de 120GB por cable o conector SATA-USB y...
Read more »

Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso.

Imagen
Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso. Vídeo tutorial paso a paso en Youtube Desarrollo Ilustración: Diagrama RED Creación de Redes (Address) ----------------------------------------------- WAN 192.168.1.0/24 LAN 192.168.88.0/24 VPN 192.168.100.0/24 Creación del Rango VPN ------------------------ 192.168.100.1 - 192.168.100.100 Creación de los Certificados ------------------------------- Los certificados que vamos a crear a continuación tendrán una validez de 10 años; days-valid=3650 Crear certificado CA ---------------------- /certificate add name=CA-tpl country="" state="" locality="" organization="" unit="" common-name="CA" key-size=4096 days-valid=3650 key-usage=crl-sign,key-cert-sign /certificate sign CA-tpl ca-crl-host=127.0.0.1 name="CA" Crear certificado Server -------------------------- /certificate add name=SERVER-tpl country="" state="" locality=...
Read more »