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, com o <erd-viewer> ao lado para mostrar um diagrama só para leitura. Um site que não carrega nenhum script próprio pode, em alternativa, incorporar numa moldura um diagrama só de leitura a partir de erd-editor.io/embed. É 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, e o <erd-viewer>, que mostra um diagrama só para leitura — consulte Instalação e ErdViewerElement
Qualquer site	erd-editor.io/embed	Um diagrama só de leitura num iframe, a partir do URL de um documento, sem código — consulte Incorporar
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, mudar de separador e mudar a vista de nomes 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 e o @dineug/erd-editor-mcp em todos os sítios onde partilha diagramas. Uma versão anterior ao separador Dicionário, ou um servidor MCP anterior que edite um ficheiro no disco, guarda o diagrama sem os seus nomes lógicos, vínculos a domínios e dicionários. Uma versão anterior aos grupos de tabelas também 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 versão anterior é reescrito no formato atual na primeira alteração que fica registada no ficheiro — consulte Bloqueio. Essa gravação também descarta o texto, as listas e as coleções vazios que a versão anterior escrevia, pelo que altera uma parte do ficheiro maior do que a edição. Até lá, um editor de JSON que valida face ao seu $schema um ficheiro de uma versão anterior aos grupos de tabelas 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.
• Dê nomes lógicos a tabelas e colunas, os nomes que as pessoas leem, como Customer Name para CUST_NM, ao lado dos nomes físicos que o Esquema SQL e o Gerador de código escrevem. A vista de nomes (Physical Names, Logical Names ou Both Names) decide quais deles a tela desenha, e a maioria dos outros locais que dão nome a uma tabela ou coluna, como as linhas de tabelas e de colunas do explorador, o Flow e uma imagem exportada, segue-a. Escolha-a no botão Name View da barra de ferramentas da tela, no menu de contexto da tela, na barra de ferramentas da Visualização no modo Flow ou na pesquisa rápida.
• Mantenha a norma de nomenclatura do diagrama no separador Dicionário. As suas folhas Domains, Words e Terms são pesquisadas, ordenadas e editadas como numa folha de cálculo, cada uma com o seu próprio histórico de anulação. As folhas importam e exportam CSV: uma importação lê a estrutura do próprio editor ou a da norma de dados públicos da Coreia, em UTF-8 ou EUC-KR, e uma exportação escreve a do próprio editor. A célula do nome lógico completa os nomes dos termos. Um nome lógico dá à sua tabela ou coluna um nome físico a partir do termo correspondente, ou das abreviaturas das palavras em que se divide, até escrever o nome por si. Depois de uma palavra ou de um termo mudar, a opção Derive Physical Names Again volta a derivar os nomes, incluindo os nomes que escreveu por si. Uma coluna vinculada a um domínio, manualmente ou pelo seu termo, recebe o tipo de dados do domínio e acompanha as suas alterações, e a opção de vista Domain mostra o domínio de cada coluna. A folha Checks apresenta as palavras proibidas, as palavras não registadas e os sinónimos, os nomes duplicados, os domínios desconhecidos, os nomes físicos que divergem dos do seu termo e os tipos de colunas que divergem dos do seu domínio. A tela dá cor aos nomes lógicos e físicos que as verificações de palavras e de termos assinalam.
• 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.
• Mostre um diagrama só para leitura noutro site: incorpore numa moldura erd-editor.io/embed com o URL de um ficheiro, incluindo um no GitHub, ou carregue o elemento <erd-viewer> na sua própria página. Um leitor desloca a vista, faz zoom, pesquisa e ilumina relações, e nada edita o diagrama.
• 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, pode escrever os nomes lógicos nos comentários vazios 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. No modo Flow, Previous table e Next table percorrem para trás e para a frente aquilo a que o Flow foi restringido, tal como aí fazem as teclas de anular e refazer.
• 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; # e @ também correspondem a nomes lógicos. 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 os nomes de tabelas, colunas, índices e grupos de tabelas, os nomes lógicos de tabelas e colunas e, depois de os ativar, os comentários e as notas, 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, o tipo de delimitador e a vista de nomes 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, mudar de separador ou mudar a vista de nomes nunca o altera. O ficheiro é escrito por uma ordem fixa, com uma linha por cada linha dos dicionários, e omite as larguras medidas, a ordem de sobreposição, as âncoras dos conectores, os elementos removidos, o texto vazio de um elemento e as listas e coleções de um tipo de que o diagrama não contém nenhum elemento, 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. Também pode definir nomes lógicos e domínios de colunas, editar os dicionários, voltar a derivar os nomes físicos e listar o que a folha Checks encontra.
• 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, e o @dineug/erd-editor-yjs mantém o diagrama em sintonia através de um documento Yjs e de qualquer fornecedor que o transporte, incluindo as edições offline e a presença.

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.