Wir haben jedes C4-Element von Grund auf neu designt

Architektur-Diagramme haben einen Job: dir die Wahrheit über deine Systeme schneller zu erzählen als Code-Lesen. Die meisten tun das nicht. Sie sehen gleich aus, egal ob du auf ein 12-Service-Startup oder ein 600-Service-Enterprise starrst. Dieselben generischen blauen Rechtecke. Dieselben Linien. Keine Hierarchie. Keine Story.

Wir haben die letzte Woche damit verbracht, das Archyl-Canvas auseinanderzunehmen und wieder zusammenzusetzen. Jeden Node, jede Edge, jeden Pixel Hintergrund. Das heutige Release ist das Ergebnis.

Wenn du dich jetzt einloggst, sieht das Diagramm aus wie ein anderes Produkt.

Was nicht stimmte

Die vorherigen Nodes waren ein Wischiwaschi aus generischem Blau. Schwere Borders, weiche Frosted-Hintergründe, übergroße Shadows — der "technical-modern"-Look, der sich 2022 richtig anfühlte und heute generisch wirkt.

Wichtiger noch: Sie sagten visuell nichts aus. Ein System (Level 1, "die Architektur") sah genauso aus wie eine Component (Level 3, "eine interne Klasse"). Ein Database-Container sah aus wie ein Worker-Container. Die vier Levels des C4-Modells — System Context → Container → Component → Code — waren in eine einzige undifferenzierte Schicht blauer Rechtecke kollabiert.

Edges waren flache schiefergraue Linien, die kein Gefühl für Richtung gaben. Das Canvas war ein Dot-Grid auf flachem Hintergrund. Selektion war kaum spürbar. Klick auf einen Node und... nichts änderte sich.

Das Diagramm war korrekt. Es war nicht lesbar.

Das neue visuelle System

Farbe pro Level, pro Typ

Jedes C4-Level hat jetzt sein eigenes visuelles Gewicht:

• System (Level 1) trägt die Brand-Identität — ein dünner Indigo-zu-Fuchsia-Gradient-Stripe entlang der oberen Kante der Card, dieselben Farben, die überall sonst in Archyl genutzt werden. People-Varianten bekommen einen warmen Amber-Gradient. Externe Systeme werden Graphit.
• Container (Level 2) ist sub-typisiert. Datenbanken und Caches sind Smaragd. Message Queues sind Amber. File Storage und Serverless Functions sind Cyan. Web Apps sind Indigo. Mobile- und Desktop-Apps sind Violett. Der Akzent-Stripe an der oberen Kante sagt dir, was der Container ist, bevor du sein Label liest.
• Component (Level 3) ist absichtlich gedämpft — nur ein subtiler Indigo-Akzent, kleinere Card, kleineres Icon. Components leben innerhalb von Containern und sollten visuell nicht konkurrieren.

Ein 100-Node-Board liest sich jetzt bei niedrigem Zoom als Zonen: grüne Cluster bedeuten Storage, Amber-Cluster bedeuten Async, Indigo-Cluster bedeuten Code. Du kannst per Farbe navigieren, bevor du ein einziges Label liest.

Sauberere Oberflächen

Raus: der schwere Frosted-Look, die klobigen Borders, der Dual-Blue-Gradient, der kaum ein Gradient war.

Rein:

• Eine haarfeine Border mit einem einzigen hellen Pixel entlang der oberen Kante — der "von oben beleuchtet"-Trick, der den Cards von Linear und Stripe ihr Premium-Feel verleiht. Cards sehen aus, als wären sie aus einem echten Material gemacht, statt gestapelte transluzente Platten.
• Ein gerichteter Drop-Shadow, eingefärbt von der Akzentfarbe des jeweiligen Levels. Jedes Level hat sein eigenes ambientes Glow unter der Card. Gleiche Form, andere Atmosphäre — eine Database-Card sitzt auf einem zarten Smaragd-Kissen, eine Queue-Card auf einem warmen Amber.
• Echte typografische Hierarchie. Der Title trägt Gewicht, die Description tritt zurück in ein gedämpftes Grau, das Type-Label nutzt Small Caps für technische Klarheit, und die Technology-Icons reihen sich sauber darunter auf. Kein Greifen mehr nach Größe als einzigem Mittel zu sagen "das hier ist wichtiger."

Badges, neu organisiert

Das vorherige Design ließ bis zu acht verschiedene Badges um den Rand jeder Card schweben — Insights, ADRs, Docs, API Contracts, Comments, External, Org-linked, Time-Travel. Auf einem dichten Diagramm sah es aus, als wären die Cards belagert.

Insights bleiben oben links. Sie sind Alerts — handlungsrelevant. Sie verdienen ihren Floating-Spot.

Alles andere kollabiert in einen einzigen inline Metadata-Stripe entlang der unteren Kante der Card: 📚 5 · 📄 3 · 🔌 2 · 💬 8. Jede Pill expandiert beim Klick weiterhin in das volle Popover. Der Card-Body atmet wieder.

Edges, die Richtung zeigen

Resting State: eine dünne neutrale Linie, brand-tinted, mit einer langsamen, sanften Bewegung über ihre gesamte Länge — kurze Markierungen, die von Source zu Target driften. Subtil, aber konstant. Das Canvas fühlt sich lebendig an, auch wenn du nicht interagierst. Entscheidend: Die Bewegung stoppt oder startet nie neu, wenn etwas anderes auf der Seite aktualisiert wird — sobald eine Beziehung auf dem Bildschirm ist, driftet sie für immer weiter.

Drei Linien-Stile fließen jetzt korrekt:

