Diagram Design

Esta skill ajuda arquitetos de soluções, engenheiros e redatores técnicos a criar em segundos diagramas profissionais alinhados à identidade visual da marca. Ela oferece 39 tipos de diagramas, de modelos de dados e arquiteturas de implantação a mapas de Wardley e fluxos de jornada do usuário. Cada diagrama é um arquivo HTML independente e otimizado, com SVG e CSS incorporados, sem dependências externas.

Destaques

• Automatiza a extração de elementos visuais da marca a partir do seu site ou sistema de design local
• Oferece 39 tipos de diagramas, incluindo fluxograma, sequência, máquina de estado, modelo ER, Gantt, Sankey e classes UML
• Redesenha arquivos existentes do draw.io e Mermaid com tamanhos e níveis de detalhe personalizados
• Aplica padrões editoriais de qualidade, como baixa densidade de nós, rótulos claros e acessibilidade completa
• Produz diagramas HTML em um único arquivo, otimizados para web, impressão e documentação
• Inclui suporte a temas claros e escuros, além de estilos opcionais de esboço ou terminal

O sistema prioriza a clareza por meio de uma simplificação rigorosa: cada elemento precisa justificar sua presença. Ele impõe alinhamento obrigatório em uma grade de 4 pixels e aplica seis regras de conectores para evitar ambiguidades visuais. Quando a complexidade ultrapassa os limites definidos, os diagramas são divididos automaticamente em visões geral e detalhada. É indicado para arquitetos de sistemas, equipes de produto e fluxos de documentação técnica que precisam de comunicação visual rápida e alinhada à marca, sem ferramentas externas.