Introdução

O erd-editor é um editor de diagramas entidade-relacionamento. Ele está disponível como aplicativo web, aplicativo do Google Drive, extensão do VS Code, plugin do IntelliJ, plugin do Obsidian e como um elemento personalizado <erd-editor> que você pode incorporar em sua própria página. É um só editor e um só formato de documento em todos eles.

Onde obter

Plataforma	Instalação	O que você obtém
Aplicativo 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 salva no mesmo arquivo
VS Code	Marketplace	Abre arquivos .erd.json em um editor personalizado
IntelliJ	JetBrains Marketplace	O mesmo editor, para IDEs baseadas no IntelliJ
Obsidian	Community plugins	Abre arquivos .erd e .erd.json em uma aba do cofre, somente no desktop
Sua página	npm install @dineug/erd-editor	O elemento personalizado <erd-editor>, independente de framework — consulte Instalação
Agentes de codificação	@dineug/erd-editor-mcp	Um servidor MCP que permite ao Claude Code, ao Codex ou a outro cliente editar um diagrama ao vivo no VS Code, em uma IDE da JetBrains ou no Obsidian, ou no próprio arquivo

Para experimentá-lo em uma IDE, crie um arquivo vazio com a extensão .erd.json e abra-o. No Obsidian, execute o comando ERD Editor: Create new diagram na paleta de comandos ou escolha New ERD no menu de contexto de uma pasta, no explorador de arquivos. Qualquer um dos dois cria um arquivo .erd vazio e o abre. No Google Drive, escolha New → More → ERD Editor e depois faça login com o Google. O ERD Editor acessa somente os arquivos que você cria ou abre com ele. No aplicativo web, no Google Drive, no VS Code, em uma IDE da JetBrains e no Obsidian, um diagrama novo e vazio se abre na tela de boas-vindas, um menu de primeiros passos: New Table, New Memo, Import, Command Palette e Shortcuts. Rolar, aplicar zoom e trocar de aba deixam intacto o arquivo vazio de um diagrama novo, já que em um diagrama novo todos os bloqueios estão ativados. Consulte Bloqueio. O VS Code abre um arquivo ERD como texto JSON no Source Control, no Local History, no Compare with Saved, nas revisões de edições do chat do VS Code e de agentes de codificação como o GitHub Copilot e o Claude Code, e nas visualizações de revisões de extensões como GitLens, GitHub Pull Requests e Git Graph, de modo que as diferenças de uma alteração aparecem linha por linha. O comando Reopen Editor With... mostra uma revisão do Git como um diagrama somente 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 lugares onde você compartilha diagramas: uma versão anterior aos grupos de tabelas não mostra ícones de chave primária em um arquivo salvo pela versão atual, e salvar o arquivo nela descarta seus grupos de tabelas e seus scripts de Esquema SQL. Um arquivo salvo por uma dessas versões é regravado na forma atual na primeira alteração que fica gravada no arquivo — consulte Bloqueio. Até lá, um editor de JSON que o valida com base no seu $schema o aponta como inválido.

O que ele faz

