FossFLOW - Outil de Diagrammes Isométriques

Salut ! C'est Stan, si vous avez utilisé FossFLOW et qu'il vous a aidé, j'apprécierais vraiment si vous pouviez faire un petit don :) Je travaille à temps plein, et trouver le temps de travailler sur ce projet est déjà assez difficile. Si j'ai implémenté une fonctionnalité pour vous ou corrigé un bug, ce serait génial si vous pouviez :) sinon, ce n'est pas un problème, ce logiciel restera toujours gratuit !

Aussi ! Si vous ne l'avez pas encore fait, veuillez consulter la bibliothèque sous-jacente sur laquelle ceci est construit par <a href="https://github.com/markmanx/isoflow">@markmanx</a> Je me tiens vraiment sur les épaules d'un géant ici 🫡

https://buymeacoffee.com/stan.smith

Merci,

-Stan

Essayez-le en ligne

Allez sur --> https://stan-smith.github.io/FossFLOW/ <--

FossFLOW est une puissante Progressive Web App (PWA) open-source pour créer de beaux diagrammes isométriques. Construit avec React et la bibliothèque <a href="https://github.com/markmanx/isoflow">Isoflow</a> (Maintenant forkée et publiée sur NPM comme fossflow), il fonctionne entièrement dans votre navigateur avec support hors ligne.

🤝 CONTRIBUTORS.md - Comment contribuer au projet.

Mises à Jour Récentes (Octobre 2025)

Support Multilingue

8 Langues Supportées - Traduction complète de l'interface en anglais, chinois (simplifié), espagnol, portugais (brésilien), français, hindi, bengali et russe
Sélecteur de Langue - Sélecteur de langue facile à utiliser dans l'en-tête de l'application
Traduction Complète - Tous les menus, dialogues, paramètres, info-bulles et contenu d'aide traduits
Sensible aux Paramètres Régionaux - Détecte et mémorise automatiquement votre préférence de langue

Outil de Connecteur Amélioré

Création par Clics - Nouveau mode par défaut : cliquez sur le premier nœud, puis sur le second pour connecter
Option Mode Glisser - Le glisser-déposer original reste disponible via les paramètres
Sélection de Mode - Basculez entre les modes clic et glisser dans Paramètres → onglet Connecteurs
Meilleure Fiabilité - Le mode clic offre une création de connexion plus prévisible

Importation d'Icônes Personnalisées

Importez Vos Propres Icônes - Téléchargez des icônes personnalisées (PNG, JPG, SVG) à utiliser dans vos diagrammes
Mise à l'Échelle Automatique - Les icônes sont automatiquement mises à l'échelle à des tailles cohérentes pour une apparence professionnelle
Bascule Isométrique/Plat - Choisissez si les icônes importées apparaissent en 3D isométrique ou 2D plat
Persistance Intelligente - Les icônes personnalisées sont enregistrées avec les diagrammes et fonctionnent avec toutes les méthodes de stockage
Ressources d'Icônes - Trouvez des icônes gratuites sur :
- Iconify Icon Sets - Des milliers d'icônes SVG gratuites
- Flaticon Isometric Icons - Packs d'icônes isométriques de haute qualité

Support de Stockage Serveur

Stockage Persistant - Diagrammes enregistrés sur le système de fichiers du serveur, persistent entre les sessions du navigateur
Accès Multi-appareils - Accédez à vos diagrammes depuis n'importe quel appareil lors de l'utilisation du déploiement Docker
Détection Automatique - L'interface utilisateur affiche automatiquement le stockage serveur lorsqu'il est disponible
Protection contre l'Écrasement - Dialogue de confirmation lors de l'enregistrement avec des noms en double
Intégration Docker - Stockage serveur activé par défaut dans les déploiements Docker

Fonctionnalités d'Interaction Améliorées

Raccourcis Clavier Configurables - Trois profils (QWERTY, SMNRCT, Aucun) pour la sélection d'outils avec indicateurs visuels
Contrôles de Panoramique Avancés - Plusieurs méthodes de panoramique incluant glisser sur zone vide, clic milieu/droit, touches modificatrices (Ctrl/Alt) et navigation au clavier (Flèches/WASD/IJKL)
Basculer les Flèches du Connecteur - Option pour afficher/masquer les flèches sur les connecteurs individuels
Sélection d'Outil Persistante - L'outil connecteur reste actif après la création de connexions
Dialogue de Paramètres - Configuration centralisée pour les raccourcis clavier et les contrôles de panoramique

Améliorations Docker et CI/CD

