HFModelo é uma ferramenta web moderna, open-source e executada 100% localmente para design e modelagem de bancos de dados relacionais. Inspirado no clássico brModelo, ele eleva a produtividade ao permitir que você gere diagramas Entidade-Relacionamento (ER) instantaneamente via Inteligência Artificial, ou construa sua arquitetura manualmente em um canvas interativo.
Descreva sua base de dados em linguagem natural e deixe a IA gerar o modelo completo em JSON automaticamente — pronto para ser renderizado no canvas. | Interface fluida construída sobre o React Flow 11: arraste tabelas, conecte chaves estrangeiras e visualize cardinalidades em tempo real. |
Suporte completo às cardinalidades no formato | O frontend roda direto na sua máquina. Sem telemetria, sem nuvem. Seu modelo de dados permanece sob seu controle. |
Utiliza IndexedDB via | Stack 100% moderno com Vite 6, TypeScript 5.6 e Tailwind CSS 3 para uma experiência de desenvolvimento rápida e tipagem segura. |
| Camada | Tecnologia | Versão |
|---|---|---|
| Framework UI | React | 18.3 |
| Canvas / Diagramas | React Flow | 11.11 |
| Linguagem | TypeScript | 5.6 |
| Bundler | Vite | 6.2 |
| Estilos | Tailwind CSS | 3.4 |
| Gerenciamento de Estado | Zustand | 5.0 |
| Persistência Local | idb-keyval (IndexedDB) | 6.2 |
| Ícones | Lucide React | 0.525 |
| IDs Únicos | uuid | 11.1 |
Se você está partindo do zero, configure o ambiente antes de rodar o HFModelo:
| Ferramenta | Versão Mínima | Descrição | Link |
|---|---|---|---|
| Node.js | 18+ | Motor que roda o React e gerencia os pacotes | nodejs.org |
| npm | 8+ | Gerenciador de pacotes (incluso no Node.js) | — |
| Git | qualquer | Para clonar o repositório | git-scm.com |
💡 Recomendamos usar a versão LTS do Node.js para maior estabilidade.
Abra o terminal e siga os passos:
# 1. Clone o repositório
git clone https://github.com/mhaffz/HFModelo.git
cd HFModelo
# 2. Instale as dependências
npm install
# 3. Rode o servidor de desenvolvimento
npm run devAcesse http://localhost:5173 no seu navegador — e seja bem-vindo ao HFModelo! 🎉
| Comando | Descrição |
|---|---|
npm run dev | Inicia o servidor de desenvolvimento com HMR |
npm run build | Compila TypeScript e gera o bundle de produção |
npm run preview | Visualiza o build de produção localmente |
npm run lint | Executa o ESLint para análise estática do código |
1. Na barra lateral esquerda, localize a caixa "Crie com IA"
2. Descreva o banco de dados que você imagina em linguagem natural
3. Clique em "Gerar Diagrama"
4. Aguarde a IA retornar o esquema em JSON
5. Ajuste os nós manualmente no canvas conforme precisar
Exemplo de prompt:
"Preciso de um modelo para um sistema de e-commerce. Quero as tabelas de Cliente, Produto, Pedido e Itens do Pedido. Um cliente pode ter vários pedidos."
A IA retornará um esquema estruturado em JSON que o sistema lerá e renderizará instantaneamente na tela. Seus diagramas são salvos automaticamente no IndexedDB do navegador.
HFModelo/
├── src/ # Código-fonte principal
│ ├── public/ # Arquivos estáticos (imagens, SVGs)
│ │ └── banner.svg # Banner do projeto
│ └── ... # Componentes, hooks, stores, etc.
├── index.html # Entry point HTML
├── vite.config.ts # Configuração do Vite
├── tsconfig.json # Configuração do TypeScript
├── tailwind.config.js # Configuração do Tailwind CSS
├── postcss.config.js # Configuração do PostCSS
└── package.json # Dependências e scripts
Contribuições são muito bem-vindas! Sinta-se à vontade para abrir Issues com bugs ou sugestões. Para enviar código:
# 1. Faça um fork e clone o projeto
git clone https://github.com/mhaffz/HFModelo.git
# 2. Instale as dependências
npm install
# 3. Crie sua branch de feature
git checkout -b feature/MinhaNovaFeature
# 4. Faça suas alterações e garanta que não há erros
npm run lint
# 5. Commit suas alterações
git commit -m "feat: adiciona MinhaNovaFeature"# 6. Push para a branch
git push origin feature/MinhaNovaFeature
# 7. Abra um Pull Request 🚀💡 Utilize a convenção Conventional Commits nas suas mensagens de commit.
Distribuído sob a licença AGPL-3.0. Consulte o arquivo LICENSE para mais detalhes.
⚠️ Qualquer software que interaja com este projeto pela rede e modifique seu código-fonte deve também ser open-source sob a mesma licença.
Feito com ❤️ para a comunidade de desenvolvedores brasileiros.