Flowy Vue : bibliothèque open source de diagrammes de flux par glisser-déposer

Le contexte

Les éditeurs de diagrammes de flux par glisser-déposer sont une brique récurrente des outils métier : constructeurs de scénarios d'automatisation, organigrammes, arbres de décision, parcours clients. Dans l'écosystème Vue 2, aucune solution légère ne permettait alors de construire ce type d'interface en réutilisant ses propres composants comme nœuds du diagramme. Les équipes se retrouvaient à réimplémenter à chaque projet la même mécanique de glisser-déposer, de rattachement parent-enfant et de tracé des liaisons. Biris Tech a conçu et développé Flowy Vue pour répondre à ce manque et l'a publiée en open source sur npm sous le nom @hipsjs/flowy-vue, sous licence MIT, avec le code source hébergé sur GitHub. La bibliothèque fournit un jeu de composants Vue qui prennent en charge la manipulation à la souris et le rendu de l'arborescence, tout en laissant l'application hôte maîtresse du contenu de chaque nœud et des règles métier.

1. 2019Conception et développement

   Nous concevons et développons la bibliothèque : un composant Vue de glisser-déposer pour construire des diagrammes de flux, avec ses cinq composants et sa logique d'extension.

2. 2020Publication sur npm

   Le paquet est publié sous @hipsjs/flowy-vue le 26 juin 2020, sous licence MIT. Douze versions se succèdent jusqu'à la 1.0.13, le 8 juillet 2020.

1. 01Concevoir une interface de programmation de composant permettant de construire un diagramme de flux à partir d'une simple liste de nœuds
2. 02Développer la mécanique de glisser-déposer : création d'un nœud depuis une palette, déplacement, rattachement à un parent, suppression
3. 03Permettre l'usage de n'importe quel composant Vue comme contenu de nœud, avec prise en charge des largeurs variables
4. 04Rendre la logique métier extérieure au composant grâce à des fonctions de validation appelées avant chaque ajout ou déplacement
5. 05Exposer un jeu d'évènements couvrant tout le cycle de manipulation pour synchroniser l'état de l'application hôte
6. 06Assurer le tracé automatique des liaisons entre nœuds parents et enfants lors du rendu de l'arborescence
7. 07Empaqueter la bibliothèque pour une distribution npm, avec greffon d'installation en une ligne et feuille de styles livrée
8. 08Publier une documentation et une démonstration interactive accessibles publiquement
9. 09Maintenir le paquet dans la durée : corrections, versions successives et suivi des anomalies remontées par la communauté

Ce que nous avons fait

La conception part du besoin réel : permettre à une équipe d'intégrer un éditeur de diagrammes de flux sans réécrire une couche de glisser-déposer. Le composant a donc été bâti sur Shopify Draggable, encapsulé dans une surcouche Vue (@hipsjs/shopify-draggable-vue) afin de garder une gestion des gestes éprouvée et de concentrer l'effort sur l'arbre de nœuds. L'API a été pensée autour d'une structure de données plate : chaque nœud porte un identifiant, un identifiant parent et un objet de données libre. L'arborescence et les liaisons visuelles sont recalculées par le composant, ce qui laisse l'application hôte maîtresse de son état. Les composants Flowy, FlowyNode, FlowyBlock, FlowyNewBlock et FlowyDragHandle sont exposés séparément et enregistrés globalement par un greffon Vue.use(), avec des créneaux (slots) permettant d'utiliser n'importe quel composant comme nœud, y compris à largeur variable. La logique métier reste extérieure au composant grâce aux fonctions de garde beforeAdd et beforeMove, qui autorisent ou refusent un déplacement avant qu'il ne soit appliqué, et aux évènements drag-start, drag-stop, add, move et remove. Ce choix évite d'imposer des règles de validation dans la bibliothèque. La chaîne de production a été organisée autour de Vue CLI : une cible de compilation de bibliothèque produit le paquet distribué, une cible de démonstration alimente une documentation publiée sur GitHub Pages, et ESLint avec la configuration Airbnb encadre le code. Les publications se sont enchaînées par petites versions successives, chaque correctif remonté par les utilisateurs donnant lieu à une nouvelle version sur npm. Le paquet est diffusé sous licence MIT, avec dépôt public, suivi d'anomalies ouvert et extension optionnelle pour Quasar.

• Bibliothèque Vue 2 publiée sur npm sous le nom @hipsjs/flowy-vue, sous licence MIT
• Jeu de cinq composants exposés : Flowy, FlowyNode, FlowyBlock, FlowyNewBlock et FlowyDragHandle
• Greffon d'installation par Vue.use() avec enregistrement global des composants
• Feuille de styles compilée depuis SCSS et livrée avec le paquet
• Dépôt public sur GitHub avec suivi d'anomalies, guide de contribution et procédure de publication scriptée
• Extension optionnelle pour applications Quasar

Les résultats

• Douze versions publiées sur npm entre le 26 juin et le 8 juillet 2020, jusqu'à la version stable 1.0.13 toujours distribuée
• 39 109 téléchargements enregistrés entre le 20 août 2025 et le 19 août 2026, plus de cinq ans après la dernière publication
• Bibliothèque installable en une commande, sans configuration : un appel à Vue.use() suffit pour disposer des cinq composants
• Logique métier maintenue hors de la bibliothèque, ce qui permet aux applications hôtes d'imposer leurs propres règles de rattachement sans modifier le code du paquet
• Code source ouvert sous licence MIT, réutilisable et modifiable librement, avec démonstration publique consultable en ligne