O que diagrama-interativo faz?
Diagramas técnicos interativos (sistema / arquitetura / sequência / fluxo) em um único arquivo HTML autossuficiente. Um plugin/habilidade para Claude — instale com: npx skills add LizardLiang/interactive-diagram
Visão Geral
Esta habilidade permite que você descreva um sistema, arquitetura, fluxo ou sequência em linguagem natural, e ela gera um diagrama interativo completo em HTML. O diagrama pode incluir cliques, zoom, animações e estilos CSS personalizados, tudo em um único arquivo sem dependências externas.
Como Usar
-
Instale a habilidade:
npx skills add LizardLiang/interactive-diagram -
Descreva o que deseja diagramar. Por exemplo:
"Crie um diagrama de arquitetura de um sistema de e-commerce com microsserviços: frontend, gateway, serviço de pedidos, serviço de pagamento, serviço de estoque e banco de dados."
-
A habilidade gerará um arquivo HTML contendo o diagrama interativo.
Exemplos de Uso
- Diagrama de Sistema: Mostrar componentes de um sistema e suas conexões.
- Diagrama de Arquitetura: Visualizar a estrutura de microsserviços ou deploy.
- Diagrama de Sequência: Ilustrar a troca de mensagens entre objetos ao longo do tempo.
- Diagrama de Fluxo: Representar processos ou algoritmos passo a passo.
Personalização
Você pode solicitar estilos específicos, cores, títulos, legendas e comportamento interativo (como clicar em um nó para mostrar detalhes).
Notas Técnicas
- O HTML gerado é autossuficiente (não requer internet para funcionar).
- Funciona em qualquer navegador moderno (Chrome, Firefox, Edge, Safari).
- O diagrama pode ser salvo e compartilhado como um único arquivo.
Suporte
Para dúvidas ou sugestões, consulte a página original do repositório: LizardLiang/interactive-diagram.