Rediseñamos cada elemento C4 desde cero
Los diagramas de arquitectura tienen un trabajo: contarte la verdad sobre tus sistemas más rápido que leer código. La mayoría no lo hace. Se ven igual tanto si miras una startup de 12 servicios como una empresa de 600 servicios. Los mismos rectángulos azules genéricos. Las mismas líneas. Sin jerarquía. Sin historia.
Hemos pasado la última semana destripando el canvas de Archyl y reconstruyéndolo. Cada node, cada edge, cada píxel del fondo. La release de hoy es el resultado.
Si entras ahora, el diagrama parece un producto distinto.
Qué estaba mal
Los nodes anteriores eran un mar de azul genérico. Bordes pesados, fondos translúcidos, sombras enormes — ese look "técnico-moderno" que sentaba bien en 2022 y hoy parece genérico.
Más importante aún, no decían nada visualmente. Un System (Level 1, "la arquitectura") se veía exactamente igual que un Component (Level 3, "una clase interna"). Un container de base de datos se veía igual que un container worker. Los cuatro niveles del modelo C4 — System Context → Container → Component → Code — quedaban colapsados en una sola capa indiferenciada de rectángulos azules.
Los edges eran líneas pizarra planas que no daban ningún sentido de dirección. El canvas era una grilla de puntos sobre un fondo plano. La selección apenas se notaba. Hacías click en un node y... no cambiaba nada.
El diagrama era correcto. No era legible.
El nuevo sistema visual
Color por nivel y por tipo
Cada nivel C4 tiene ahora su propio peso visual:
- System (Level 1) lleva la identidad de marca — un fino stripe en gradient indigo-fuchsia en el borde superior de la card, los mismos colores que se usan en todo Archyl. Las variantes "people" llevan un gradient ámbar cálido. Los sistemas externos van en grafito.
- Container (Level 2) está sub-tipado. Bases de datos y caches en esmeralda. Message queues en ámbar. File storage y serverless functions en cian. Web apps en indigo. Apps mobile y desktop en violeta. La franja de acento del borde superior te dice qué es el container antes de leer su label.
- Component (Level 3) es deliberadamente discreto — solo un acento indigo sutil, card más pequeña, icono más pequeño. Los components viven dentro de containers y no deberían competir visualmente.
Un board de 100 nodes ahora se lee como zonas a bajo zoom: clusters verdes significan storage, clusters ámbar significan async, clusters indigo significan código. Puedes navegar por color antes de leer un solo label.
Superficies más limpias
Fuera: el look pesado escarchado, los bordes gruesos, el doble gradient azul que apenas era un gradient.
Dentro:
- Un borde hairline con un único píxel brillante a lo largo del borde superior — el truco "iluminado desde arriba" que da a las cards de Linear y Stripe esa sensación premium. Las cards parecen hechas de un material real en lugar de placas translúcidas apiladas.
- Una drop shadow direccional teñida por el color de acento del nivel. Cada nivel tiene su propio glow ambient debajo de la card. La misma forma, distinta atmósfera — una card de base de datos descansa sobre un cojín tenue esmeralda, una card de queue sobre uno ámbar cálido.
- Jerarquía tipográfica real. El title lleva peso, la descripción retrocede a un gris atenuado, la label de tipo usa small caps para claridad técnica, y los iconos de tecnología se alinean limpiamente debajo. Se acabó tirar del tamaño como única forma de decir "esto importa más".
Badges, reorganizados
El diseño anterior flotaba hasta ocho badges distintos — insights, ADRs, docs, contratos de API, comentarios, externo, vinculado a la org, time-travel — alrededor del perímetro de cada card. En un diagrama denso, las cards parecían bajo asedio.
Los insights se quedan arriba a la izquierda. Son alertas — accionables. Se ganan su sitio flotante.
Todo lo demás colapsó en una sola tira de metadata inline a lo largo de la parte inferior de la card: 📚 5 · 📄 3 · 🔌 2 · 💬 8. Cada pill sigue expandiéndose al popover completo al hacer click. El cuerpo de la card vuelve a respirar.
Edges que muestran dirección
Estado en reposo: una fina línea neutra, teñida de marca, con un movimiento lento y suave a lo largo de toda su extensión — pequeñas marcas derivando del origen al destino. Sutil pero constante. El canvas se siente vivo incluso cuando no estás interactuando. Crucialmente, el movimiento nunca se detiene ni se reinicia cuando algo más en la página se actualiza — una vez que una relación está en pantalla, sigue derivando para siempre.
Tres estilos de línea fluyen ahora correctamente:
- Solid — línea limpia, continua, sin movimiento. ¿Elegiste solid? Se queda solid.
- Dashed — segmentos uniformes, espaciado medio, derivando a un ritmo calmado y legible.
- Dotted — puntos más juntos y redondeados, derivando a aproximadamente el doble de velocidad, así que un edge dotted se siente visiblemente más "ligero" que uno dashed incluso de un vistazo.
Hover o selección eleva la línea a un gradient de marca (indigo → violeta → fuchsia) orientado en la dirección del edge, así una relación de arriba a abajo tiene un gradient vertical y una de izquierda a derecha tiene uno horizontal. Un suave glow de color de marca se coloca debajo del edge activo. La deriva continúa ininterrumpida por debajo.
El marker de la flecha es un chevron más fino que recoge el terminus del gradient activo. La label del edge se convirtió en una card autocontenida con las tecnologías viviendo dentro del borde redondeado en lugar de como un blob suelto flotando a un lado. El estado activo añade un sliver con gradient de marca en el borde izquierdo de la label y desplaza el color de la descripción a indigo.
Focus mode
Haz click en cualquier node. Tras una breve pausa, el resto del canvas se atenúa — los nodes se vuelven casi transparentes, los edges casi desaparecen. Solo el node clickeado y sus vecinos directos se mantienen vibrantes. Los edges que conectan siguen fluyendo. El node seleccionado gana un halo en capas — un anillo crujiente de color de marca, un suave glow exterior, y un bloom ambient intensificado — todos teñidos por el propio acento del node. Una base de datos enfocada brilla en esmeralda. Una queue enfocada brilla en ámbar. Un system enfocado brilla en indigo.
Esa breve pausa es intencional: un double-click de seguimiento cancela el focus antes de que arranque, así que profundizar al siguiente nivel C4 sigue funcionando sin que el flash de atenuación interfiera.
Haz click en el canvas vacío, pulsa Escape, o haz click en cualquier otro node para quitar el focus.
El resultado es el mayor upgrade de "este diagrama me habla". Un board de 100 nodes donde no podías saber qué estaba conectado con qué es ahora un board donde un click lo responde.
Atmósfera
El canvas en sí ya no es plano. Detrás de la grilla de puntos, suaves charcos de color derivan por la superficie — indigo arriba, fuchsia hacia la esquina, indigo más profundo abajo — todos mantenidos muy tenues para que se lean como atmósfera y no como decoración. La misma identidad que el resto del producto. La grilla de puntos en sí está ahora teñida de marca en lugar de pizarra genérica.
El MiniMap y los Controls fueron reconstruidos para encajar — superficie de marca, borde hairline, sombra ambient de marca, colores de node con tinte de acento. El MiniMap usa ahora la misma paleta que el canvas principal, así la vista de pájaro cuenta la misma historia que el diagrama.
Los handles de conexión brillan en indigo de marca al hover, con un halo suave que previsualiza el color de la relación que estás a punto de dibujar.
Performance
Ya que estábamos, también hicimos el diagrama notablemente más ágil:
- El motor de animación por node desapareció. Era el mayor coste oculto a escala — cada card cargando con su propio bookkeeping de movimiento incluso en reposo. Los cambios de opacidad ahora montan una sola transition ligera.
- Sombras más ligeras. El glow ambient de la primera pasada era un blur generoso y caro; lo apretamos a aproximadamente dos tercios del tamaño manteniendo la sensación elevada.
- Las cards ya no se quedan permanentemente en su propia capa de GPU. Esa hint ahora se dispara solo durante la interacción real, en lugar de quedar horneada para nodes que están simplemente quietos.
- Estrechamos las transitions exactamente a las propiedades que cambian — movimiento y sombra — en lugar de pedirle al navegador que considere cada propiedad "por si acaso".
La preferencia reduced-motion se respeta en todas partes — el flujo en reposo de los edges, el fade del focus mode, y el movimiento de deriva se apagan cuando el sistema operativo reporta esa preferencia.
Pruébalo
Inicia sesión en Archyl, abre cualquier proyecto, y elige un system o container. El nuevo diagrama está desplegado para todos los planes, incluyendo el free tier — sin paso de migración, sin toggle que activar.
Si tienes un diagrama del que estás particularmente orgulloso (o particularmente harto), esta es una buena semana para compartirlo. Reconstruimos el canvas porque queremos que el mapa de arquitectura se sienta como un artefacto real, no como un export de Visio. Mencionános — queremos ver cómo lucen tus mapas ahora.