OpenFLOW - herramienta para crear rápidamente hermosos diagramas de infraestructura en local

 (github.com/stan-smith)
46 puntos por GN⁺ 2025-07-02 | 1 comentarios | Compartir por WhatsApp
  • PWA de código abierto para crear diagramas isométricos (estilo 3D) que funciona en el navegador
  • Basada en React y el motor Isoflow, funciona sin instalación y también sin conexión, ofreciendo privacidad, guardado automático y funciones sencillas de importación/exportación, entre otras
  • Todos los datos se guardan en el almacenamiento local del navegador, y los diagramas pueden compartirse o respaldarse libremente como archivos JSON
  • Compatible con hosting estático como GitHub Pages y Netlify, y las funciones PWA pueden usarse por completo en entornos HTTPS

Resumen de OpenFLOW y valor del proyecto

  • OpenFLOW es una PWA (aplicación web progresiva) gratuita y de código abierto útil para que desarrolladores y profesionales de TI visualicen diseños de infraestructura y estructuras de red
  • Frente a herramientas competidoras, permite trabajar en local de forma rápida y segura, y usar sus funciones incluso sin conexión de red
  • Aprovecha el motor Isoflow para crear elegantes diagramas con estilo 3D y garantiza una fuerte privacidad, ya que ningún dato se envía a servidores externos
  • Gracias a su UI intuitiva, guardado automático e importación/exportación, ofrece funciones prácticas para que distintos equipos e individuos documenten fácilmente redes y arquitecturas
  • Requiere poco del entorno de desarrollo y permite empezar a trabajar de inmediato solo con un navegador web, sin instalaciones especiales

Funciones principales

  • Creación de diagramas isométricos: visualización de redes, sistemas y diagramas técnicos con sensación 3D
  • Guardado automático: el trabajo se guarda automáticamente cada 5 segundos
  • Privacidad: los datos se almacenan únicamente en el navegador local (límite de 5 a 10 MB)
  • Importación/Exportación: permite compartir y respaldar diagramas como archivos JSON
  • Modo sin conexión: todas las funciones pueden usarse sin internet
  • Inicio rápido: puede instalarse y ejecutarse como PWA

Despliegue y hosting

  • Hosting estático: desplegar la carpeta build en GitHub Pages, Netlify, Vercel, AWS S3, etc.
  • HTTPS obligatorio: se requiere HTTPS para el funcionamiento correcto de la PWA (excepto en local)
  • Se recomiendan respaldos periódicos: exportar trabajos importantes como JSON para respaldarlos

Stack tecnológico

  • React, TypeScript, Isoflow, PWA

Navegadores compatibles

  • Chrome/Edge (recomendado), Firefox, Safari, compatibilidad con PWA móvil

Código abierto y contribuciones

  • Edición Community de Isoflow (licencia MIT) + OpenFLOW (Unlicense)
  • Cualquiera puede usarlo, modificarlo y redistribuirlo libremente

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-07-02
Opiniones en Hacker News
  • Explican que usan Mermaid.js aunque no les gusta mucho su apariencia, su sintaxis es difícil y tiene bastantes bugs, porque aun así es una de las herramientas de diagramas con mejor soporte en generadores de sitios estáticos; también expresan que sería genial poder incrustar diagramas de Isoflow en Markdown con esa misma facilidad.
    • Gracias por el comentario interesante; planean agregarlo a la lista de TODO.
    • Señalan que la idea de Mermaid es buena, pero que la sintaxis es demasiado compleja y la integración con herramientas como GitLab es inestable.
    • Opinan que una integración con Markdown ofrecería una ventaja mucho mayor para los usuarios.
  • Proponen que sería bueno usar Isoflow junto con Styus; comparten además el enlace relacionado de Stylus, un servidor ligero de estado del hogar que cambia automáticamente clases CSS https://github.com/mmastrac/stylus, y comentan que parece que combinaría bien con la librería Isoflow.
  • Comparten que siempre les han gustado los diagramas isométricos que aparecen en los libros de Clive Maxfield, y que muchos esquemas de circuitos tienen estructuras no planares (flip-flops, capas de semiconductores, arquitecturas FPGA, etc.); añaden que agregar perspectiva hace que la información se sienta menos compleja y sea más fácil de entender o recordar, y evalúan que es un enfoque que encaja bien en varias áreas técnicas. Adjuntan el enlace https://www.clivemaxfield.com
  • Advierten que Snowflake lanzó recientemente un producto llamado Openflow, así que podría ser difícil de encontrar, y que quizá haga falta pensar mejor el nombre.
    • Recuerdan además que en el ámbito de redes también es muy conocido un protocolo de telemetría llamado OpenFlow, y comparten el enlace relacionado https://en.wikipedia.org/wiki/OpenFlow
  • Preguntan qué es exactamente lo que hay montado encima de Isoflow, porque no les queda claro si Isoflow no es en realidad la pieza central de todo.
    • Responden con transparencia que, efectivamente, Isoflow hace el 90% del trabajo; no están ocultando nada, solo lo ofrecen directamente porque no había una forma lista para usar del community pack.
  • Destacan que envolvieron la edición comunitaria de ISOFLOW https://github.com/markmanx/isoflow para que fuera muy fácil de configurar y ejecutar sin trabajo especial; además, permite exportar y volver a cargar respaldos JSON de los diagramas, lo que en la práctica hace posible crear una cantidad casi ilimitada de diagramas, resolviendo directamente las limitaciones de la versión comunitaria.
    • Un usuario que no está familiarizado con Node.js pregunta dónde están en el código de Isoflow los gráficos de los íconos con estilo 3D, si son archivos SVG y si sería posible agregar íconos personalizados.
  • Elogian la calidad de los diagramas; recuerdan que en el pasado proyectos parecidos tuvieron problemas para monetizarse y terminaron cerrando. Como este proyecto es MIT OSS, sienten que por ahora monetizar no parece ser el objetivo principal. También detectan y avisan que el enlace inferior "Built with the Isoflow library" devuelve un error 404 https://github.com/isoflow/isoflow
    • Aclaran que casi todo el mérito del diseño y de los íconos corresponde a Isoflow, y explican que la edición comunitaria está estructurada para impulsar el upsell hacia la versión Pro; no tienen ningún plan de monetización y solo esperan que la gente lo use y lo disfrute. También dicen que corregirán de inmediato el enlace incorrecto.
  • Preguntan si también puede alojarse en GitHub Pages y solicitan un enlace de demo.
  • Lo evalúan como una app interesante y dan una respuesta positiva al hecho de que se hayan compartido detalles.