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

el

 

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 🔗

Comunidad GENBYTE

Redes

Comentarios

Publicar un comentario