Collaboration en temps réel sur les diagrammes C4 et l'architecture globale

Il y a quelques semaines, nous avons lancé la collaboration en temps réel sur les tableaux blancs. La reaction a été immédiate et unanime : les équipes adoraient voir les curseurs des autres, adoraient les indicateurs de présence, adoraient regarder l'architecture prendre forme ensemble. Mais la demande la plus fréquente ? "Est-ce qu'on peut avoir ça sur les vrais diagrammes C4 aussi ?"

Question légitime. Les tableaux blancs sont parfaits pour le brainstorming, mais la vraie architecture vit dans vos modèles C4 : les systèmes, conteneurs, composants et éléments de code qui définissent la structure de vos logiciels. C'est la que les équipes passent le plus de temps. C'est la que la collaboration compte le plus.

Aujourd'hui, c'est chose faite. La collaboration en temps réel fonctionne désormais sur les diagrammes C4 de projet et la vue Architecture Globale.

La même magie, la ou ça compte

Si vous avez utilisé la collaboration sur les tableaux blancs, l'expérience vous sera immédiatement familière. Ouvrez la vue diagramme d'un projet et quand un collègue ouvre le même projet, son curseur apparaît sur votre canevas. Une flèche colorée avec son nom glissant sur le diagramme au fil de son exploration.

Sélectionnez un noeud système et tout le monde le voit mis en surbrillance avec votre couleur : une bordure subtile autour de l'élément, votre nom au-dessus. Votre collègue sélectionne un autre conteneur ? Vous voyez sa sélection dans sa couleur. Le langage visuel est simple : vous savez toujours qui regarde quoi.

La pile d'avatars apparaît dans le coin inférieur. Vous voyez qui est présent. 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 intéressantes. Les modèles C4 sont hiérarchiques : vous pouvez travailler au niveau Système tandis que votre collègue est au niveau Composant d'un conteneur spécifique. Vous éditez tous les deux le même projet, mais à des profondeurs différentes.

Nous gérons cela grâce aux métadonnées. 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 même projet, mais qu'elle travaille au niveau Conteneur pendant que vous êtes au niveau Système. Les indicateurs de présence vous gardent au courant sans le bruit d'afficher des curseurs sur une vue que vous ne regardez même pas.

Quand deux personnes sont au même niveau, les curseurs et les surbrillances de focus apparaissent naturellement. Quand elles sont à des niveaux différents, la collaboration reste en arrière-plan : présente mais pas distrayante.

Architecture Globale : collaboration inter-projets

La vue Architecture Globale affiche tous les systèmes 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 frontières, quels systèmes communiquent entre eux.

Désormais, vous pouvez explorer cette vue ensemble. Ouvrez l'Architecture Globale et vos collègues voient votre curseur se déplacer à travers le paysage organisationnel. Sélectionnez un système pour l'examiner et tout le monde voit votre focus.

Nous avons ajouté un filtrage par vue ici car la vue Architecture Globale a deux modes de profondeur : systèmes et conteneurs. Si vous regardez la vue d'ensemble des systèmes et que votre collègue a plongé dans la vue conteneurs, vous ne verrez pas les curseurs l'un de l'autre. Vous êtes effectivement sur des canevas différents. Passez à la même profondeur et la collaboration reprend vie.

C'est le genre de détail qui rend la collaboration naturelle plutôt 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 collègue ajoute un nouveau système, déplace un conteneur ou met à jour une relation, votre diagramme se rafraîchit automatiquement. Pas besoin de recharger la page. Pas besoin de demander "t'as sauvegardé ?"

Nous utilisons des opérations versionnées en coulisses. Chaque modification incrémente un numéro de version. Votre client interroge le serveur chaque seconde pour détecter les nouvelles versions et, quand il en détecte une, récupère les données pertinentes. C'est simple, fiable, et fonctionne derrière n'importe quel proxy ou pare-feu : pas de connexions WebSocket à gérer.

Le résultat est une surface de travail partagée ou les modifications de chacun apparaissent en une à deux secondes. Assez rapide pour une collaboration active, sans la complexité de la synchronisation caractère par caractère nécessaire pour un éditeur de texte.

Un système unifié

L'une des décisions dont nous sommes le plus satisfaits est le modèle de collaboration unifié. Les tableaux blancs, les diagrammes C4 de projet et l'Architecture Globale fonctionnent tous sur la même infrastructure. Un seul service, un seul jeu de tables en base de données, un seul jeu d'endpoints.

En coulisses, chaque session de collaboration est identifiée par un type de ressource (whiteboard, project ou global) et un identifiant de ressource. Le suivi des curseurs, la détection de présence, le versionnement des opérations et les tâches de nettoyage sont mutualisés. Cela signifie que les améliorations apportées à un type de ressource bénéficient automatiquement à tous les autres.

Cela signifie aussi qu'étendre la collaboration à de nouveaux espaces à l'avenir, comme les flows, la documentation ou les ADR, reviendra à connecter l'infrastructure existante à de nouvelles vues, sans tout reconstruire de zéro.

Dix couleurs, zéro confusion

Chaque collaborateur se voit attribuer une couleur unique parmi une palette de dix teintes accessibles et distinctes. L'attribution est déterministe selon l'ordre d'arrivée, donc si vous quittez et revenez, vous retrouvez la même couleur (tant que votre emplacement n'a pas été pris). Votre curseur, vos surbrillances d'éléments, votre anneau d'avatar : tout utilise la même couleur.

Nous avons testé cette palette sur différents types d'écrans et profils de vision des couleurs. Elle a été choisie pour que chaque paire de couleurs soit distinguable, même pour les personnes atteintes de formes courantes de daltonisme. L'architecture, c'est de la communication : les outils ne doivent pas introduire d'ambiguïté.

Cas d'usage que nous observons

Revues d'architecture : un tech lead parcourt le modèle C4 avec l'équipe. Chacun suit sur son propre écran, cliquant sur les éléments qui suscitent des questions. Le lead voit ou l'attention se concentre et ajuste la discussion en conséquence.

Onboarding : un nouvel ingénieur explore l'architecture avec un collègue senior. Au lieu d'un diaporama, ils parcourent ensemble le diagramme vivant. Le senior sélectionne des systèmes et les explique en temps réel. Le nouveau clique partout et pose des questions sur ce qu'il voit.

Sessions de planification : deux équipes discutent d'une intégration. Chaque équipe a son propre projet, mais elles ouvrent la vue Architecture Globale ensemble pour voir comment leurs systèmes vont se connecter. Elles peuvent pointer des systèmes spécifiques et discuter des frontières avec tout le monde sur la même page.

Conception distribuée : un ingénieur backend ajoute de nouveaux composants à un service pendant qu'un ingénieur frontend examine le conteneur API qu'il va consommer. Les deux sont dans le même projet, travaillent sur des parties différentes, conscients de la progression de l'autre.

Pour commencer

La collaboration en temps réel sur les diagrammes C4 et l'Architecture Globale est disponible dès maintenant sur tous les plans incluant les fonctionnalités d'équipe. Il n'y a rien à configurer : ouvrez simplement un projet ou la vue Architecture Globale, et la collaboration est activé dès qu'un collègue ouvre la même vue.

Votre architecture est un artefact d'équipe. Maintenant, vos outils le reflètent.

Nouveau dans la collaboration architecturale ? Découvrez comment nous avons construit la Collaboration sur Tableau Blanc pour l'histoire complète, ou explorez la Découverte d'Architecture par IA pour générer automatiquement l'architecture sur laquelle votre équipe pourra collaborer.