Design de Diagramas

Crie diagramas como arquivos HTML autônomos com SVG embutido e um sistema de design editorial.

Quarenta e cinco tipos visuais. Padrões semânticos descrevem o comportamento; referências de tipo descrevem o layout.

0. Configuração inicial — portão do guia de estilo

Antes de gerar seu primeiro diagrama em um novo projeto, verifique se o guia de estilo foi personalizado.

Não envie diagramas com skin padrão silenciosamente para um projeto com marca.

Primeiro, resolva qualquer marcador .diagram-design do projeto conforme references/profiles.md; um marcador resolvido com sucesso seleciona seu perfil e ignora este portão. Essa referência é responsável pelas falhas, pelo padrão protegido e pelo comportamento de salvamento.

Abra references/style-guide.md e verifique os tokens padrão. Se eles ainda forem os padrões enviados (#f5f5f5 papel, #2d3142 tinta, #bf4520 destaque), pause e pergunte ao usuário:

"Este é o seu primeiro diagrama neste projeto e o guia de estilo ainda é o padrão. Personalizar agora? Opções: (a) URL do site, (b) skill instalada, (c) pasta local/sistema de design, (d) colar tokens, (e) manter padrão, (f) carregar perfil salvo."

Em seguida, crie um branch de acordo com a seção correspondente de references/onboarding.md; para (f) siga references/profiles.md.

Assim que o guia de estilo for personalizado (ou o usuário escolher explicitamente o padrão), ignore este portão em execuções posteriores. Um cabeçalho de perfil principal nomeia o perfil ativo copiado. Sem um cabeçalho, qualquer valor de papel semântico ou família de tipografia diferente dos padrões enviados significa personalizado-não salvo: ignore o portão e ofereça para salvá-lo como um perfil. Tokens totalmente padrão sem marcador/cabeçalho acionam o portão. Após o onboarding, ofereça para salvar como um perfil de cliente nomeado conforme references/profiles.md.

1. Filosofia

A ação de maior qualidade geralmente é a exclusão.

Aplicado a esquemas:

• Cada nó representa uma ideia distinta. Dois nós que sempre viajam juntos são um nó.
• Cada conexão carrega informações. Se a relação for óbvia pelo layout, remova a linha.
• Coral é editorial, não uma bandeira. 1–2 nós focais por diagrama. Usá-lo em 5 nós apaga o sinal.
• O esquema não está pronto quando tudo é adicionado. Ele está pronto quando nada pode ser removido.

Densidade alvo: 4/10. Suficiente para ser tecnicamente completo. Não tão denso que precise de um guia. Acima de 9 nós, provavelmente são dois diagramas.

2. Quando Usar

Use para qualquer um dos 45 tipos visuais (§3) quando um leitor aprenderá mais com um visual do que com prosa, uma tabela ou uma lista com marcadores.

Não use para:

• Diagramas rápidos de unicode → use wiretext.
• Listas de coisas → tabela ou marcadores.
• Apenas atributos antes/depois → tabela; mudanças de topologia → Delta de arquitetura.
• "Diagramas" de uma forma só → apenas escreva a frase.

Antes de desenhar, pergunte: O leitor aprenderia mais com isso do que com um parágrafo bem escrito? Se não, não desenhe.

3. Seleção: padrão semântico, depois tipo visual

Quando comportamento, estado, aplicação ou risco carregam o significado, primeiro carregue references/semantic-patterns.md e escolha um padrão primário. Em seguida, escolha o tipo visual mais próximo para o layout. Se nenhum padrão corresponder, escolha o tipo diretamente.

…