OpenFLOW - un outil pour créer rapidement de beaux diagrammes d’infrastructure en local

 (github.com/stan-smith)
46 points par GN⁺ 2025-07-02 | 1 commentaires | Partager sur WhatsApp
  • PWA open source de création de diagrammes isométriques (style 3D) fonctionnant dans le navigateur
  • Basé sur React et le moteur Isoflow, il fonctionne hors ligne sans installation et propose protection de la vie privée, sauvegarde automatique, import/export simple et d’autres fonctions
  • Toutes les données sont stockées dans le stockage local du navigateur, et les diagrammes peuvent être librement partagés ou sauvegardés sous forme de fichiers JSON
  • Prend en charge l’hébergement statique comme GitHub Pages et Netlify, avec un usage complet des fonctions PWA en environnement HTTPS

Présentation d’OpenFLOW et valeur du projet

  • OpenFLOW est une PWA (Progressive Web App) gratuite et open source utile aux développeurs et professionnels de l’IT pour visualiser la conception d’infrastructures et les structures réseau
  • Par rapport aux outils concurrents, il permet de travailler plus vite et en toute sécurité en local, avec des fonctions utilisables même sans connexion réseau
  • Grâce au moteur Isoflow, il permet de créer d’élégants diagrammes de style 3D, tout en garantissant une forte confidentialité puisque toutes les données ne sont pas envoyées vers des serveurs externes
  • Son interface intuitive, la sauvegarde automatique, l’import/export et d’autres fonctions pratiques facilitent le travail de documentation réseau et d’architecture pour les équipes comme pour les particuliers
  • Les exigences côté environnement de développement sont faibles, et il est possible de commencer immédiatement avec un simple navigateur web, sans installation particulière

Fonctionnalités principales

  • Création de diagrammes isométriques : visualisation de réseaux, systèmes et diagrammes techniques avec un rendu 3D
  • Sauvegarde automatique : l’historique du travail est enregistré automatiquement toutes les 5 secondes
  • Protection de la vie privée : les données sont stockées uniquement dans le navigateur local (limite de 5 à 10 Mo)
  • Import/Export : prise en charge du partage et de la sauvegarde des diagrammes sous forme de fichiers JSON
  • Mode hors ligne : toutes les fonctions sont disponibles sans Internet
  • Démarrage rapide : installation et exécution possibles en tant que PWA

Déploiement et hébergement

  • Hébergement statique : déploiement du dossier build sur GitHub Pages, Netlify, Vercel, AWS S3, etc.
  • HTTPS obligatoire : HTTPS est nécessaire au bon fonctionnement de la PWA (sauf en local)
  • Sauvegardes régulières recommandées : exportez les travaux importants en JSON pour les sauvegarder

Stack technique

  • React, TypeScript, Isoflow, PWA

Navigateurs compatibles

  • Chrome/Edge (recommandés), Firefox, Safari, prise en charge des PWA mobiles

Open source et contribution

  • Édition communautaire d’Isoflow (licence MIT) + OpenFLOW (Unlicense)
  • Utilisation, modification et distribution libres pour tous

À lire aussi

1 commentaires

 
GN⁺ 2025-07-02
Avis sur Hacker News
  • Explication indiquant que, même si Mermaid.js n’a pas un rendu très séduisant, que sa syntaxe est difficile et qu’il comporte pas mal de bugs, il reste l’un des outils de diagramme les mieux pris en charge par les générateurs de sites statiques, d’où son utilisation ; espoir qu’il devienne aussi simple d’intégrer des diagrammes Isoflow dans du Markdown
    • Merci pour ce commentaire intéressant, ajout prévu à la liste des TODO
    • L’idée de mermaid est bonne en soi, mais sa syntaxe est trop complexe et son intégration avec des outils comme GitLab pose des problèmes de stabilité
    • Avis selon lequel une intégration avec Markdown offrirait un avantage bien plus important aux utilisateurs
  • Suggestion d’utiliser Isoflow avec Styus ; Stylus est présenté comme un serveur d’état léger pour le poste local qui modifie automatiquement les classes CSS, avec partage du lien associé https://github.com/mmastrac/stylus, et l’idée qu’il pourrait très bien fonctionner avec la bibliothèque Isoflow
  • Partage du fait d’avoir toujours aimé les diagrammes isométriques présents dans les livres de Clive Maxfield ; dans les schémas, il existe souvent des structures non planes (flip-flops, couches de semi-conducteurs, architectures FPGA, etc.), et l’ajout de perspective rend l’information moins complexe, donc plus facile à comprendre ou à mémoriser ; évaluation positive de cette approche pour de nombreux domaines techniques, avec lien joint https://www.clivemaxfield.com
  • Mise en garde : Snowflake a récemment lancé un produit nommé Openflow, ce qui pourrait compliquer sa découverte ; réflexion nécessaire sur le nom
  • Question sur ce qui a été ajouté au-dessus dIsoflow, avec l’interrogation de savoir si Isoflow n’assure pas déjà la partie essentielle
    • En réalité, Isoflow fait 90 % du travail ; rien n’est caché, il n’existait simplement pas de forme directement exploitable du community pack, donc il a juste été fourni tel quel en toute transparence
  • Mise en avant du fait que l’édition communautaire dISOFLOW https://github.com/markmanx/isoflow a été encapsulée sans travail particulier afin de permettre une configuration et une exécution très simples ; possibilité pratique d’exporter puis de recharger une sauvegarde JSON des diagrammes, ce qui permet en pratique de créer un nombre quasi illimité de diagrammes et de lever directement les limites de la version communautaire
    • Question d’un utilisateur peu familier avec Node.js : où se trouvent dans le code dIsoflow les graphismes des icônes au style 3D, s’agit-il de fichiers SVG, et peut-on ajouter des icônes personnalisées ?
  • Éloges sur la qualité des diagrammes ; souvenir d’un projet similaire qui avait eu du mal à se monétiser avant de disparaître ; impression que, comme il s’agit ici d’un projet MIT OSS, la monétisation n’est pas l’objectif principal pour l’instant ; signalement également que le lien "Built with the Isoflow library" en bas de page renvoie une erreur 404 https://github.com/isoflow/isoflow
    • Presque tout le mérite du design et des icônes revient à Isoflow, et l’édition communautaire sert de passerelle pour encourager l’upsell vers la version Pro ; aucun plan de monétisation, juste l’envie que les gens prennent plaisir à l’utiliser ; la remarque sur le lien erroné sera prise en compte immédiatement
  • Question sur la possibilité d’un hébergement sur GitHub Pages et demande d’un lien de démo
  • Retour positif indiquant qu’il s’agit d’une application amusante et remerciements pour le partage détaillé d’informations