On a redessiné chaque élément C4 depuis zéro

Les diagrammes d'architecture ont un boulot : te dire la vérité sur tes systèmes plus vite que de lire le code. La plupart ne le font pas. Ils ont la même tête que tu regardes une startup à 12 services ou une boîte à 600 services. Les mêmes rectangles bleus génériques. Les mêmes lignes. Pas de hiérarchie. Pas d'histoire.

On a passé la dernière semaine à démonter le canvas Archyl pour le remonter. Chaque node, chaque edge, chaque pixel de fond. La release d'aujourd'hui, c'est le résultat.

Si tu te connectes maintenant, le diagramme ressemble à un autre produit.

Ce qui n'allait pas

Les anciens nodes étaient un magma de bleu générique. Bordures épaisses, fonds frostés, ombres surdimensionnées — le genre de look "technique-moderne" qui semblait juste en 2022 et paraît générique aujourd'hui.

Plus important encore, ils ne disaient rien visuellement. Un System (Level 1, "l'architecture") ressemblait exactement à un Component (Level 3, "une classe interne"). Un container database ressemblait à un container worker. Les quatre niveaux du modèle C4 — System Context → Container → Component → Code — étaient écrasés en une seule couche indifférenciée de rectangles bleus.

Les edges étaient des lignes plates couleur ardoise qui ne donnaient aucun sens de la direction. Le canvas était une grille de points sur un fond plat. La sélection se voyait à peine. Tu cliques sur un node et... rien ne change.

Le diagramme était correct. Il n'était pas lisible.

Le nouveau système visuel

Couleur par niveau, par type

Chaque niveau C4 a maintenant son propre poids visuel :

• System (Level 1) porte l'identité de la marque — un fin stripe en gradient indigo-vers-fuchsia le long du bord supérieur de la card, les mêmes couleurs utilisées partout ailleurs dans Archyl. Les variantes People prennent un gradient ambre chaleureux. Les systèmes externes passent en graphite.
• Container (Level 2) est sous-typé. Les databases et caches sont émeraude. Les message queues sont ambre. Le stockage de fichiers et les fonctions serverless sont cyan. Les web apps sont indigo. Les apps mobile et desktop sont violettes. La bande d'accent en haut te dit ce que le container est avant même que tu ne lises son label.
• Component (Level 3) est volontairement discret — un accent indigo subtil seulement, card plus petite, icône plus petite. Les components vivent à l'intérieur des containers et ne devraient pas leur faire concurrence visuellement.

Un board de 100 nodes se lit maintenant par zones à faible zoom : les clusters verts veulent dire stockage, les clusters ambre veulent dire async, les clusters indigo veulent dire code. Tu peux naviguer à la couleur avant de lire le moindre label.

Surfaces plus propres

Out : le look frosté lourd, les bordures épaisses, le double-gradient bleu qui était à peine un gradient.

In :

• Une bordure en hairline avec un seul pixel brillant le long du bord supérieur — l'astuce "éclairé par le haut" qui donne aux cards Linear et Stripe leur côté premium. Les cards ont l'air d'être faites d'un vrai matériau au lieu d'être des plaques translucides empilées.
• Une drop shadow directionnelle teintée par la couleur d'accent du niveau. Chaque niveau a sa propre lueur ambient sous la card. Même forme, atmosphère différente — une card database repose sur un faible coussin émeraude, une card queue sur un coussin ambre chaleureux.
• Une vraie hiérarchie typographique. Le titre porte du poids, la description recule dans un gris muted, le label de type utilise des small caps pour la clarté technique, et les icônes de technologies s'alignent proprement en dessous. Plus besoin de jouer sur la taille comme seul moyen de dire "ça compte plus".

Badges, réorganisés

L'ancien design faisait flotter jusqu'à huit badges différents — insights, ADRs, docs, contrats d'API, commentaires, external, org-linked, time-travel — autour du périmètre de chaque card. Sur un diagramme dense, on aurait dit que les cards étaient assiégées.

Les insights restent en haut à gauche. Ce sont des alertes — actionnables. Ils méritent leur place flottante.

Tout le reste a été condensé dans une seule strip de métadonnées inline le long du bas de la card : 📚 5 · 📄 3 · 🔌 2 · 💬 8. Chaque pill se déploie toujours en popover complet au clic. Le corps de la card respire à nouveau.

Des edges qui montrent la direction

État de repos : une fine ligne neutre, teintée à la marque, avec un mouvement lent et doux sur toute sa longueur — de courtes marques qui dérivent de la source vers la cible. Subtil mais constant. Le canvas paraît vivant même quand tu n'interagis pas. Crucial : le mouvement ne s'arrête ni ne redémarre quand quelque chose d'autre se met à jour sur la page — une fois qu'une relation est à l'écran, elle continue de dériver à jamais.