Builds Docker Automatisées - Workflow GitHub Actions pour le déploiement automatique sur Docker Hub lors des commits
Support Multi-architecture - Images Docker pour linux/amd64 et linux/arm64
Images Pré-construites - Disponibles sur stnsmith/fossflow:latest

Architecture Monorepo

Référentiel unique pour la bibliothèque et l'application
NPM Workspaces pour une gestion rationalisée des dépendances
Processus de build unifié avec npm run build à la racine

Corrections d'Interface

Problème d'affichage des icônes de la barre d'outils de l'éditeur Quill corrigé
Avertissements de clé React résolus dans les menus contextuels
Style de l'éditeur markdown amélioré

Fonctionnalités

🎨 Diagrammes Isométriques - Créez de superbes diagrammes techniques en style 3D
💾 Sauvegarde Automatique - Votre travail est automatiquement sauvegardé toutes les 5 secondes
📱 Support PWA - Installez comme une application native sur Mac et Linux
🔒 Confidentialité d'Abord - Toutes les données stockées localement dans votre navigateur
📤 Importer/Exporter - Partagez des diagrammes sous forme de fichiers JSON
🎯 Stockage de Session - Sauvegarde rapide sans dialogues
🌐 Support Hors Ligne - Travaillez sans connexion internet
🗄️ Stockage Serveur - Stockage persistant optionnel lors de l'utilisation de Docker (activé par défaut)
🌍 Multilingue - Support complet pour 8 langues : English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский

🐳 Déploiement Rapide avec Docker

bash

# Utilisation de Docker Compose (recommandé - inclut le stockage persistant)
docker compose up

# Ou exécuter directement depuis Docker Hub avec stockage persistant
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

Le stockage serveur est activé par défaut dans Docker. Vos diagrammes seront enregistrés dans ./diagrams sur l'hôte.

Pour désactiver le stockage serveur, définissez ENABLE_SERVER_STORAGE=false :

bash

docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

Démarrage Rapide (Développement Local)

bash

# Cloner le référentiel
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW

# Installer les dépendances
npm install

# Compiler la bibliothèque (requis la première fois)
npm run build:lib

# Démarrer le serveur de développement
npm run dev

Ouvrez http://localhost:3000 dans votre navigateur.

Structure du Monorepo

Ceci est un monorepo contenant deux packages :

packages/fossflow-lib - Bibliothèque de composants React pour dessiner des diagrammes de réseau (construit avec Webpack)
packages/fossflow-app - Progressive Web App pour créer des diagrammes isométriques (construit avec RSBuild)

Commandes de Développement

bash

# Développement
npm run dev          # Démarrer le serveur de développement de l'application
npm run dev:lib      # Mode watch pour le développement de la bibliothèque

# Build
npm run build        # Compiler la bibliothèque et l'application
npm run build:lib    # Compiler uniquement la bibliothèque
npm run build:app    # Compiler uniquement l'application

# Tests et Linting
npm test             # Exécuter les tests unitaires
npm run lint         # Vérifier les erreurs de linting

# Tests E2E (Selenium)
cd e2e-tests
./run-tests.sh       # Exécuter les tests end-to-end (nécessite Docker et Python)

# Publication
npm run publish:lib  # Publier la bibliothèque sur npm

Comment Utiliser

Créer des Diagrammes

Ajouter des Éléments :
- Appuyez sur le bouton "+" dans le menu en haut à droite, la bibliothèque de composants apparaîtra à gauche
- Glissez et déposez les composants de la bibliothèque sur le canevas
- Ou cliquez avec le bouton droit sur la grille et sélectionnez "Ajouter un nœud"
Connecter des Éléments :
- Sélectionnez l'outil Connecteur (appuyez sur 'C' ou cliquez sur l'icône du connecteur)
- Mode clic (par défaut) : Cliquez sur le premier nœud, puis cliquez sur le second nœud
- Mode glisser (optionnel) : Cliquez et glissez du premier au second nœud
- Basculez entre les modes dans Paramètres → onglet Connecteurs
Sauvegarder Votre Travail :
- Sauvegarde Rapide - Enregistre dans la session du navigateur
- Exporter - Télécharger comme fichier JSON
- Importer - Charger depuis un fichier JSON

Options de Stockage

Stockage de Session : Sauvegardes temporaires effacées à la fermeture du navigateur
Exporter/Importer : Stockage permanent sous forme de fichiers JSON
Sauvegarde Automatique : Enregistre automatiquement les modifications toutes les 5 secondes dans la session

Contribuer

Nous accueillons les contributions ! Veuillez consulter CONTRIBUTORS.md pour les directives.

Documentation

FOSSFLOW_ENCYCLOPEDIA.md - Guide complet de la base de code
CONTRIBUTORS.md - Directives de contribution

Licence

MIT