Introdução

O erd-editor é um editor de diagramas entidade-relação. Está disponível como aplicação web, aplicação do Google Drive, extensão do VS Code, plugin do IntelliJ, plugin do Obsidian e como elemento personalizado <erd-editor> que pode incorporar na sua própria página. É o mesmo editor e o mesmo formato de documento em todos eles.

Onde obtê-lo

Plataforma	Instalação	O que obtém
Aplicação web	erd-editor.io	PWA instalável, funciona offline, colaboração em tempo real
Google Drive	Google Workspace Marketplace	Adiciona o ERD Editor aos menus Open with e New do Drive e volta a guardar no mesmo ficheiro
VS Code	Marketplace	Abre ficheiros .erd.json num editor personalizado
IntelliJ	JetBrains Marketplace	O mesmo editor, para os IDE baseados no IntelliJ
Obsidian	Community plugins	Abre ficheiros .erd e .erd.json num separador do cofre, apenas no computador
A sua página	npm install @dineug/erd-editor	O elemento personalizado <erd-editor>, independente de frameworks — consulte Instalação
Agentes de programação	@dineug/erd-editor-mcp	Um servidor MCP que permite ao Claude Code, ao Codex ou a outro cliente editar um diagrama em direto no VS Code, num IDE da JetBrains ou no Obsidian, ou no próprio ficheiro

Para o experimentar num IDE, crie um ficheiro vazio com a extensão .erd.json e abra-o. No Obsidian, execute ERD Editor: Create new diagram a partir da paleta de comandos, ou escolha a opção New ERD no menu de contexto de uma pasta no explorador de ficheiros. Qualquer uma das formas cria um ficheiro .erd vazio e abre-o. No Google Drive, escolha New → More → ERD Editor e depois inicie sessão com o Google. O ERD Editor só acede aos ficheiros criados ou abertos com ele. Na aplicação web, no Google Drive, no VS Code, num IDE da JetBrains e no Obsidian, um diagrama novo e vazio abre-se no ecrã de boas-vindas, um menu de primeiros passos: New Table, New Memo, Import, Command Palette e Shortcuts. Deslocar a vista, fazer zoom e mudar de separador deixam o ficheiro vazio de um diagrama novo tal como está, já que num diagrama novo todos os bloqueios estão ativados. Consulte Bloqueio. O VS Code abre um ficheiro ERD como texto JSON no Source Control, no Local History, no Compare with Saved, nas revisões das edições do chat do VS Code e de agentes de programação como o GitHub Copilot e o Claude Code, e nas vistas de revisão de extensões como o GitLens, o GitHub Pull Requests e o Git Graph, pelo que uma alteração é comparada linha a linha. O comando Reopen Editor With... mostra uma revisão do Git como um diagrama só de leitura.

Depois de atualizar o plugin do Obsidian, reinicie o Obsidian: até lá, a janela mantém o editor que a versão anterior carregou. Atualize o ERD Editor em todos os sítios onde partilha diagramas: uma versão anterior aos grupos de tabelas não mostra os ícones de chave primária num ficheiro guardado pela versão atual, e guardar o ficheiro nessa versão descarta os seus grupos de tabelas e os scripts do Esquema SQL. Um ficheiro guardado por uma dessas versões é reescrito no formato atual na primeira alteração que fica registada no ficheiro — consulte Bloqueio. Até lá, um editor de JSON que o valida face ao seu $schema assinala-o como inválido.

O que faz

