ZENDRAW

Le Contexte et le Problème

La modélisation UML est omniprésente dans les cursus de développement et les projets professionnels, mais les outils disponibles oscillent entre deux extrêmes : des mastodontes comme Lucidchart ou draw.io qui noient l'utilisateur sous des dizaines de types de diagrammes inutiles, et des éditeurs de code comme PlantUML qui exigent d'apprendre une syntaxe dédiée.

ZenDraw est parti d'une frustration personnelle vécue pendant mes études : pourquoi n'existe-t-il pas un outil gratuit, visuel, centré sur les trois types de diagrammes UML les plus utilisés ? Un outil qui s'ouvre, se prend en main en 30 secondes, et n'impose pas de créer un compte. Un outil qui respecte l'utilisateur en ne proposant que ce dont il a besoin.

Architecture et Choix Techniques

Le cœur de l'application est React Flow — une librairie de graphes interactifs qui gère le canvas, le drag-and-drop des nœuds et les connexions entre éléments. Cette décision technique était fondamentale : construire un moteur de canvas from scratch aurait été un projet à part entière.

Next.js 14 avec App Router structure le frontend avec une séparation claire des responsabilités : les routes, les métadonnées et la récupération de données côté serveur via Server Components, l'interactivité du canvas côté client via Client Components. Supabase gère l'authentification OAuth (GitHub, Google) et la persistance des projets en temps réel via realtime subscriptions et une colonne jsonb PostgreSQL pour stocker les états de diagrammes de structures hétérogènes.

L'architecture des données a été le point de réflexion le plus important. Un diagramme de classes, un diagramme de cas d'utilisation et un diagramme de séquence ont des structures de nœuds et de connexions radicalement différentes. Le modèle retenu utilise un schéma JSON flexible avec des discriminants de type pour distinguer les entités par famille.

Défis Techniques et Solutions

Le défi central a été de concevoir un moteur de rendu UML fidèle en surcouche de React Flow. React Flow gère les nœuds génériques — mais un nœud "classe UML" avec ses compartiments (attributs, méthodes), ses stéréotypes et ses connecteurs typés (héritage, composition, association) nécessite une couche d'abstraction entière avec des composants de nœuds entièrement custom.

• —Définition d'un registre de types de nœuds et d'arêtes par famille de diagramme
• —Système de handles de connexion contraints pour interdire les associations sémantiquement incorrectes
• —Rendu conditionnel des compartiments UML selon le stéréotype du nœud (<<interface>>, <<abstract>>)

L'équilibre UX entre minimalisme et complétude a été le défi le plus subtil. Chaque feature ajoutée doit répondre à la question : est-ce que ça simplifie les 80% de cas d'usage courants, ou est-ce que ça noie les cas simples ? Certaines features standard UML ont délibérément été omises en V1 pour maintenir la clarté de l'interface.

La persistance temps réel avec Supabase a introduit des challenges de synchronisation : comment réconcilier les mises à jour optimistes du canvas local avec les confirmations de la base de données, sans bloquer l'UX ? La stratégie retenue est un debounce de 500ms sur les changements du canvas avant sauvegarde, avec rollback silencieux en cas d'erreur.

Conclusion et Apprentissages

ZenDraw m'a appris que la difficulté d'un outil créatif ne réside pas dans ses features, mais dans ce qu'on décide de ne pas faire. Chaque simplification est un choix de design actif : en retirant le bruit, on révèle la valeur.

Techniquement, React Flow est une librairie puissante avec une courbe d'apprentissage réelle pour les cas avancés. La documentation couvre bien les cas basiques — pour les nœuds custom complexes et la gestion des handles avec contraintes sémantiques, c'est la pratique et la lecture du code source qui forment.