• Desenhe tabelas, colunas e notas em um canvas ilimitado e conecte-as com quatro tipos de relacionamento: 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 exibição Alternate Key ativada, o diagrama marca suas colunas como AK1.1, AK1.2 e assim por diante. Consulte Índices e Chaves alternativas.
• Termine um relacionamento em colunas que uma tabela já tem: enquanto você desenha um com o mouse ou com uma caneta, o botão Map to existing columns, ao lado da tabela em que ele termina, associa a chave da tabela pai às colunas dessa tabela, e o botão Create new columns adiciona colunas novas. O item Map Columns no menu de contexto de um relacionamento altera suas colunas depois. Consulte Mapear colunas. Um relacionamento 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 alterna a chave primária na coluna em foco, ou em todas as colunas selecionadas quando ela é uma delas; e Delete ou Backspace exclui a seleção. Cada um deles é uma única etapa de desfazer. Consulte Atalhos. A barra de ferramentas do canvas, na parte inferior do canvas, também adiciona uma tabela ou uma nota com um clique.
• Aplique uma cor a uma tabela, nota ou grupo de tabelas com um seletor que oferece cores predefinidas e as cores que o diagrama já usa, e remova a cor com No color ou Remove color. Consulte Cores de tabelas e notas.
• Reúna tabelas relacionadas em grupos de tabelas: uma caixa atrás delas, que você pode nomear e colorir. Desenhe um com Alt + G ou com New Table Group no menu de contexto do canvas, na barra de ferramentas do canvas ou na pesquisa rápida, ou crie um a partir das tabelas selecionadas com T e depois G ou com Group selected tables no menu de contexto delas. Uma tabela entra em um grupo quando você a solta dentro dele e sai quando você a solta fora dele, e arrastar um grupo pela barra de título move as tabelas dele junto. No DBML, os grupos são importados e exportados como blocos TableGroup.
• Importe um esquema existente de json, Schema SQL, GraphQL, DBML ou AML. Consulte Importar ou exportar arquivos. Um arquivo de Esquema SQL, GraphQL, DBML ou AML entra com as tabelas dispostas ao longo dos seus relacionamentos, ou em linhas quando não tem nenhum. O item Import and Add adiciona um arquivo abaixo do diagrama em vez de substituí-lo.
• Exporte o diagrama como json; como Esquema SQL pela aba Esquema SQL, salvo como arquivo .sql ou copiado; ou pela caixa de diálogo Export image, como imagem PNG ou SVG, ou como PNG na área de transferência.
• Escreva o Esquema SQL na sintaxe de oito fornecedores de banco de dados: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake e SQLite. Consulte Funções relacionadas a tabelas. O painel de opções da aba Esquema SQL define as instruções, o cabeçalho e os grupos de tabelas a escrever, e guarda o seu próprio SQL, salvo 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 ORMs Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy e TypeORM; e AML, DBML, GraphQL, JSON Schema, Mermaid e Zod. O painel de opções da aba Gerador de código define a linguagem, o banco de dados e os estilos de nome, e o código é salvo como um arquivo com a extensão da linguagem ou copiado. Consulte Gerador de código.
• Leia o esquema na aba Visualização, como um Graph dirigido por força ou como um Flow de cartões de tabela dispostos ao longo dos seus relacionamentos, no qual passar o ponteiro sobre uma tabela ilumina tudo o que está ligado a ela. Pressione Alt + F na aba ERD para focar nas tabelas selecionadas e nas tabelas relacionadas a elas.
• Trabalhe em um canvas sem bordas: desloque a área visível até onde o diagrama chegar, aplique zoom de 10% a 150% com Ctrl + Wheel (⌘ + Wheel no Mac), com o teclado ou com o gesto de pinçar, e oculte tudo, exceto o diagrama, com o modo zen. Arrastar com o botão do meio do mouse desloca a área visível a partir de qualquer ponto do canvas, mesmo sobre uma tabela. Consulte Navegar pelo canvas.
• Organize um diagrama inteiro em uma única etapa com o layout automático: uma simulação de forças, um fluxo da esquerda para a direita ou uma árvore em qualquer uma das duas direções, mantendo cada grupo de tabelas unido.
• Execute um comando de qualquer lugar com a pesquisa rápida ou comece a pesquisa com #, @ ou : para ir direto a uma tabela, a uma coluna ou a um comentário ou nota. Percorra o histórico de edições com desfazer e refazer, reproduza no canvas o histórico desta sessão com a viagem no tempo ou compare o diagrama com outro arquivo .json no visualizador de diferenças. A árvore do visualizador, ao lado das duas versões, lista as tabelas, colunas, índices, chaves estrangeiras, notas e grupos de tabelas que foram adicionados, modificados, excluídos ou renomeados.
• Navegue pelo diagrama no explorador, uma árvore encaixada à esquerda do canvas: as tabelas, cada uma com suas colunas, índices e chaves estrangeiras, depois os grupos de tabelas e as notas. Clique em uma linha para ir até o que ela representa no canvas; uma linha de chave estrangeira também ilumina o relacionamento dela. O botão Explorer da barra de ferramentas, ao lado de Search, abre e fecha o explorador.
• Encontre textos com Localizar e substituir, no topo do explorador. Ele pesquisa nomes de tabelas, colunas, índices e grupos de tabelas e, depois que você os ativa, comentários e notas, e mostra as correspondências na árvore do explorador. Substitua uma correspondência ou todas elas; a opção Preserve Case dá a cada substituição as maiúsculas e minúsculas do texto que ela substitui. Ctrl + F (⌘ + F no Mac) abre o explorador com o cursor de texto no campo Localizar, e pressioná-lo de novo fecha o explorador.
• Use o editor em 25 idiomas, escolhidos pelo botão Display Language da barra de ferramentas ou pela pesquisa rápida. A opção System segue o idioma do navegador ou do aplicativo host, e o árabe, o hebraico e o persa dispõem o editor da direita para a esquerda, enquanto o diagrama continua da esquerda para a direita. Só o texto do próprio editor muda: nomes, SQL e código gerado ficam como foram escritos. O construtor de temas da barra de ferramentas define a aparência (System, Light ou Dark), um tom de cinza e uma cor de destaque. Consulte Idioma e tema.
• Mantenha os diffs limpos: a posição de rolagem e o zoom, a aba aberta, a linguagem e os estilos de nome do Gerador de código e o tipo de delimitador ficam bloqueados por padrão, de modo que o arquivo guarda os valores que eles tinham no momento do bloqueio, e rolar, aplicar zoom ou trocar de aba nunca o altera. O arquivo é gravado em uma ordem fixa e deixa de fora as larguras medidas, a ordem de empilhamento, as âncoras dos conectores e os itens removidos, de modo que abrir um diagrama e fechá-lo sem nenhuma edição deixa o arquivo como estava.
• Deixe um agente de codificação, como o Claude Code ou o Codex, editar o diagrama pelo servidor MCP: ao vivo no VS Code, no Obsidian ou em uma IDE da JetBrains, onde cada alteração aparece no canvas no momento em que acontece, ou no próprio arquivo.
• Edite em conjunto, em tempo real, no aplicativo web (experimental). As sessões são ponto a ponto e com criptografia de ponta a ponta, de modo 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() oferece o mesmo fluxo de ações pelo transporte que você escolher.

Comece pelo guia de edição.

O porquê deste projeto

As ferramentas de modelagem existentes não ofereciam o nível de experiência do usuário que eu desejava.
Por isso, iniciei este projeto para oferecer a melhor experiência do usuário possível.
A prioridade máxima do projeto é a experiência de edição do usuário.
Ele vai lhe oferecer uma experiência de edição surpreendente.