Pourquoi encore un outil de diagramme ?
Lucidchart, Draw.io, Miro, Excalidraw... il y en a des dizaines. Le problème avec la plupart c'est soit l'obligation de créer un compte, soit une interface surchargée pour faire une chose simple, soit des exports qui nécessitent un abonnement payant.
Ce dont j'avais besoin c'est simple : ouvrir un onglet, dessiner un flux, exporter en PNG ou GIF/Vidéo pour une présentation ou un article de blog, fermer l'onglet. Rien de plus.
FlowCraft répond exactement à ça. C'est une application cliente pure, tout tourne dans le navigateur, aucune donnée ne part sur un serveur. Le code source est disponible sur GitHub et la démo est accessible directement sur lapolaris.fr/outils/flowcraft.
Ce que tu peux faire avec FlowCraft
Voici les cas d'usage pour lesquels l'outil est vraiment utile :
Représenter les relations entre services, bases de données, APIs. Les nœuds sont personnalisables (couleur, forme, icône Font Awesome) donc tu peux distinguer visuellement frontend, backend, BDD, services tiers.
Modéliser un parcours utilisateur, un tunnel de conversion, un workflow de validation. Les arêtes animées aident à rendre le sens du flux lisible d'un coup d'oeil.
L'export GIF (boucle 3s, 20fps) est particulièrement utile pour illustrer un article technique ou une slide avec un diagramme qui bouge. L'export MP4/WebM fonctionne aussi pour les vidéos.
L'import/export JSON permet d'échanger un diagramme sans compte ni lien partagé. Tu envoies le JSON par email ou Slack, l'autre personne le colle dans l'outil et retrouve le diagramme à l'identique.
Prise en main rapide
Pas de configuration, pas d'installation. Tu ouvres la démo et c'est parti.
Créer un nœud
Clique sur + Nœud / + Node dans la barre d'outils. Un nœud apparait sur le canvas. Tu peux le déplacer librement par glisser-déposer. Dans le panneau de droite tu modifies le label, le sous-titre, la couleur de fond, de bordure, de texte, et la forme (rectangle, arrondi, cercle).
Connecter deux nœuds
Deux façons de faire. La plus directe : survole un nœud pour faire apparaitre ses 4 ports (haut, bas, gauche, droite), puis glisse depuis un port vers un autre nœud. La deuxième : sélectionne un nœud, clique sur Connecter, puis clique sur le nœud cible.
Une fois la connexion créée, clique dessus pour modifier sa couleur, son style (plein, tirets, pointillés) et son type de flèche.
Navigation sur le canvas
La molette zoome. Le clic molette ou Espace + glisser fait un pan. Sur mobile le pinch-to-zoom fonctionne aussi.
Exporter le diagramme
Trois formats disponibles depuis la barre d'outils : PNG (screenshot du canvas via html2canvas), GIF animé (boucle 3s, 20fps, via gif.js), et MP4/WebM (6s via MediaRecorder). L'export JSON sérialise l'état complet du diagramme pour le sauvegarder ou le partager.
Exemple : le pattern Observer
Voici un diagramme exporté directement depuis FlowCraft. Il représente le pattern Observer : un Subject notifie ses Observer à chaque changement d'état. Les arêtes animées rendent le sens du flux immédiatement lisible.
Ce qu'il y a sous le capot
Pour ceux qui veulent regarder le code ou fork le projet, voici les choix techniques.
Zéro bundler, ES Modules natifs
FlowCraft ne passe pas par Webpack, Vite, ou quoi que ce soit d'autre. Tous les fichiers JS utilisent type="module" nativement. Le navigateur gère les imports directement. Pour lancer le projet en local, il faut passer par un serveur statique de ton choix — les ES Modules ne fonctionnent pas sur file://.
Architecture modulaire
Le code est découpé en modules avec des responsabilités claires :
| Fichier | Rôle |
|---|---|
state.js |
Source de vérité unique, références DOM, helpers viewport |
node-manager.js |
Création, rendu, drag, panneau de propriétés des nœuds |
edge-manager.js |
Rendu des arêtes, animation, connexions |
ui.js |
Barre d'outils, pan/zoom, modals, interactions canvas |
export-manager.js |
PNG, GIF, MP4 via html2canvas, gif.js, MediaRecorder |
Un point de conception important : deselectAllBase() vit dans state.js plutôt que dans node-manager ou edge-manager. Ca évite les imports circulaires entre les deux modules sans avoir besoin d'un event bus ou d'une couche d'abstraction supplémentaire.
Les arêtes animées
C'est la partie visuellement la plus distinctive de l'outil. Chaque connexion peut avoir des points lumineux qui se déplacent le long du tracé, avec une vitesse et une direction configurables. Ca se fait via des animations CSS sur des éléments SVG positionnés sur le chemin de la connexion. Quatre styles de tracé disponibles : droit, courbe, step, smooth.
Export GIF et vidéo
L'export GIF capture des frames pendant 3 secondes à 20fps du canvas en utilisant html2canvas pour chaque frame et gif.js pour l'encodage dans un web worker. L'export vidéo passe par l'API MediaRecorder qui capture directement le canvas HTML comme stream vidéo sur 6 secondes, ce qui est beaucoup plus léger à générer.
Compatibilité navigateur
L'outil fonctionne sur tous les navigateurs modernes. Seul l'export MP4/WebM est limité à Chrome et Edge (MediaRecorder + codec VP9). L'export GIF et PNG fonctionne partout. Sur mobile, le pinch-to-zoom et le drag tactile sont supportés.
Pour faire tourner le projet en local, il faut passer par un serveur statique plutôt que d'ouvrir index.html directement depuis le système de fichiers, parce que les ES Modules ne fonctionnent pas sur file://.
Récupérer le projet
Le code source est sur GitHub sous licence MIT. Tu peux le fork, l'adapter, l'intégrer dans tes propres projets.
git clone https://github.com/lapolaris/flowcraft.git
cd flowcraft
npx esbuild js/main.js --bundle --minify --outfile=js/main.min.js
Le build via esbuild est optionnel mais recommandé pour la production. Pour lancer en local, sers le dossier avec n'importe quel serveur statique de ton choix — les ES Modules ne fonctionnent pas via file://.
Essayer FlowCraft
La démo est disponible directement depuis le site, sans inscription ni installation.
Ouvrir la démo
