Domain Canvas Skill: conectar telas, conceitos e diagramas ER

Um ponto de partida para as atualizações

O Domain Canvas Skill reúne instruções e um gerador em Python. O fluxo examina o código e as especificações do projeto, organiza telas, objetos de negócio e estruturas de dados em model.json e gera um canvas HTML. Ele é distribuído como uma habilidade do Claude Code instalada no projeto, e não como um serviço de hospedagem.

A ideia central é manter um modelo compartilhado em vez de três diagramas independentes. Ao editar model.json e gerar novamente o HTML, cada visão lê os dados atualizados. As conexões das telas ficam em bindings; as relações de negócio e de dados, em relationships. Ainda é necessário verificar a consistência entre entradas relacionadas.

README: visão geral e distribuição

Três perguntas sobre o mesmo objeto

Domínio é o conjunto de objetos e regras com significado para o negócio, como clientes, solicitações e contratos. Um diagrama entidade-relacionamento (ER) descreve atributos e relações dos dados. Alternar a visão muda o nível de detalhe usado para examinar o mesmo objeto.

Design não cria automaticamente uma interface pronta. Pode mostrar uma imagem ou um protótipo HTML local; na ausência deles, usa uma prévia provisória. Concept mostra descrições e relações; ER acrescenta atributos e marcações de chaves. A visão ER atual exclui linhas kind: domain, que representam relações apenas de negócio.

Gerador: exibição e validação

Acompanhar o exemplo de CRM imobiliário

O modelo incluído contém cinco objetos —cliente, imóvel, solicitação, contrato e documento—, três telas de detalhes e cinco relações. A tela do contrato vincula o contrato como objeto principal, cliente e imóvel como contexto e documentos como coleção. Uma tela pode, assim, se conectar a vários objetos conforme o papel de cada um.

Imagine uma mudança para mostrar documentos pendentes nos detalhes do contrato. Você pode verificar o vínculo em Design, ler o significado da relação contrato–documento em Concept e examinar campos como document.contract_id em ER. Este é um cenário ilustrativo de revisão; a demonstração não identifica documentos pendentes.

Na demonstração, alterne Design / Concept / ER no topo. Arraste para deslocar a área, use a roda do mouse ou +/− para ajustar o zoom e Fit para voltar à visão geral. As prévias são provisórias, não capturas de um CRM em funcionamento.

Modelo de CRM imobiliário

Separar relações confirmadas de inferências

Quando a IA organiza um sistema, a evidência para uma linha importa mais do que sua aparência plausível. A habilidade orienta a escolha de fontes conforme a afirmação: esquemas, migrações e modelos ORM para tabelas e chaves; especificações para o significado de negócio; rotas e componentes para as telas.

As relações têm confidence: confirmed (confirmada) ou inferred (inferida). Concept e ER mostram relações inferidas com linhas tracejadas. As regras também impedem confirmar uma relação de banco de dados apenas porque dois conceitos aparecem juntos na interface.

Porém, confirmed é um julgamento registrado no modelo. O gerador não lê a evidência para comprovar sua validade. Fontes e hipóteses ainda não resolvidas devem ficar no README que acompanha a saída.

Regras de extração e evidências

Instalar e começar com um escopo pequeno

A demonstração pública não exige instalação. Para usar no seu projeto, copie .claude/skills/domain-canvas/ do repositório para o mesmo local no projeto de destino. No Claude Code, invoque:

/domain-canvas contracts

contracts é um exemplo de escopo. Também é possível pedir em linguagem natural para reunir telas, modelo conceitual e diagrama ER dos contratos em um canvas. Começar com uma funcionalidade facilita a comparação com as fontes.

.domain-canvas/model.json

Modelo de referência; faça as alterações do modelo aqui.

.domain-canvas/index.html

Canvas gerado para consulta.

.domain-canvas/README.md

Fontes, hipóteses pendentes e comando de atualização.

python .claude/skills/domain-canvas/scripts/generate_canvas.py \
  --model .domain-canvas/model.json \
  --out .domain-canvas/index.html

O gerador precisa de Python 3 e não depende de pacotes Python externos. Execute o comando e abra o HTML no navegador. Para testar o exemplo incluído, use example/model.json como entrada e example/index.html como saída.

Inclua a atualização do modelo, a regeneração e a revisão no fluxo de mudanças da funcionalidade. Edite o modelo: alterações diretas no HTML gerado desaparecem na próxima geração. O HTML incorpora o modelo; antes de compartilhar, verifique quem pode receber a estrutura interna e os arquivos de tela referenciados.

Definição da habilidade e fluxo de trabalho

Verificar separadamente a consistência e a correção do negócio

O gerador atual verifica campos obrigatórios da raiz, IDs duplicados de entidades e telas, extremos das relações e referências das telas. Ele não valida automaticamente todas as restrições do banco nem todas as regras de negócio.

Por exemplo, document.contract_id está definido como nullable: true no modelo incluído, mas o lado do contrato na relação contrato–documento tem cardinalidade 1. É preciso esclarecer se um documento pode existir sem contrato ou se a relação representa apenas documentos já vinculados. Gerar o HTML com sucesso não resolve essa questão semântica.

O visualizador HTML também não edita ou salva o modelo, não grava alterações de volta no código ou no banco e não monitora mudanças continuamente. Omitir tabelas de junção técnicas no modelo conceitual exige decisões de modelagem: atualmente Concept e ER usam a mesma lista de entidades.

O valor prático é tornar as diferenças de entendimento passíveis de revisão. Escolha uma funcionalidade, crie um modelo com evidências e confira as relações pendentes com as áreas de negócio e desenvolvimento. Se esse pequeno processo de manutenção for sustentável, o canvas pode servir como referência compartilhada para transferir o conhecimento que conecta telas e dados.

Gerador: exibição e validação

Fontes e verificação

Foram examinados o README, a definição da habilidade, as regras de extração, o modelo de exemplo e o gerador. A execução com o exemplo produziu HTML com cinco entidades, três telas e cinco relações. Não foram medidas a precisão da extração em projetos reais nem a redução de retrabalho. Os links apontam para o commit examinado; a demonstração pública pode ser atualizada.

• README: visão geral e distribuição
• Gerador: exibição e validação
• Modelo de CRM imobiliário
• Regras de extração e evidências
• Definição da habilidade e fluxo de trabalho

GitHub commit: 914d68fe3f12