stan-smith
Cette idée vient de Buzz, que je remercie et salue au passage !
Réaliser un diagramme en 2D était facile avec Excalidraw, sachez qu'il est (presque) tout aussi facile de le faire en 3D avec FossFLOW. Et justement...
Aujourd'hui nous allons parler de FossFLOW ! Fonctionnant plus ou moins sur le même principe qu'Excalidraw, que ce soit au niveau interface ou manipulation, FossFLOW va vous permettre de créer de beaux et pratiques diagrammes en 3D. Très simplement.
Vous avez la possibilité d'ajouter vos propres icônes directement par l'interface.
Quelques petits bugs subsistent, le dev travaille activement à les résoudre.
⚡ Caractéristiques
- 🎨 Diagrammes isométriques : Créez de superbes diagrammes techniques en 3D.
- 💾 Enregistrement automatique : Votre travail est automatiquement enregistré toutes les 5 secondes.
- 📱 Prise en charge PWA : Installez l'application comme une application native sur Mac et Linux.
- 🔒 Priorité à la confidentialité : Toutes les données sont stockées localement dans votre navigateur.
- 📤 Importation/exportation : Partagez vos diagrammes sous forme de fichiers JSON.
- 🎯 Stockage de session : Enregistrement rapide sans boîte de dialogue.
- 🌐 Prise en charge hors ligne : Travaillez sans connexion Internet.
- 🗄️ Stockage sur serveur : Stockage persistant facultatif lors de l'utilisation de Docker (activé par défaut).
💾 Installation
Prérequis
Avant de commencer, assurez-vous d’avoir :
Étapes d'installation
- Créez votre compose.yml dans le dossier ou vous comptez installer FossFLOW :
nano compose.yml- Et collez ça dedans :
services:
fossflow:
image: stnsmith/fossflow:latest
pull_policy: always
ports:
- 8177:80
environment:
- NODE_ENV=production
- ENABLE_SERVER_STORAGE=true
- STORAGE_PATH=/data/diagrams
- ENABLE_GIT_BACKUP=false
volumes:
- ./diagrams:/data/diagrams- On va déployer l'application :
docker compose up -d- Rendez-vous sur l'ip:port, suivant l'IP de votre serveur local et du port choisi, 8177 par défaut :
http://ip:8177/ou votre domaine :
https://fossflow.mondomaine.com⚙️ Les options
Cliquez sur cette icône :
Un menu va apparaître :
- 1 => Undo | Redo : Annuler | Refaire
- 2 => Open : Permet de sélectionner un .json sur votre ordinateur.
- 3 => Export as JSON : Permet d'exporter votre diagramme en un fichier au format .json.
- 4 => Export as Compact JSON : Permet d'exporter votre diagramme en Compact JSON.
- 5 => Export as image : Quand vous êtes satisfait, vous pouvez exporter votre diagramme en image.
- 6 => Clear the canvas : Permet d'effacer le canvas.
- 7 => Permet de programmer des raccourcis et de régler et les commandes du panneau.
🎨 Créer un diagramme
Si vous connaissez Excalidraw, vous n'aurez aucun mal à utiliser FossFLOW.
Sélectionner une icône
Cliquez sur + :
Ce qui ouvre une fenêtre :
- 1 => Cherchez votre icône. Pas facile quand on ne connaît pas bien.
- 2 => Parcourir les icônes.
Par un clisser/déposer, placez votre icône :
N'hésitez pas à renommer votre icône en cliquant dessus :
Tracer une flèche
Cliquez sur l'outil flèche et tracez votre flèche :
Outil texte
Cliquez sur l'outil texte pour écrire du... Texte !
Outil carré | rectangle
Cliquez sur l'outil carré et tracez votre carré ou rectangle :
Il vous est loisible de changer la couleur :
⬇️ Importer des icônes
Là où vous avez vos icônes, cliquez sur Import Icons :
Vous aurez, pour votre session active, un onglet IMPORTED :
⬆️ Exporter votre diagramme
Vous êtes satisfait de votre diagramme ? Il est temps de l'exporter, en image ou en JSON.
En image
Cliquez sur Export as image :
- 1 => Cliquez sur cette icône pour ouvrir le menu.
- 2 => Exporter en JSON.
- 3 => Exporter en image.
Dans ce cas, nous allons choisir Export as image.
Configurez comme vous voulez :
- 1 => Afficher ou non la grille.
- 2 => Changer la couleur de fond.
- 3 => Exporter son image en PNG.
JSON
Pratique pour travailler dessus plus tard ou qu'une personne puisse travailler dessus également, exportez votre diagramme en JSON.
