Outils

Créer des schémas réseau facilement avec FossFLOW

Jimmy

Jimmy

— 4 min read
Créer des schémas réseau facilement avec FossFLOW

Si vous êtes plutôt bidouilleur et que vous avez un homelab à la maison, vous pourriez avoir besoin de faire un schéma de votre réseau. Evidemment, il existe de nombreux outils web permettant de faire des diagrammes d'un réseau comme par exemple diagrams.net.

Néanmoins, l'outil que nous allons présenter se nomme FossFLOW, il s'agit d'un outil open-source auto-hébergeable permettant de créer des diagrammes en vue 3D isométrique depuis un navigateur web.

Il comporte un large panel d'icônes permettant de représenter un assez grand nombre d'appareil réseau, une gestion des routes pour représenter un câblage ou bien une route au sens réseau du terme avec une gestion de la couleur afin de les différencier s'il y en a plusieurs, et il permet d'ajouter une description complète sur chaque éléments créés.

Le grand avantage de FossFLOW est qu'il permet également d'enregistrer les diagrammes de différentes manières :

  • Vous pouvez enregistrer temporairement votre diagramme en cours pendant votre session de schématisation afin de pouvoir reprendre directement votre travail après une pause par exemple.
  • Télécharger le diagramme sur votre appareils en l'exportant en JSON, Compact JSON, ou en image PNG ou SVG.
  • Et même stocker vos diagrammes sur le serveur sur lequel ils sont hébergés si vous activez cette configuration, plutôt pratique pour retrouver facilement ses différents schémas.

Prérequis

Comme dit plus haut, nous allons vous montrer comment installer et configurer FossFLOW avec Docker et Docker Compose, il vous faut alors au préalable l'avoir installé sur l'appareil sur lequel vous allez hébergé FossFLOW.

Voici comment télécharger et installer Docker :

Sur Linux (bases Debian/Ubuntu) :

Docker : Installation sur Debian
Installer Docker sur Debian 12 – Tutoriel Complet et Simple.
Make in LabJoffrey

Sur Windows :

Docker - Installation sur Windows Docker Desktop
Suivez notre guide étape par étape pour installer Docker Desktop sur Windows.
Make in LabJoffrey

Installation et configuration

Pour installer et configurer FossFLOW, il suffit de récupérer deux fichiers : compose.yml et .env.exemple (que vous devrez renommer .env seulement).

Vous pouvez les trouver sur la page GitHub du projet :

GitHub - stan-smith/FossFLOW: Make beautiful isometric infrastructure diagrams
Make beautiful isometric infrastructure diagrams. Contribute to stan-smith/FossFLOW development by creating an account on GitHub.
GitHubstan-smith

Ou bien directement ci dessous :

services:
  fossflow:
    image: stnsmith/fossflow:latest
    pull_policy: always
    ports:
      - 80:80
      - 3001:3001
    environment:
      - NODE_ENV=production
      - ENABLE_SERVER_STORAGE=${ENABLE_SERVER_STORAGE:-true}
      - STORAGE_PATH=/data/diagrams
      - ENABLE_GIT_BACKUP=${ENABLE_GIT_BACKUP:-false}
      - HTTP_AUTH_USER=${HTTP_AUTH_USER:-}
      - HTTP_AUTH_PASSWORD=${HTTP_AUTH_PASSWORD:-}
    volumes:
      - ./diagrams:/data/diagrams

compose.yml

# Server Storage Configuration
# Set to true to enable server-side storage for multi-device access
# Default is true - diagrams are saved to ./diagrams directory on the host
ENABLE_SERVER_STORAGE=true

# Git backup (optional)
# Set to true to automatically commit changes to git
ENABLE_GIT_BACKUP=false

# Storage path (inside container)
# This is mapped to ./diagrams on the host via Docker volume
STORAGE_PATH=/data/diagrams

# Backend port (usually doesn't need changing)
BACKEND_PORT=3001

# HTTP Basic Auth (optional)
# setup both USER and PASSWORD to enable authentication
HTTP_AUTH_USER=
HTTP_AUTH_PASSWORD=

.env

Les options indiqués dans le fichier .env signifient ceci :

  • ENABLE_SERVER_STORAGE permet d'activer le stockage des diagrammes sur le serveur.
  • ENABLE_GIT_BACKUP permet d'utiliser la gestion de version de Git (désactivé par défaut).
  • STORAGE_PATH indique ou est-ce que sont stockés les diagrammes dans le conteneur Docker.
  • BACKEND_PORT le port utilisé par le backend du serveur.
  • HTTP_AUTH_USER et HTTP_AUTH_PASSWORD permettent d'utiliser le système d'authentification HTTP (il est désactivé lorsque ces deux champs sont vides).

Une fois que vous avez choisi les options que vous souhaitez activer ou non, vous pouvez démarrer le serveur FossFLOW avec cette commande :

docker compose up -d

Et vous pouvez alors vous rendre la page web de FossFLOW en tapant l'adresse IP de votre serveur dans la barre d'URL de votre navigateur web.

Voici alors la page sur laquelle vous tomberez :

Utilisation

Tout d'abord, vous pouvez activer toutes les icônes utilisables dans les paramètres "icon pack management" accessibles dans le menu contextuel.

Enfin, sur la grille de composition, pour créer votre premier élément, vous pouvez cliquer sur une case puis sur "Add Node".

Cela ajoutera une sorte de boite en 3D, un menu apparaitra alors si vous cliquez sur cet élément, dans lequel vous pouvez modifier son icône avec le bouton "Update icon".

Conclusion

FossFLOW est un outil open-source assez complet et plutôt pratique pour faire des schémas réseau et système, il est également sécurisé même lorsque le stockage sur le serveur n'est pas configuré, dans la mesure ou le diagramme est stocké en priorité sur l'appareil sur lequel il est fait.

Lire plus