Redesenhamos cada elemento C4 do zero

Diagramas de arquitetura têm um trabalho: te contar a verdade sobre seus sistemas mais rápido do que ler código. A maioria não cumpre. Eles têm a mesma cara seja você olhando uma startup de 12 serviços ou uma empresa de 600 serviços. Os mesmos retângulos azuis genéricos. As mesmas linhas. Sem hierarquia. Sem narrativa.

Passamos a última semana desmontando o canvas do Archyl e remontando peça por peça. Cada node, cada edge, cada pixel do fundo. O release de hoje é o resultado.

Se você logar agora, o diagrama parece um produto diferente.

O que estava errado

Os nodes anteriores eram um borrão de azul genérico. Bordas pesadas, fundos foscos suaves, sombras gigantes — aquele visual "técnico-moderno" que parecia certo em 2022 e hoje parece genérico.

Mais importante: eles não diziam nada visualmente. Um System (Level 1, "a arquitetura") parecia exatamente igual a um Component (Level 3, "uma classe interna"). Um container de banco parecia igual a um container de worker. Os quatro níveis do modelo C4 — System Context → Container → Component → Code — colapsavam numa única camada indiferenciada de retângulos azuis.

As edges eram linhas chumbo achatadas, sem nenhuma sensação de direção. O canvas era uma grade de pontos sobre um fundo plano. A seleção mal aparecia. Você clicava num node e... nada mudava.

O diagrama estava correto. Não estava legível.

O novo sistema visual

Cor por nível, por tipo

Cada nível C4 agora tem seu próprio peso visual:

• System (Level 1) carrega a identidade da marca — uma stripe gradiente fina indigo-para-fucsia ao longo da borda superior do card, as mesmas cores usadas em todo o resto do Archyl. As variantes People recebem um gradiente âmbar quente. Sistemas externos vão para grafite.
• Container (Level 2) é sub-tipado. Bancos e caches são esmeralda. Filas de mensagens são âmbar. Storage de arquivos e funções serverless são cyan. Web apps são indigo. Apps mobile e desktop são violeta. A faixa de destaque na borda superior te diz o que o container é antes de você ler o label.
• Component (Level 3) é intencionalmente discreto — só um accent indigo sutil, card menor, ícone menor. Components vivem dentro de containers e não devem competir visualmente.

Um board de 100 nodes agora se lê como zonas em zoom baixo: clusters verdes significam storage, clusters âmbares significam assíncrono, clusters indigo significam código. Você consegue navegar pela cor antes de ler um único label.

Superfícies mais limpas

Fora: o visual fosco pesado, as bordas grossas, o gradiente azul-duplo que mal era um gradiente.

Dentro:

• Uma borda fininha com um único pixel brilhante na borda superior — o truque do "iluminado de cima" que dá aos cards do Linear e do Stripe aquela sensação premium. Os cards parecem feitos de um material real, em vez de placas translúcidas empilhadas.
• Uma drop shadow direcional tingida pela cor de accent do nível. Cada nível tem seu próprio brilho ambiente embaixo do card. Mesma forma, atmosfera diferente — um card de banco repousa sobre um leve coxim esmeralda, um card de queue sobre um âmbar quente.
• Hierarquia tipográfica de verdade. O título carrega peso, a descrição recua para um cinza apagado, o label de tipo usa small caps para clareza técnica, e os ícones de tecnologia se alinham embaixo. Acabou aquela história de usar tamanho como única forma de dizer "isto importa mais".

Badges, reorganizados

O design anterior flutuava até oito badges diferentes — insights, ADRs, docs, contratos de API, comentários, externos, vinculados à org, time-travel — em volta do perímetro de cada card. Num diagrama denso, parecia que os cards estavam sob cerco.

Insights ficam no canto superior esquerdo. São alertas — acionáveis. Merecem o lugar flutuante.

Todo o resto colapsou numa única strip de metadados inline ao longo da parte inferior do card: 📚 5 · 📄 3 · 🔌 2 · 💬 8. Cada pílula ainda expande no popover completo ao clicar. O corpo do card respira de novo.

Edges que mostram direção

Estado em repouso: uma linha neutra fina, tingida pela marca, com um movimento lento e suave em toda sua extensão — pequenas marcas escorrendo da fonte ao destino. Sutil mas constante. O canvas parece vivo mesmo quando você não está interagindo. E, crucialmente, o movimento nunca para nem reinicia quando outra coisa na página atualiza — uma vez que uma relação está na tela, ela continua escorrendo para sempre.

