Collaboration en temps reel sur les diagrammes C4 et l'architecture globale

Il y a quelques semaines, nous avons lance la collaboration en temps reel sur les tableaux blancs. La reaction a ete immediate et unanime : les equipes adoraient voir les curseurs des autres, adoraient les indicateurs de presence, adoraient regarder l'architecture prendre forme ensemble. Mais la demande la plus frequente ? "Est-ce qu'on peut avoir ca sur les vrais diagrammes C4 aussi ?"

Question legitime. Les tableaux blancs sont parfaits pour le brainstorming, mais la vraie architecture vit dans vos modeles C4 : les systemes, conteneurs, composants et elements de code qui definissent la structure de vos logiciels. C'est la que les equipes passent le plus de temps. C'est la que la collaboration compte le plus.

Aujourd'hui, c'est chose faite. La collaboration en temps reel fonctionne desormais sur les diagrammes C4 de projet et la vue Architecture Globale.

La meme magie, la ou ca compte

Si vous avez utilise la collaboration sur les tableaux blancs, l'experience vous sera immediatement familiere. Ouvrez la vue diagramme d'un projet et quand un collegue ouvre le meme projet, son curseur apparait sur votre canevas. Une fleche coloree avec son nom glissant sur le diagramme au fil de son exploration.

Selectionnez un noeud systeme et tout le monde le voit mis en surbrillance avec votre couleur : une bordure subtile autour de l'element, votre nom au-dessus. Votre collegue selectionne un autre conteneur ? Vous voyez sa selection dans sa couleur. Le langage visuel est simple : vous savez toujours qui regarde quoi.

La pile d'avatars apparait dans le coin inferieur. Vous voyez qui est present. Une notification s'affiche quand quelqu'un rejoint votre session. Tout fonctionne naturellement.

Collaborer a travers les niveaux C4

C'est ici que les choses deviennent interessantes. Les modeles C4 sont hierarchiques : vous pouvez travailler au niveau Systeme tandis que votre collegue est au niveau Composant d'un conteneur specifique. Vous editez tous les deux le meme projet, mais a des profondeurs differentes.

Nous gerons cela grace aux metadonnees. La session de chaque collaborateur porte l'information du niveau C4 qu'il visualise actuellement. Cela signifie que vous pouvez voir non seulement que Sarah est dans le meme projet, mais qu'elle travaille au niveau Conteneur pendant que vous etes au niveau Systeme. Les indicateurs de presence vous gardent au courant sans le bruit d'afficher des curseurs sur une vue que vous ne regardez meme pas.

Quand deux personnes sont au meme niveau, les curseurs et les surbrillances de focus apparaissent naturellement. Quand elles sont a des niveaux differents, la collaboration reste en arriere-plan : presente mais pas distrayante.

Architecture Globale : collaboration inter-projets

La vue Architecture Globale affiche tous les systemes de votre organisation en un seul endroit. C'est la que vous voyez la vue d'ensemble : comment les projets se connectent, ou sont les frontieres, quels systemes communiquent entre eux.

Desormais, vous pouvez explorer cette vue ensemble. Ouvrez l'Architecture Globale et vos collegues voient votre curseur se deplacer a travers le paysage organisationnel. Selectionnez un systeme pour l'examiner et tout le monde voit votre focus.

Nous avons ajoute un filtrage par vue ici car la vue Architecture Globale a deux modes de profondeur : systemes et conteneurs. Si vous regardez la vue d'ensemble des systemes et que votre collegue a plonge dans la vue conteneurs, vous ne verrez pas les curseurs l'un de l'autre. Vous etes effectivement sur des canevas differents. Passez a la meme profondeur et la collaboration reprend vie.

C'est le genre de detail qui rend la collaboration naturelle plutot que bruyante. Vous voyez ce qui est pertinent pour votre contexte actuel.

Les modifications se synchronisent automatiquement

La collaboration, ce n'est pas que des curseurs. Quand un collegue ajoute un nouveau systeme, deplace un conteneur ou met a jour une relation, votre diagramme se rafraichit automatiquement. Pas besoin de recharger la page. Pas besoin de demander "t'as sauvegarde ?"