• Desenhe tabelas, colunas e notas numa tela sem limites e ligue-as com quatro tipos de relação: Zero One, Zero N, One Only, One N. Consulte Começar a editar. Os índices são definidos no painel de propriedades da tabela. Um índice único sobre duas ou mais colunas é uma chave alternativa e, com a opção de vista Alternate Key ativada, o diagrama marca as suas colunas com AK1.1, AK1.2 e assim sucessivamente. Consulte Índices e Chaves alternativas.
• Termine uma relação em colunas que uma tabela já tem: enquanto desenha uma com o rato ou com uma caneta, a opção Map to existing columns, ao lado da tabela em que ela termina, associa a chave da tabela pai às colunas dessa tabela, e a opção Create new columns adiciona colunas novas. A opção Map Columns do menu de contexto de uma relação altera mais tarde as suas colunas. Consulte Mapear colunas. Uma relação também pode ter ações ON DELETE e ON UPDATE. Consulte ON DELETE e ON UPDATE.
• Edite com rapidez: Alt + N adiciona uma tabela; Alt + Enter adiciona uma coluna; Alt + K ativa ou desativa a chave primária na coluna com o foco, ou em todas as colunas selecionadas quando esta é uma delas; e Delete ou Backspace elimina a seleção. Cada um corresponde a um passo de anulação. Consulte Atalhos. A barra de ferramentas da tela, na parte inferior da tela, também adiciona uma tabela ou uma nota com um clique.
• Atribua uma cor a uma tabela, nota ou grupo de tabelas com um seletor de cores que inclui cores predefinidas e as cores que o diagrama já utiliza, e retire uma cor com a opção No color ou Remove color. Consulte Atribuição de cores a tabelas e notas.
• Reúna tabelas relacionadas em grupos de tabelas: uma caixa atrás delas à qual pode dar um nome e uma cor. Desenhe um com Alt + G ou com a opção New Table Group do menu de contexto da tela, da barra de ferramentas da tela ou da pesquisa rápida, ou crie um a partir das tabelas selecionadas com T e depois G ou com a opção Group selected tables do seu menu de contexto. Uma tabela entra num grupo quando é largada no seu interior e sai quando é largada fora dele, e arrastar um grupo pela barra de título move as suas tabelas com ele. O DBML transporta os grupos nos dois sentidos, como blocos TableGroup.
• Importe um esquema existente a partir de json, Schema SQL, GraphQL, DBML ou AML. Consulte Importar ou exportar ficheiros. Um ficheiro de Esquema SQL, GraphQL, DBML ou AML é importado com as tabelas dispostas segundo as suas relações, ou em linhas quando não tem nenhuma. A opção Import and Add adiciona um ficheiro por baixo do diagrama em vez de o substituir.
• Exporte o diagrama como json; como Esquema SQL a partir do separador Esquema SQL, guardado como ficheiro .sql ou copiado; ou a partir da caixa de diálogo Export image como imagem PNG ou SVG, ou como PNG na área de transferência.
• Produza o Esquema SQL na sintaxe de oito bases de dados: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake e SQLite. Consulte Funções relacionadas com tabelas. O painel de opções do separador Esquema SQL escolhe as instruções, o cabeçalho e os grupos de tabelas a escrever, e mantém SQL da sua autoria, guardado no diagrama, para escrever antes e depois das tabelas.
• Gere código para vinte e dois destinos: as linguagens C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift e TypeScript; os ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy e TypeORM; e AML, DBML, GraphQL, JSON Schema, Mermaid e Zod. O painel de opções do separador Gerador de código escolhe a linguagem, a base de dados e os formatos dos nomes, e o código é guardado como ficheiro com a extensão da linguagem ou copiado. Consulte Gerador de código.
• Leia o esquema na Visualização, como um Graph dirigido por forças ou como um Flow de cartões de tabelas dispostos segundo as suas relações, onde passar o ponteiro sobre uma tabela ilumina tudo o que lhe está ligado. Prima Alt + F no separador ERD para focar nas tabelas selecionadas e nas tabelas relacionadas com elas.
• Trabalhe numa tela sem limites: desloque a vista até onde o diagrama chegar, faça zoom de 10% a 150% com Ctrl + Wheel (⌘ + Wheel no Mac), com o teclado ou com um gesto de pinça, e oculte tudo menos o diagrama com o modo zen. Um arrasto com o botão do meio do rato desloca a vista a partir de qualquer ponto da tela, mesmo sobre uma tabela. Consulte Navegar na tela.
• Organize um diagrama inteiro num só passo com a disposição automática: uma simulação de forças, um fluxo da esquerda para a direita ou uma árvore em qualquer uma das duas direções, com cada grupo de tabelas mantido junto.
• Execute um comando a partir de qualquer lado com a pesquisa rápida, ou comece a pesquisa com #, @ ou : para saltar para uma tabela, para uma coluna ou para um comentário ou nota. Percorra passo a passo o histórico de edições com anular e refazer, reproduza o histórico desta sessão na tela com a viagem no tempo ou compare o diagrama com outro ficheiro .json no visualizador de diferenças. A sua árvore, ao lado das duas versões, lista as tabelas, colunas, índices, chaves externas, notas e grupos de tabelas que foram adicionados, modificados, eliminados ou que mudaram de nome.
• Percorra o diagrama no explorador, uma árvore ancorada à esquerda da tela: as tabelas, cada uma com as suas colunas, índices e chaves externas, depois os grupos de tabelas e as notas. Clique numa linha para ir para aquilo que ela representa na tela; uma linha de chave externa também ilumina a sua relação. O botão Explorer da barra de ferramentas, ao lado do botão Search, abre-o e fecha-o.
• Localize texto com Localizar e substituir, no topo do explorador. Pesquisa nomes de tabelas, colunas, índices e grupos de tabelas, e ainda comentários e notas depois de os ativar, e mostra as correspondências na árvore do explorador. Substitua uma correspondência ou todas; a opção Preserve Case dá a cada substituição as maiúsculas e minúsculas do texto que substitui. Ctrl + F (⌘ + F no Mac) abre o explorador com o cursor de texto no campo Localizar, e premi-lo de novo fecha o explorador.
• Utilize o editor em 25 idiomas, escolhidos no botão Display Language da barra de ferramentas ou na pesquisa rápida. A opção System segue o idioma do navegador ou da aplicação host, e o árabe, o hebraico e o persa dispõem o editor da direita para a esquerda, enquanto o diagrama se mantém da esquerda para a direita. Só o texto do próprio editor muda: os nomes, o SQL e o código gerado ficam tal como foram escritos. O criador de temas da barra de ferramentas escolhe o aspeto (System, Light ou Dark), um tom de cinzento e uma cor de destaque. Consulte Idioma e tema.
• Mantenha os diffs limpos: a posição de deslocamento e o zoom, o separador aberto, a linguagem e os formatos dos nomes do Gerador de código e o tipo de delimitador estão bloqueados por predefinição, pelo que o ficheiro mantém os valores que tinham no momento do bloqueio, e deslocar a vista, fazer zoom ou mudar de separador nunca o altera. O ficheiro é escrito por uma ordem fixa e omite as larguras medidas, a ordem de sobreposição, as âncoras dos conectores e os elementos removidos, pelo que abrir um diagrama e fechá-lo sem nenhuma edição deixa o ficheiro como estava.
• Deixe um agente de programação como o Claude Code ou o Codex editar o diagrama através do servidor MCP: em direto no VS Code, no Obsidian ou num IDE da JetBrains, onde cada alteração aparece na tela à medida que acontece, ou no próprio ficheiro.
• Edite em conjunto em tempo real na aplicação web (experimental). As sessões são entre pares e encriptadas ponto a ponto, pelo que nenhum servidor guarda o seu esquema, e os pares veem os cursores, o foco e as seleções uns dos outros. Na sua própria página, o método getSharedStore() dá-lhe o mesmo fluxo de ações sobre o transporte à sua escolha.

Comece pelo guia de edição.

A razão de ser deste projeto

As ferramentas de modelação existentes não ofereciam o nível de experiência do utilizador que eu desejava.
Por isso, iniciei este projeto para proporcionar a melhor experiência do utilizador possível.
A prioridade máxima do projeto é a experiência de edição do utilizador.
Vai proporcionar-lhe uma experiência de edição impressionante.