• Solid — saubere, durchgehende Linie, keine Bewegung. Solid gewählt? Bleibt solid.
• Dashed — gleichmäßige, mittel beabstandete Segmente, die in einem ruhigen, lesbaren Tempo driften.
• Dotted — engere, abgerundete Punkte, die ungefähr doppelt so schnell driften, sodass eine Dotted-Edge sichtbar "leichter" wirkt als eine Dashed, selbst auf den ersten Blick.

Hover oder Selektion upgraded die Linie auf einen Brand-Gradient (Indigo → Violett → Fuchsia), ausgerichtet entlang der Edge-Richtung — eine Top-to-Bottom-Beziehung hat einen vertikalen Gradient, eine Left-to-Right einen horizontalen. Ein weiches brand-farbenes Glow liegt unter der aktiven Edge. Der Drift läuft ungestört darunter weiter.

Der Arrow-Marker ist ein schlankerer Chevron, der den aktiven Gradient-Endpunkt aufnimmt. Das Edge-Label wurde zu einer eigenständigen Card, mit Technologien, die innerhalb der abgerundeten Border leben, statt als losgelöster Blob, der seitlich davon schwebt. Der Active State fügt einen Brand-Gradient-Splitter an der linken Kante des Labels hinzu und schiebt die Description-Farbe ins Indigo.

Focus Mode

Klick auf einen beliebigen Node. Nach einer kurzen Pause tritt der Rest des Canvas zurück — Nodes werden fast transparent, Edges fast unsichtbar. Nur der geklickte Node und seine direkten Nachbarn bleiben kräftig. Die verbindenden Edges fließen weiter. Der selektierte Node bekommt einen geschichteten Halo — einen knackigen brand-farbenen Ring, ein weiches äußeres Glow und einen verstärkten ambienten Bloom — alle eingefärbt vom eigenen Akzent des Nodes. Eine fokussierte Database glüht smaragd. Eine fokussierte Queue glüht amber. Ein fokussiertes System glüht indigo.

Diese kurze Pause ist Absicht: Ein folgender Doppelklick canceled den Focus, bevor er einsetzt, sodass das Drilldown auf das nächste C4-Level weiterhin funktioniert, ohne dass das Dim-Flackern stört.

Klick auf das leere Canvas, drück Escape oder klick auf einen anderen Node, um den Focus zu clearen.

Das Ergebnis ist das mit Abstand größte "dieses Diagramm spricht zu mir"-Upgrade. Ein 100-Node-Board, auf dem du nicht erkennen konntest, was womit verbunden war, ist jetzt ein Board, auf dem ein Klick die Antwort liefert.

Atmosphäre

Das Canvas selbst ist nicht mehr flach. Hinter dem Dot-Grid driften weiche Farbpools über die Oberfläche — Indigo oben, Fuchsia Richtung Ecke, tieferes Indigo unten — alle sehr schwach gehalten, sodass sie als Atmosphäre lesen statt als Dekoration. Dieselbe Identität wie der Rest des Produkts. Das Dot-Grid selbst ist jetzt brand-tinted statt generisch schiefergrau.

MiniMap und Controls wurden passend neu gebaut — branded Surface, haarfeine Border, brand-ambienter Shadow, akzent-eingefärbte Node-Farben. Die MiniMap nutzt jetzt dieselbe Palette wie das Haupt-Canvas, sodass die Vogelperspektive dieselbe Story erzählt wie das Diagramm selbst.

Connection-Handles glühen beim Hover in Brand-Indigo, mit einem weichen Halo, der die Beziehungs-Farbe vorschau-zeigt, die du gleich zeichnest.

Performance

Wo wir schon dabei waren, haben wir das Diagramm auch spürbar flotter gemacht:

• Die Per-Node-Animation-Engine ist weg. Sie war der größte versteckte Kostenfaktor bei Skalierung — jede Card trug ihr eigenes Motion-Bookkeeping, selbst im Ruhezustand. Opacity-Changes laufen jetzt auf einer einzigen, leichten Transition.
• Leichtere Shadows. Das ambiente Glow im ersten Wurf war ein großzügiger, teurer Blur; wir haben ihn auf etwa zwei Drittel der Größe gestrafft und das angehobene Feel beibehalten.
• Cards sitzen nicht mehr permanent auf einer eigenen GPU-Schicht. Dieser Hint feuert jetzt nur noch während der tatsächlichen Interaktion, statt für stillstehende Nodes fest eingebacken zu sein.
• Wir haben Transitions auf genau die Properties verschmälert, die sich ändern — Movement und Shadow — statt den Browser zu bitten, jede Property "nur für den Fall" zu berücksichtigen.

Reduced-Motion-Preference wird überall respektiert — der Resting-Flow auf Edges, der Focus-Mode-Fade und die Drift-Bewegung schalten sich alle ab, wenn das Betriebssystem diese Preference meldet.

Probier's aus

Logge dich in Archyl ein, öffne ein beliebiges Projekt und wähle ein System oder einen Container. Das neue Diagramm ist auf jedem Plan ausgerollt, inklusive Free Tier — kein Migrations-Schritt erforderlich, kein Toggle zum Umlegen.

Wenn du ein Diagramm hast, auf das du besonders stolz (oder von dem du besonders genervt) bist, ist diese Woche ein guter Zeitpunkt, es zu teilen. Wir haben das Canvas neu gebaut, weil wir wollen, dass die Architektur-Map sich wie ein echtes Artefakt anfühlt, nicht wie ein Visio-Export. Tagge uns — wir wollen sehen, wie deine Maps jetzt aussehen.

→ archyl.com