Nous utilisons des operations versionees en coulisses. Chaque modification incremente un numero de version. Votre client interroge le serveur chaque seconde pour detecter les nouvelles versions et, quand il en detecte une, recupere les donnees pertinentes. C'est simple, fiable, et fonctionne derriere n'importe quel proxy ou pare-feu : pas de connexions WebSocket a gerer.

Le resultat est une surface de travail partagee ou les modifications de chacun apparaissent en une a deux secondes. Assez rapide pour une collaboration active, sans la complexite de la synchronisation caractere par caractere necessaire pour un editeur de texte.

Un systeme unifie

L'une des decisions dont nous sommes le plus satisfaits est le modele de collaboration unifie. Les tableaux blancs, les diagrammes C4 de projet et l'Architecture Globale fonctionnent tous sur la meme infrastructure. Un seul service, un seul jeu de tables en base de donnees, un seul jeu d'endpoints.

En coulisses, chaque session de collaboration est identifiee par un type de ressource (whiteboard, project ou global) et un identifiant de ressource. Le suivi des curseurs, la detection de presence, le versionnement des operations et les taches de nettoyage sont mutualises. Cela signifie que les ameliorations apportees a un type de ressource beneficient automatiquement a tous les autres.

Cela signifie aussi qu'etendre la collaboration a de nouveaux espaces a l'avenir, comme les flows, la documentation ou les ADR, reviendra a connecter l'infrastructure existante a de nouvelles vues, sans tout reconstruire de zero.

Dix couleurs, zero confusion

Chaque collaborateur se voit attribuer une couleur unique parmi une palette de dix teintes accessibles et distinctes. L'attribution est deterministe selon l'ordre d'arrivee, donc si vous quittez et revenez, vous retrouvez la meme couleur (tant que votre emplacement n'a pas ete pris). Votre curseur, vos surbrillances d'elements, votre anneau d'avatar : tout utilise la meme couleur.

Nous avons teste cette palette sur differents types d'ecrans et profils de vision des couleurs. Elle a ete choisie pour que chaque paire de couleurs soit distinguable, meme pour les personnes atteintes de formes courantes de daltonisme. L'architecture, c'est de la communication : les outils ne doivent pas introduire d'ambiguite.

Cas d'usage que nous observons

Revues d'architecture : un tech lead parcourt le modele C4 avec l'equipe. Chacun suit sur son propre ecran, cliquant sur les elements qui suscitent des questions. Le lead voit ou l'attention se concentre et ajuste la discussion en consequence.

Onboarding : un nouvel ingenieur explore l'architecture avec un collegue senior. Au lieu d'un diaporama, ils parcourent ensemble le diagramme vivant. Le senior selectionne des systemes et les explique en temps reel. Le nouveau clique partout et pose des questions sur ce qu'il voit.

Sessions de planification : deux equipes discutent d'une integration. Chaque equipe a son propre projet, mais elles ouvrent la vue Architecture Globale ensemble pour voir comment leurs systemes vont se connecter. Elles peuvent pointer des systemes specifiques et discuter des frontieres avec tout le monde sur la meme page.

Conception distribuee : un ingenieur backend ajoute de nouveaux composants a un service pendant qu'un ingenieur frontend examine le conteneur API qu'il va consommer. Les deux sont dans le meme projet, travaillent sur des parties differentes, conscients de la progression de l'autre.

Pour commencer

La collaboration en temps reel sur les diagrammes C4 et l'Architecture Globale est disponible des maintenant sur tous les plans incluant les fonctionnalites d'equipe. Il n'y a rien a configurer : ouvrez simplement un projet ou la vue Architecture Globale, et la collaboration est active des qu'un collegue ouvre la meme vue.

Votre architecture est un artefact d'equipe. Maintenant, vos outils le refletent.

Nouveau dans la collaboration architecturale ? Decouvrez comment nous avons construit la Collaboration sur Tableau Blanc pour l'histoire complete, ou explorez la Decouverte d'Architecture par IA pour generer automatiquement l'architecture sur laquelle votre equipe pourra collaborer.