Trois styles de ligne flowent maintenant correctement :

• Solid — ligne continue propre, pas de mouvement. Tu choisis solid ? Ça reste solid.
• Dashed — segments réguliers, espacement moyen, dérivant à un rythme calme et lisible.
• Dotted — points plus serrés, arrondis, qui dérivent à environ deux fois la vitesse, donc un edge dotted paraît visiblement plus "léger" qu'un edge dashed même au premier coup d'œil.

Le hover ou la sélection upgrade la ligne en gradient de marque (indigo → violet → fuchsia) orienté dans la direction de l'edge, donc une relation top-to-bottom a un gradient vertical et une left-to-right a un gradient horizontal. Une douce lueur aux couleurs de la marque souligne l'edge actif. La dérive continue ininterrompue en dessous.

Le marker de flèche est un chevron plus fin qui reprend le terminus du gradient actif. Le label d'edge est devenu une card autonome avec les technologies vivant à l'intérieur de la bordure arrondie au lieu d'être un blob détaché flottant sur le côté. L'état actif ajoute un sliver gradient de marque sur le bord gauche du label et bascule la couleur de la description en indigo.

Focus Mode

Clique sur n'importe quel node. Après une brève pause, le reste du canvas s'estompe — les nodes deviennent presque transparents, les edges disparaissent presque. Seuls le node cliqué et ses voisins directs restent vibrants. Les edges connectés continuent de flow. Le node sélectionné gagne un halo en couches — un anneau crisp aux couleurs de la marque, une douce lueur extérieure, et un bloom ambient intensifié — le tout teinté par l'accent du node lui-même. Une database focus brille en émeraude. Une queue focus brille en ambre. Un system focus brille en indigo.

Cette brève pause est intentionnelle : un double-clic enchaîné annule le focus avant qu'il ne se déclenche, donc drill dans le niveau C4 suivant marche toujours sans que le flash de dimming n'interfère.

Clique sur le canvas vide, appuie sur Échap, ou clique sur n'importe quel autre node pour clear le focus.

Le résultat, c'est le plus gros upgrade "ce diagramme me parle" jamais livré. Un board de 100 nodes où tu n'arrivais pas à dire ce qui était connecté à quoi est maintenant un board où un seul clic répond à la question.

Atmosphère

Le canvas lui-même n'est plus plat. Derrière la grille de points, de douces flaques de couleur dérivent à la surface — indigo en haut, fuchsia vers le coin, indigo plus profond en bas — le tout maintenu très faible pour qu'elles se lisent comme une atmosphère plutôt qu'une déco. Même identité que le reste du produit. La grille de points elle-même est maintenant teintée à la marque au lieu d'être en ardoise générique.

La MiniMap et les Controls ont été reconstruits pour matcher — surface aux couleurs de la marque, bordure hairline, ombre ambient brand, couleurs de nodes teintées par accent. La MiniMap utilise maintenant la même palette que le canvas principal, donc la vue à vol d'oiseau raconte la même histoire que le diagramme lui-même.

Les handles de connexion brillent en indigo de marque au hover, avec un doux halo qui prévisualise la couleur de la relation que tu es sur le point de tracer.

Performance

Tant qu'on y était, on a aussi rendu le diagramme nettement plus snappy :

• Le moteur d'animation par node a disparu. C'était le plus gros coût caché à l'échelle — chaque card portant son propre bookkeeping de mouvement même au repos. Les changements d'opacité passent maintenant par une seule transition légère.
• Ombres allégées. La lueur ambient du premier jet était un blur généreux et coûteux ; on l'a resserrée à environ deux tiers de la taille tout en gardant la sensation de surélévation.
• Les cards ne squattent plus en permanence leur propre layer GPU. Ce hint ne se déclenche maintenant que pendant l'interaction réelle, au lieu d'être bakké en dur pour des nodes simplement immobiles.
• On a resserré les transitions exactement aux propriétés qui changent — mouvement et ombre — au lieu de demander au navigateur de considérer chaque propriété "juste au cas où".

La préférence reduced-motion est respectée partout — le flow au repos sur les edges, le fade du focus mode, et le mouvement de dérive se coupent tous quand l'OS rapporte cette préférence.

Essaie-le

Connecte-toi à Archyl, ouvre n'importe quel projet, et choisis un system ou un container. Le nouveau diagramme est déployé sur tous les plans, y compris le tier gratuit — pas d'étape de migration requise, pas de toggle à basculer.

Si tu as un diagramme dont tu es particulièrement fier (ou particulièrement fatigué), c'est une bonne semaine pour le partager. On a reconstruit le canvas parce qu'on veut que la carte d'architecture ressemble à un vrai artefact, pas à un export Visio. Tague-nous — on veut voir à quoi ressemblent tes maps maintenant.

→ archyl.com