Instalar FossFLOW con Docker: crea diagramas 3D isométricos tipo Excalidraw

Hacer diagramas en 2D es fácil con herramientas como Excalidraw. Pero cuando quieres algo más visual —con perspectiva, volumen y estilo “infraestructura moderna”— te toca irte a opciones complejas… salvo que uses FossFLOW.

FossFLOW es una aplicación open source pensada para crear diagramas isométricos (3D-style) de infraestructuras directamente en el navegador. Funciona con la misma lógica simple de Excalidraw (iconos + flechas + texto), pero con un resultado mucho más “arquitectura técnica”. 

Y sí: puedes autoalojarla con Docker y hasta guardar los diagramas en tu servidor. Te cuento cómo.

---

¿Qué es FossFLOW?

FossFLOW es una Progressive Web App (PWA) construida con React y basada en la librería Isoflow (fork fosssflow). Corre enteramente en el navegador, incluso offline, y prioriza la privacidad: los datos se guardan localmente salvo que actives almacenamiento en servidor. 

El proyecto está activo y en mejora constante, aunque aún quedan algunos bugs menores en el flujo de guardado/carga. 

---

Características principales

FossFLOW trae un combo muy potente:

• 🎨 Diagramas isométricos 3D: infraestructuras bonitas y técnicas en perspectiva. 

• 💾 Autoguardado: salva tu trabajo cada ~5 segundos. 

• 📱 Soporte PWA: puedes “instalarla” como app nativa en Mac/Linux (y móviles). 

• 🔒 Privacidad primero: por defecto todo queda en tu navegador (localStorage). 

• 📤 Importar/exportar JSON: ideal para compartir o retomar después. 

• 🎯 Guardado rápido de sesión: sin cuadros de diálogo pesados. 

• 🌐 Modo offline completo. 

• 🗄️ Almacenamiento en servidor opcional cuando usas Docker (activado por defecto si lo configuras). 

---

Instalación con Docker

Prerrequisitos

Necesitas:

• Linux (Ubuntu/Debian/etc.).

• Docker + Docker Compose.

• Terminal.

• Internet.

Paso 1: crear compose.yml

En tu carpeta de despliegue:

nano compose.yml

Pega esto (ajusta puerto o rutas si prefieres):

services:
  fossflow:
    image: stnsmith/fossflow:latest
    pull_policy: always
    ports:
      - 8177:80
    environment:
      - NODE_ENV=production
      - ENABLE_SERVER_STORAGE=true
      - STORAGE_PATH=/data/diagrams
      - ENABLE_GIT_BACKUP=false
    volumes:
      - ./diagrams:/data/diagrams

Qué hace cada variable:

• ENABLE_SERVER_STORAGE=true → guarda diagramas en tu servidor, no solo en el navegador. 

• STORAGE_PATH=/data/diagrams → ruta interna donde FossFLOW escribe los JSON.

• ENABLE_GIT_BACKUP=false → desactiva el backup Git automático (si no lo necesitas).

Paso 2: levantar el contenedor

docker compose up -d

Paso 3: entrar en FossFLOW

• Local: http://IP_DEL_SERVIDOR:8177/

• Dominio: https://fossflow.tudominio.com

---

Opciones principales de la interfaz

En el menú (icono superior):

1. Undo / Redo → deshacer / rehacer.

2. Open → abrir un JSON guardado en tu PC.

3. Export as JSON → exportar tu diagrama completo.

4. Export as Compact JSON → exportación más ligera.

5. Export as image → PNG listo para documentación.

6. Clear the canvas → borrar todo.

7. Shortcuts / Panel settings → atajos y ajustes de la UI.

---

Crear un diagrama paso a paso

Si has usado Excalidraw, aquí vas a ir en piloto automático.

1) Seleccionar una icono

• Pulsa el botón “+”.

• Busca o explora categorías.

• Arrastra la icono al lienzo (drag & drop).

• Puedes renombrarla haciendo clic encima.

2) Trazar flechas

• Elige la herramienta de flecha.

• Dibuja conexiones entre iconos.

3) Texto

• Herramienta Text y escribe etiquetas, notas o nombres de nodos.

4) Cuadrados / rectángulos

• Usa Square/Rectangle para contenedores, zonas o agrupaciones.

• Puedes cambiar color para diferenciar capas (LAN, DMZ, cloud, etc.).

---

Importar iconos propios

¿Te faltan iconos para tu stack? Fácil:

1. Pulsa Import Icons.

2. Selecciona tus archivos.

3. Aparecerán en una pestaña IMPORTED solo para esa sesión activa.

---

Exportar tu diagrama

Cuando quede bonito toca sacarlo fuera.

Exportar como imagen

1. Export as image.

2. Configura:

   • mostrar o no cuadrícula,

   • color de fondo,

   • formato PNG.

3. Descarga.

Exportar como JSON

Si quieres editar más tarde o compartir un “proyecto editable”:

• Export as JSON
  o

• Export as Compact JSON (más liviano).

---

Nota rápida sobre bugs actuales

Algunas versiones recientes tienen reportes de que los diagramas guardados en Server Storage no aparecen bien en la lista o cargan en blanco, aunque el JSON sí se crea en el volumen. Si te pasa, puedes abrirlos manualmente con Open → seleccionas el JSON. El dev está al tanto. 

---

Conclusión

FossFLOW es como Excalidraw pero en 3D isométrico:

• rápido,

• bonito,

• offline,

• con exportación limpia,

• y autoalojable en Docker sin dolores de cabeza.

Ideal para documentar homelabs, redes, Kubernetes, microservicios o cualquier arquitectura que quieras enseñar con estilo.

---

🔗 Enlaces de Interés y Apoyo al Canal 🔗

• Si te ha servido este contenido, apoya mi canal YouTube suscribiéndote: https://bit.ly/3NKeL8K

• Puedes invitarme a un Ko-fi: https://ko-fi.com/genbyte

• Mail de contacto: genbyte@proton.me

Comunidad GENBYTE

• ✉️ Canal Telegram: https://t.me/genbyte404

• 💬 Discord: https://discord.gg/fnggVjy6

Redes

• 📼 Youtube: https://www.youtube.com/@genbyte

• ⛓ Github: https://github.com/JLalib

• 💻 Blog: https://genbyte.blogspot.com/

• 🐦 Twitter: https://twitter.com/gen_byte