Três estilos de linha agora fluem corretamente:

• Solid — linha limpa, contínua, sem movimento. Escolheu solid? Fica solid.
• Dashed — segmentos uniformes, médio-espaçados, escorrendo num ritmo calmo e legível.
• Dotted — pontos mais apertados e arredondados, escorrendo em cerca de duas vezes a velocidade, então uma edge dotted parece visivelmente mais "leve" que uma dashed mesmo num relance.

Hover ou seleção promove a linha a um gradiente de marca (indigo → violeta → fucsia) orientado ao longo da direção da edge, então uma relação top-to-bottom tem um gradiente vertical e uma left-to-right tem um gradiente horizontal. Um glow suave da cor da marca aparece sob a edge ativa. O drift continua ininterrupto por baixo.

O marker da seta é um chevron mais fino que pega o terminus do gradiente ativo. O label da edge virou um card autocontido com as tecnologias morando dentro da borda arredondada, em vez de um blob solto flutuando ao lado. O estado ativo adiciona uma fatia em gradiente de marca na borda esquerda do label e muda a cor da descrição para indigo.

Focus mode

Clique em qualquer node. Depois de uma breve pausa, o resto do canvas recua — os nodes ficam quase transparentes, as edges quase desaparecem. Só o node clicado e seus vizinhos diretos continuam vibrantes. As edges conectoras seguem fluindo. O node selecionado ganha um halo em camadas — um anel nítido na cor da marca, um glow externo suave, e um bloom ambiente intensificado — todos tingidos pelo próprio accent do node. Um banco focado brilha esmeralda. Uma queue focada brilha âmbar. Um system focado brilha indigo.

Aquela breve pausa é intencional: um double-click subsequente cancela o focus antes dele entrar em ação, então fazer drill no próximo nível C4 ainda funciona sem o flash de escurecimento atrapalhar.

Clique no canvas vazio, aperte Escape, ou clique em qualquer outro node para limpar o focus.

O resultado é o maior upgrade isolado de "esse diagrama fala comigo". Um board de 100 nodes em que você não conseguia dizer o que estava conectado a quê agora é um board em que um clique responde.

Atmosfera

O canvas em si não é mais plano. Atrás da grade de pontos, poças suaves de cor escorrem pela superfície — indigo no topo, fucsia em direção ao canto, indigo mais profundo na base — todas mantidas bem fracas para que se leiam como atmosfera, não como decoração. Mesma identidade do resto do produto. A própria grade de pontos agora é tingida pela marca em vez de chumbo genérico.

O MiniMap e os Controls foram refeitos para combinar — superfície com a marca, borda fininha, sombra ambiente da marca, cores de node tingidas pelo accent. O MiniMap agora usa a mesma paleta do canvas principal, então a vista de pássaro conta a mesma história que o diagrama em si.

Os connection handles brilham em indigo da marca no hover, com um halo suave que prevê a cor da relação que você está prestes a desenhar.

Performance

Já que estávamos por ali, também deixamos o diagrama notavelmente mais ágil:

• A engine de animação por node morreu. Era o maior custo escondido em escala — cada card carregando sua própria contabilidade de movimento mesmo em repouso. As mudanças de opacity agora andam em uma única transição leve.
• Sombras mais leves. O glow ambiente da primeira passada era um blur generoso e caro; apertamos para cerca de dois terços do tamanho mantendo a sensação de "levantado".
• Os cards não ficam mais permanentemente na própria GPU layer. Esse hint agora dispara só durante a interação real, em vez de ficar pré-cozido para nodes parados.
• Estreitamos as transitions exatamente para as propriedades que mudam — movimento e sombra — em vez de pedir pro browser considerar todas as propriedades "por via das dúvidas".

A preferência de reduced-motion é honrada em todos os lugares — o flow em repouso nas edges, o fade do focus mode, e o movimento de drift, todos desligam quando o sistema operacional reporta essa preferência.

Experimente

Entre no Archyl, abra qualquer projeto, e escolha um system ou container. O novo diagrama está disponível em todos os planos, inclusive no free tier — sem passo de migração, sem toggle pra ativar.

Se você tem um diagrama do qual se orgulha (ou do qual está particularmente cansado), essa é uma boa semana pra compartilhar. Reconstruímos o canvas porque queremos que o mapa de arquitetura pareça um artefato de verdade, não um export do Visio. Marca a gente — queremos ver como seus mapas estão agora.

→ archyl.com