Modelador de DRE

No modelador você cria tabelas e colunas com tipo, chave primária, NOT NULL, UNIQUE e outras opções de cada campo. As relações 1:1, 1:N e N:N são desenhadas entre as tabelas, e as pontas das linhas podem ser arrastadas para deixar o diagrama legível. Também dá para soltar comentários no meio do canvas.

Quando o diagrama estiver pronto, ele pode ser exportado de três formas:

• DDL SQL, pronto para rodar no banco;
• JSON, para guardar o modelo ou continuar em outro computador;
• PNG, para documentação ou apresentação.

Tudo é salvo automaticamente no navegador. Nada vai para o servidor.

Conversor de DDL

O conversor recebe um DDL SQL, um JSON de tabelas ou interfaces TypeScript e gera a base de uma API em TypeScript. Você escolhe:

• o ORM: Sequelize, TypeORM, Prisma ou MongoDB (Mongoose);
• o banco: PostgreSQL ou MySQL;
• se quer timestamps (createdAt/updatedAt) gerenciados pelo ORM;
• o que gerar: interfaces, DTOs, models/entities, migrations, repositories, services, controllers Express, OpenAPI e o próprio DDL.

Os arquivos aparecem numa árvore para conferir antes de baixar, e o resultado sai num .zip com um README listando as dependências. O código gerado não depende de nenhuma biblioteca do studio: é Express + TypeScript com o ORM escolhido.

Do DDL ao diagrama (e de volta)

As duas ferramentas conversam. Depois de converter um DDL, o botão Abrir no modelador leva as tabelas e as relações direto para o diagrama. O caminho contrário também funciona: o modelador exporta o DDL, que pode ser colado no conversor.

Isso ajuda quando o banco já existe. Basta exportar o schema, colar no conversor e ganhar um diagrama para entender ou documentar o que já está lá.

Temas

A interface tem oito temas: Green, Orange, Blue e Purple, cada um com versão escura e clara, além da opção Sistema, que segue o claro/escuro do aparelho. O modelador acompanha o tema escolhido.

Como foi feito

O studio nasceu de um código que já existia. O modelador e o conversor faziam parte do painel administrativo do meu site pessoal, adaptado e feito com AdminJS, e dependiam da autenticação, das classes base e da estrutura do site. Para virar um projeto público, o código foi adaptado com a ajuda de IA (Claude, da Anthropic) para ficar isolado:

• O modelador saiu do AdminJS e ganhou uma página própria;
• Os geradores de código foram reescritos para produzir código independente e ganharam suporte a outros ORMs e bancos;
• O conversor deixou de gravar arquivos no servidor e passou a ter limites de uso, já que agora é aberto;
• A interface ganhou identidade própria e os temas.

Por baixo, é um monolito pequeno: um servidor Express que entrega as páginas em React 18 renderizadas no servidor (SSR) e a API de conversão, tudo em TypeScript e empacotado com Vite. Não tem banco de dados nem login, nada é salvo no sistema.

Próximos passos

Algumas coisas que ainda quero colocar:

• desfazer/refazer e atalhos de teclado no modelador;
• vários diagramas salvos no navegador e link compartilhável;
• mais ORMs no conversor;
• testes automatizados dos geradores.