Découverte de FossFLOW : une solution locale pour créer des diagrammes isométriques 3D

FossFLOW est une application web très pratique pour créer des diagrammes isométriques 3D, ce qui en fait un bon complément à d'autres outils comme Excalidraw. Bien qu'une version en ligne soit accessible, l'outil FossFLOW présente l'avantage de pouvoir être installé sur un serveur ou une machine locale.

Les diagrammes isométriques sont pertinents pour illustrer une architecture technique ou un flux applicatif. Si vous travaillez dans l'IT, vous devriez apprécier cette application, car la vue 3D améliore la lisibilité, et donc la compréhension, des schémas.

Ci-dessous ma vidéo complète d'installation et d'utilisation de FossFLOW.

Quand vous utilisez FossFLOW, toutes les données sont stockées dans la session de votre navigateur. Autrement dit, vous ne laissez pas de trace sur le serveur distant. Dans le cas d'une instance auto-hébergée, il est possible d'enregistrer les diagrammes directement sur le serveur, mais cela reste facultatif.

Une base d'icônes 3D est intégrée nativement à l'application et vous pouvez importer les images de votre choix. Au-delà des icônes, vous pouvez ajouter du texte, des flèches entre vos éléments et ajuster la taille et la couleur de ces différents éléments. La palette d'outils est basique mais suffisante pour réaliser des schémas rapidement.

Installation de FossFLOW en local

Installation de FossFLOW avec Docker

Dans la suite de cet article, nous allons voir comment installer FossFLOW en self-hosted sur une machine équipée de Docker. Le projet FossFLOW sera stocké à cet emplacement :

/opt/docker-comose/fossflow

Au sein même de ce dossier, vous pouvez créer un dossier nommé diagrams si vous envisagez de sauvegarder vos créations sur votre serveur. Sinon, c'est facultatif.

Créez un fichier docker-compose.yml dans le dossier. Le fichier Docker Compose ci-dessous est basé sur le fichier de configuration disponible sur le dépôt GitHub de FossFLOW.

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

Voici ce que vous devez savoir :

• L'application sera accessible sur le port 3080, soit http://<IP de la machine Docker>:3080. C'est personnalisable.
• ENABLE_SERVER_STORAGE : la valeur true indique que vous autorisez le stockage des schémas sur le serveur. Ajustez si besoin.
• STORAGE_PATH : le chemin pour stocker les diagrammes dans le conteneur en lui-même. Pas d'intérêt à modifier cette valeur.
• ENABLE_GIT_BACKUP : activer le contrôle de version Git, par défaut c'est désactivé (false).
• Le bloc volumes est nécessaire si vous souhaitez stocker les diagrammes sur votre serveur. Sinon, vous pouvez supprimer les deux lignes.

Enregistrez le fichier et lancez la construction du projet :

docker compose up -d

À partir de votre navigateur Web, vous devriez avoir accès à l'interface de FossFLOW :

FossFLOW avec un reverse proxy Traefik

À titre d'information, pour ceux qui désirent publier FossFLOW avec un reverse proxy Traefik, c'est tout à fait possible. L'exemple ci-dessous permet de publier FossFLOW avec Traefik, tout en protégeant l'accès avec Tinyauth. L'application est également protégée par CrowdSec.

services:
  fossflow:
    image: stnsmith/fossflow:latest
    pull_policy: always
    environment:
      - NODE_ENV=production
      - ENABLE_SERVER_STORAGE=true
      - STORAGE_PATH=/data/diagrams
      - ENABLE_GIT_BACKUP=false
    volumes:
      - ./diagrams:/data/diagrams
    networks:
      - frontend
    labels:
      - traefik.enable=true
      - traefik.http.routers.fossflow.rule=Host(`fossflow.it-connectlab.fr`)
      - traefik.http.routers.fossflow.entrypoints=web
      - traefik.http.routers.fossflow-https.rule=Host(`fossflow.it-connectlab.fr`)
      - traefik.http.routers.fossflow-https.entrypoints=websecure
      - traefik.http.routers.fossflow-https.tls=true
      - traefik.http.routers.fossflow-https.tls.certresolver=ovhcloud
      - traefik.http.routers.fossflow-https.middlewares=crowdsec@file,tinyauth
      - traefik.http.services.fossflow-https.loadbalancer.server.port=80
      - tinyauth.apps.fossflow.config.domain=fossflow.it-connectlab.fr
networks:
  frontend:
    external: true

Conclusion

Avec FossFLOW et Excalidraw, vous disposez de deux applications gratuites, open source, et auto-hébergeables pour faire de beaux schémas ! Excalidraw pour le 2D, FossFlow pour le 3D. Accessibles directement depuis un navigateur Web, ces applications peuvent être hébergées sur une machine pour être utilisées par plusieurs utilisateurs.

Qu'en pensez-vous ?

Florian BURNEL Co-founder of IT-Connect

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

Voir la bio complète