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 :

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

Créez un fichier 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.

Voici ce que vous devez savoir :

• L’application sera accessible sur le port , soit . C’est personnalisable.
• : la valeur indique que vous autorisez le stockage des schémas sur le serveur. Ajustez si besoin.
• : le chemin pour stocker les diagrammes dans le conteneur en lui-même. Pas d’intérêt à modifier cette valeur.
• : activer le contrôle de version Git, par défaut c’est désactivé ().
• Le bloc 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 :

À 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.

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 ?