Design de Diagramas Editoriais
Gere diagramas limpos e prontos para publicação como arquivos HTML únicos e autocontidos (SVG + CSS embutidos). Nunca use brilhos ciano-escuros genéricos, layouts padrão do Mermaid ou linhas de conexão diagonais.
DNA Visual e Paleta de Cores
- Papel (Fundo):
#f5f5f5(tela plana). - Tinta (Texto e Traços Dominantes):
#2d3142. - Suave (Texto Secundário e Linhas Padrão):
#4f5d75. - Bordas e Divisores:
rgba(45, 49, 66, 0.12). - Destaque (Gargalos / Foco Crítico):
#eb6c36(coral/terracota; no máximo 1–2 nós de foco por diagrama). - Limites Externos / Difusos: Tracejado (
stroke-dasharray="4,4").
Tipografia (Google Fonts)
Incorpore no cabeçalho HTML:
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- Título do Diagrama:
Instrument Serif, 28px, peso normal. - Nomes dos Nós:
Geist(sans), 12px, peso 600. - Sub-rótulos e Metadados:
Geist Mono, 9px (portas, protocolos, intervalos de lote). - Badges de Conectores / Sobrancelhas:
Geist Mono, 7–8px, maiúsculas, espaçadas (letter-spacing: 0.08em).
Geometria SVG e Padrões de Layout
- Disciplina de Grid de 4px: Todas as coordenadas (
x,y), dimensões (width,height), preenchimentos e lacunas devem ser múltiplos de 4. - Apenas Conectores Ortogonais: Nunca desenhe linhas diagonais inclinadas entre nós fora do eixo. Cada curva deve ser um cotovelo em ângulo reto com canto arredondado (
r=8). Reserve<line>reta estritamente para nós que compartilham eixos idênticos. - Badges Mascaradas em Conectores: Coloque rótulos de protocolo/dados (ex.:
CSV,XLSX,LOAD) dentro de um<rect>opaco preenchido com#f5f5f5(rx=2). Mantenha uma lacuna visível de 6px–10px do traço da linha para que o rótulo nunca corte a seta. - Zonas e Contêineres Funcionais: Agrupe etapas em colunas/áreas amplas (ex.:
COLETA,PROCESSAMENTO,DISSEMINAÇÃO). Use uma borda de 1px (rgba(45,49,66,0.12)), cantos arredondados (rx=8) e uma guia de título mono maiúscula no canto superior esquerdo. - Hierarquia de Nós:
- Padrão: Preenchimento
#ffffff, traçado#2d3142de 1px, raio de 6px (rx=6). - Gargalo / Ponto de Dor: Preenchimento
#fbeee8(rgba(235,108,54,0.08)), traçado#eb6c36. - Externo: Preenchimento transparente ou branco, borda tracejada (
stroke-dasharray="4,4").
- Padrão: Preenchimento
- Legenda Horizontal Inferior: Posicione uma faixa de legenda horizontal abaixo dos nós do diagrama, separada por uma régua fina de largura total.
Template Estrutural SVG
Carregue references/template.md antes de escrever o SVG (marcadores, zonas, conectores, badge mascarada, caixa de nó).