Criador de Diagramas

O que Criador de Diagramas faz?

Crie diagramas como artefatos, não como prosa. Escolha um modo de saída:

• clean-svg: conceitos educacionais, sistemas físicos, processos, ciclo de vida, fluxo de dados simples.
• architecture-svg: topologia de software/nuvem/infraestrutura, serviços, bancos de dados, filas, zonas de confiança.
• excalidraw: quadro branco editável com aparência de desenho à mão, fluxograma, sequência, esboço de arquitetura.

Roteamento

• O usuário quer editável/colaborativo: escolha Excalidraw.
• O usuário quer saída refinada e independente no navegador: escolha SVG/HTML.
• Arquitetura de software com componentes de infraestrutura: escolha SVG de arquitetura.
• Ciência, produto, processo, mapa conceitual, objeto físico: escolha SVG limpo.
• Dúvida: faça apenas uma pergunta curta se o formato de saída for relevante; caso contrário, escolha SVG limpo.

Fluxo de Trabalho

1. Extraia nós, grupos, rótulos e relacionamentos direcionados.
2. Escolha primeiro o layout: da esquerda para a direita, de cima para baixo, hub-and-spoke, raias, pilha em camadas, sequência.
3. Mantenha os rótulos curtos. Prefira de 5 a 9 elementos principais em vez de diagramas densos.
4. Gere o arquivo no caminho solicitado, ou ./diagram.html / ./diagram.excalidraw.
5. Verifique a sintaxe abrindo/analisando quando possível.

Regras SVG/HTML

• Arquivo único .html autossuficiente com CSS inline e SVG inline.
• Sem fontes externas, JS, imagens, gradientes, brilhos, bolhas decorativas ou recursos remotos.
• Use cores semânticas, não sequências de arco-íris: neutro, entrada, processamento, armazenamento, externo, risco.
• Desenhe os conectores antes dos nós para que as setas fiquem atrás das caixas.
• Cada caminho de conector deve ter fill="none" e uma seta marcadora quando for direcionado.
• Deixe 24px de preenchimento de texto dentro das caixas; não deixe o texto tocar as bordas.
• Legenda apenas quando símbolos/cores não forem óbvios.

Modelo SVG

Use references/svg-template.md como envoltório e substitua <!-- SVG -->.

Regras Excalidraw

• Salve o JSON .excalidraw com type, version, source, elements e appState.
• Use texto vinculado para rótulos de formas. Não use uma propriedade label não padrão.
• Mantenha o texto vinculado imediatamente após seu contêiner na matriz de elementos.
• Forma rotulada mínima: 120x60. Texto do corpo mínimo: 16px.
• Use rugosidade 1, fontFamily: 1 e preenchimentos simples.

Para trechos exatos de elementos Excalidraw, leia references/excalidraw-patterns.md.