hraness/graphics

Criar diagramas claros

Use a CLI graphics instalada como o adaptador determinístico. Mantenha o arquivo .diagram.json editado como fonte; trate .light.svg, .dark.svg, .light.png, .dark.png e .tldr como exportações substituíveis.

Siga o prompt literalmente

Trate o prompt do usuário como a especificação completa do conteúdo.

• Preserve os rótulos, valores, relacionamentos, tamanhos relativos e omissões fornecidos.
• Adicione apenas mecânicas neutras necessárias para desenhar esses fatos.
• Não invente título, subtítulo, legenda, anotação, exemplo, implicação, categoria, métrica, marcação, conector ou afirmação decorativa.
• Não expanda um rótulo curto para uma frase. Prefira o próprio rótulo do usuário de uma a três palavras.
• Ao atualizar, remova o conteúdo rejeitado sem substituí-lo por uma nova elaboração.

Encontre a fonte

1. Leia as instruções do repositório local e procure por graphics.config.*.
2. Busque por um .diagram.json existente sobre o mesmo assunto antes de criar um novo.
3. Atualize essa fonte em vez de editar as imagens geradas ou criar uma duplicata.
4. Em uma base de conhecimento com kb/, use kb/diagrams/<slug>.diagram.json e emparelhe-o com kb/notes/<slug>.md. Incorpore ou vincule a imagem renderizada (clara/escura) de acordo com a convenção do sistema hospedeiro, e vincule o conhecimento através da nota, e não através de uma tela binária.
5. Fora de uma base de conhecimento, use o padrão diagrams/<slug>.diagram.json.

Componha o visual

Leia visual-communication.md antes de criar ou redesenhar materialmente um diagrama.

Aplique estes padrões profundamente:

• Use retângulos arredondados para conceitos comuns. Funções iguais recebem tamanhos, raios, espessuras de traço, tamanhos de ícone e tratamento de rótulo iguais.
• Deixe pelo menos 96px—e preferencialmente 120–200px—entre formas conectadas para que as setas sejam lidas como relacionamentos e não como costuras.
• Coloque ícones diretamente dentro de sua forma semântica. Não coloque um bloco de ícone com borda dentro de outro cartão com borda.
• Use de três a sete elementos primários quando o prompt permitir abstração.
• Estabeleça uma ordem de leitura clara e alinhe elementos do mesmo nível a uma grade compartilhada.
• Use espaço em branco antes de bordas, cores ou prosa para separar grupos.
• Use cor para no máximo uma distinção semântica. Nunca faça alterações arbitrárias de tamanho ou estilo que impliquem uma diferença que o prompt não forneceu.
• Mantenha os ícones como suporte: um rótulo deve ainda carregar o significado.
• Prefira um limite visível por objeto e um traço visível por eixo ou conector.

Não "melhore" dados literais para satisfazer estas preferências. O prompt vence.

Autor e renderize

Use o URL do schema público ou execute graphics init para um modelo inicial:

graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json

O comando render sobrescreve as exportações consistentes com o mesmo radical. Inspecione tanto a saída clara quanto a escura quando o layout ou o contraste forem incertos. Trate todos os alertas de lint úteis; altere a fonte e re-renderize.

Se o repositório usar seu próprio pacote de fonte ou ícone, leia customization.md. Não adicione MonoLisa ou outra fonte licenciada ao repositório. A renderização padrão usa a pilha sans-serif do sistema.

Use TLDraw deliberadamente

O arquivo .tldr gerado é uma troca editável e não requer o SDK do tldraw ou o aplicativo desktop para ser criado. Abra-o no tldraw Offline quando uma pessoa quiser edição direta da tela:

graphics open diagrams/<slug>.tldr

Se o aplicativo opcional estiver ausente, graphics desktop install resolve o lançamento oficial atual, verifica seu digest SHA-256 publicado e inicia o instalador da plataforma. O aplicativo importa .tldr como um documento não salvo; salve-o lá para criar seu pacote .tldraw nativo mais novo. Nunca reescreva um pacote nativo .tldraw (ZIP/SQLite) diretamente.

Verifique

1. Execute graphics check <fonte> --strict.
2. Execute graphics render <fonte>.
3. Confirme que todos os cinco artefatos existem ao lado da fonte ou no diretório de saída solicitado.
4. Inspecione a saída clara e escura no tamanho real.
5. Confirme que formas do mesmo nível não implicam diferenças falsas.
6. Confirme que os conectores são longos, vinculados às formas pretendidas no .tldr e não cruzam rótulos.
7. Se uma nota complementar for necessária, confirme seu caminho e referência visual.