Sobre o projeto

Diagram Design é uma coleção de 39 tipos de diagramas com qualidade editorial fornecidos como arquivos HTML e SVG autônomos, projetados como uma skill ou plugin para assistentes de codificação de IA, incluindo Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro e OpenCode. A filosofia central do projeto é que os diagramas devem corresponder à qualidade visual do conteúdo ao redor, em vez de parecerem modelos genéricos de caixas arredondadas. Cada tipo de diagrama é fornecido em três variantes estáticas: minimal claro, minimal escuro e full-editorial. Toda a saída é autônoma, sem etapa de compilação, JavaScript ou dependências de imagens externas. Os 39 tipos cobrem uma ampla gama de casos de uso, incluindo diagramas de arquitetura, fluxogramas, diagramas de sequência, máquinas de estado, modelos ER/dados, linhas do tempo, swimlanes, quadrantes, gráficos de radar, loops/volantes, hierarquias aninhadas, árvores, organogramas, pilhas de camadas, diagramas de Venn, pirâmides/funis, gráficos de barras, treemaps, gráficos de linhas, gráficos de Gantt, gráficos de dispersão, pilhas de alto nível, processos, arquiteturas medalhão, fluxos de dados, integrações de plataformas de dados, matrizes de segurança, diagramas de Sankey, diagramas de espinha de peixe, mapas de Wardley, quadros Kanban, jornadas do usuário, diagramas de implantação, grafos de dependência, diagramas de classe UML, mapas de história, esquemas de banco de dados, gráficos polares e gráficos de cascata. Um diferencial importante é o fluxo de integração de correspondência de marca. A skill pode buscar a página inicial de um site, extrair a paleta de cores dominante e a pilha de fontes, mapear os valores detectados para papéis semânticos (paper, ink, muted, accent, link) e aplicá-los em todos os diagramas. Ela realiza verificações de contraste WCAG AA automaticamente e emite um recibo de fidelidade documentando URLs amostrados, papéis de cores exatos, famílias de fontes e quaisquer fallbacks. Os perfis podem ser salvos e compartilhados entre vários projetos de clientes usando um arquivo marcador `.diagram-design`. A ferramenta também suporta a importação de diagramas existentes do draw.io, Mermaid ou Excalidraw e os redesenha no sistema Diagram Design no formato, tamanho e nível de detalhe escolhidos. Os padrões semânticos descrevem o comportamento separadamente do layout, para que conceitos como filas, rastreamentos de política ou limites de confiança possam usar o tipo existente mais próximo sem expandir o número de tipos. Movimento acessível opcional está disponível para explicações ordenadas, com suporte a movimento reduzido e um padrão estático. A acessibilidade está incorporada por padrão: cada SVG inclui role="img", aria-labelledby e elementos title/desc com prefixos de ID por diagrama para evitar conflitos quando vários diagramas são incorporados em uma página. A instalação está disponível através do marketplace de plugins nativo de cada host ou via clone direto do Git para instalações editáveis. A skill compartilhada está em `skills/diagram-design/` e é compatível com todos os hosts de Agent Skills suportados.