Introducción

erd-editor es un editor de diagramas entidad-relación. Está disponible como aplicación web, aplicación de Google Drive, extensión de VS Code, plugin de IntelliJ, plugin de Obsidian y como elemento personalizado <erd-editor> que puedes integrar en tu propia página, con <erd-viewer> a su lado para mostrar un diagrama en solo lectura. Un sitio que no carga ningún script propio puede enmarcar un diagrama de solo lectura desde erd-editor.io/embed. En todos ellos se trata del mismo editor y del mismo formato de documento.

Dónde conseguirlo

Plataforma	Instalación	Qué obtienes
Aplicación web	erd-editor.io	PWA instalable, funciona sin conexión, colaboración en tiempo real
Google Drive	Google Workspace Marketplace	Añade ERD Editor a los menús Open with y New de Drive, y guarda los cambios en el mismo archivo
VS Code	Marketplace	Abre los archivos .erd.json en un editor personalizado
IntelliJ	JetBrains Marketplace	El mismo editor, para los IDE basados en IntelliJ
Obsidian	Community plugins	Abre los archivos .erd y .erd.json en una pestaña de la bóveda, solo en escritorio
Tu página	npm install @dineug/erd-editor	El elemento personalizado <erd-editor>, que no necesita ningún framework, y <erd-viewer>, que muestra un diagrama en solo lectura; consulta Instalación y ErdViewerElement
Cualquier sitio	erd-editor.io/embed	Un diagrama de solo lectura en un iframe, a partir de la URL de un documento y sin código; consulta Incrustación
Agentes de programación	@dineug/erd-editor-mcp	Un servidor MCP que permite a Claude Code, Codex u otro cliente editar un diagrama en vivo en VS Code, un IDE de JetBrains u Obsidian, o en el propio archivo

Para probarlo en un IDE, crea un archivo vacío con la extensión .erd.json y ábrelo. En Obsidian, ejecuta ERD Editor: Create new diagram desde la paleta de comandos o elige New ERD en el menú contextual de una carpeta del explorador de archivos. Cualquiera de las dos opciones crea un archivo .erd vacío y lo abre. En Google Drive, elige New → More → ERD Editor y, después, inicia sesión con Google. ERD Editor solo accede a los archivos que creas o abres con él. En la aplicación web, Google Drive, VS Code, un IDE de JetBrains y Obsidian, un diagrama nuevo y vacío se abre en la pantalla de bienvenida, un menú de primeros pasos: New Table, New Memo, Import, Command Palette y Shortcuts. Desplazar la vista, hacer zoom, cambiar de pestaña y cambiar la vista de nombres dejan tal como está el archivo vacío de un diagrama nuevo, ya que en un diagrama nuevo todos los bloqueos están activados. Consulta Bloqueo. VS Code abre un archivo ERD como texto JSON en Source Control, Local History, Compare with Saved, la revisión de ediciones del chat de VS Code y de agentes de programación como GitHub Copilot y Claude Code, y las vistas de revisiones de extensiones como GitLens, GitHub Pull Requests y Git Graph, así que un cambio se compara línea a línea. Reopen Editor With... muestra una revisión de Git como un diagrama de solo lectura.

Después de actualizar el plugin de Obsidian, reinicia Obsidian: hasta entonces, la ventana conserva el editor que cargó la versión anterior. Actualiza ERD Editor y @dineug/erd-editor-mcp en todos los lugares donde compartas diagramas. Una versión anterior a la pestaña Diccionario, o un servidor MCP anterior que edita un archivo en disco, guarda el diagrama sin sus nombres lógicos, sus vínculos con dominios ni sus diccionarios. Una versión anterior a la introducción de los grupos de tablas, además, no muestra los iconos de clave principal en un archivo guardado por la versión actual, y guardar allí el archivo elimina sus grupos de tablas y sus scripts de Esquema SQL. Un archivo guardado por una versión anterior se reescribe en el formato actual con el primer cambio que el archivo conserva; consulta Bloqueo. Ese guardado también elimina los textos, las listas y las colecciones vacíos que escribía la versión anterior, así que cambia más partes del archivo que la propia edición. Hasta entonces, un editor JSON que valida con su $schema un archivo de una versión anterior a los grupos de tablas indica que no es válido.

Qué hace

• Dibuja tablas, columnas y notas en un lienzo sin límites y conéctalas con cuatro tipos de relación: Zero One, Zero N, One Only, One N. Consulta Empezar a editar. Los índices se definen en el panel de propiedades de la tabla. Un índice único sobre dos o más columnas es una clave alternativa y, con la opción de vista Alternate Key activada, el diagrama marca sus columnas como AK1.1, AK1.2, etc. Consulta Índices y Claves alternativas.
• Termina una relación en columnas que una tabla ya tiene: mientras dibujas una con un ratón o un lápiz, Map to existing columns, junto a la tabla en la que termina, empareja la clave de la tabla padre con las columnas de esa tabla, y Create new columns añade columnas nuevas. Map Columns, en el menú contextual de una relación, cambia sus columnas más adelante. Consulta Asignar columnas. Una relación también puede llevar acciones ON DELETE y ON UPDATE. Consulta ON DELETE y ON UPDATE.
• Edita con rapidez: Alt + N añade una tabla; Alt + Enter añade una columna; Alt + K activa o desactiva la clave principal de la columna con el foco, o de todas las columnas seleccionadas cuando esta es una de ellas; y Delete o Backspace elimina la selección. Cada uno es un solo paso de deshacer. Consulta Atajos de teclado. La barra de herramientas del lienzo, en la parte inferior del lienzo, también añade una tabla o una nota con un solo clic.
• Da color a una tabla, una nota o un grupo de tablas desde un selector con colores predefinidos y los colores que ya usa el diagrama, y quita el color con No color o Remove color. Consulta Asignación de colores a tablas y notas.
• Reúne las tablas relacionadas en grupos de tablas: un recuadro detrás de ellas al que puedes dar nombre y color. Dibuja uno con Alt + G o con New Table Group desde el menú contextual del lienzo, la barra de herramientas del lienzo o la búsqueda rápida, o crea uno a partir de las tablas seleccionadas con T y luego G o con Group selected tables en su menú contextual. Una tabla se une a un grupo cuando la sueltas dentro y lo abandona cuando la sueltas fuera, y al arrastrar un grupo por su barra de título se mueven sus tablas con él. DBML conserva los grupos en ambos sentidos, como bloques TableGroup.
• Da a las tablas y las columnas nombres lógicos, los nombres que leen las personas, como Customer Name para CUST_NM, junto a los nombres físicos que escriben el Esquema SQL y el Generador de código. La vista de nombres (Physical Names, Logical Names o Both Names) decide cuáles de ellos dibuja el lienzo, y la siguen la mayoría de los demás lugares que nombran una tabla o una columna, como las filas de tabla y de columna del explorador, Flow y una imagen exportada. Elígela con el botón Name View de la barra de herramientas del lienzo, desde el menú contextual del lienzo, desde la barra de herramientas de Visualización en Flow o desde la búsqueda rápida.
• Mantén el estándar de nomenclatura del diagrama en la pestaña Diccionario. En sus hojas Domains, Words y Terms se busca, se ordena y se edita como en una hoja de cálculo, cada una con su propio historial de deshacer. Las hojas importan y exportan CSV: una importación lee la estructura propia del editor o la del estándar de datos públicos de Corea, en UTF-8 o EUC-KR, y una exportación escribe la del editor. La celda del nombre lógico completa nombres de términos. Un nombre lógico da a su tabla o columna un nombre físico a partir del término correspondiente, o de las abreviaturas de las palabras en que se divide, hasta que escribes tú mismo el nombre. Después de que cambie una palabra o un término, Derive Physical Names Again vuelve a derivar los nombres, incluidos los escritos por ti. Una columna vinculada a un dominio, a mano o por su término, toma el tipo de datos del dominio y sigue sus cambios, y la opción de vista Domain muestra el dominio de cada columna. La hoja Checks enumera las palabras prohibidas, las no registradas y los sinónimos, los nombres duplicados, los dominios desconocidos, los nombres físicos que difieren de los de su término y los tipos de columna que difieren de los de su dominio. El lienzo colorea los nombres lógicos y físicos que señalan las comprobaciones de palabras y términos.
• Importa un esquema existente desde json, Schema SQL, GraphQL, DBML o AML. Consulta Importar o exportar archivos. Un archivo de Esquema SQL, GraphQL, DBML o AML llega con sus tablas dispuestas siguiendo sus relaciones, o en filas si no tiene ninguna. Import and Add añade un archivo debajo del diagrama en lugar de reemplazarlo.
• Exporta el diagrama como json; como Esquema SQL desde la pestaña Esquema SQL, guardado en un archivo .sql o copiado; o desde el cuadro de diálogo Export image como imagen PNG o SVG, o como PNG en el portapapeles.
• Muestra un diagrama en solo lectura en otro sitio: enmarca erd-editor.io/embed con la URL de un archivo, incluido uno de GitHub, o carga el elemento <erd-viewer> en tu propia página. Un lector desplaza la vista, hace zoom, busca e ilumina relaciones, y nada edita el diagrama.
• Escribe Esquema SQL con la sintaxis de ocho proveedores de bases de datos: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake y SQLite. Consulta Funciones relacionadas con las tablas. En el panel de opciones de la pestaña Esquema SQL se eligen las sentencias, la cabecera y los grupos de tablas que se escriben, se pueden escribir los nombres lógicos en los comentarios vacíos y se conserva SQL propio, guardado en el diagrama, para escribirlo antes y después de las tablas.
• Genera código para veintidós destinos: los lenguajes C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift y TypeScript; los ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy y TypeORM; y AML, DBML, GraphQL, JSON Schema, Mermaid y Zod. En el panel de opciones de la pestaña Generador de código se eligen el lenguaje, la base de datos y los estilos de nombres, y el código se guarda como archivo con la extensión del lenguaje o se copia. Consulta Generador de código.
• Explora el esquema en Visualización, como un Graph dirigido por fuerzas o como un Flow de tarjetas de tabla dispuestas siguiendo sus relaciones, donde al pasar el puntero por encima de una tabla se ilumina todo lo que toca. Pulsa Alt + F en la pestaña ERD para centrarte en las tablas seleccionadas y en las tablas relacionadas con ellas. En Flow, Previous table y Next table retroceden y avanzan por las vistas a las que se ha acotado Flow, como hacen allí las teclas de deshacer y rehacer.
• Trabaja en un lienzo sin bordes: desplaza la vista hasta donde llegue el diagrama, haz zoom del 10% al 150% con Ctrl + Wheel (⌘ + Wheel en Mac), el teclado o un pellizco, y oculta todo menos el diagrama con el modo zen. Un arrastre con el botón central del ratón desplaza la vista desde cualquier punto del lienzo, incluso sobre una tabla. Consulta Moverse por el lienzo.
• Ordena todo un diagrama en un solo paso con la disposición automática: una simulación de fuerzas, un flujo de izquierda a derecha o un árbol en cualquiera de las dos direcciones, y cada grupo de tablas se mantiene unido.
• Ejecuta un comando desde cualquier lugar con la búsqueda rápida, o empieza la búsqueda con #, @ o : para saltar a una tabla, a una columna o a un comentario o nota; # y @ también buscan en los nombres lógicos. Recorre el historial de ediciones paso a paso con Deshacer y rehacer, reproduce el historial de esta sesión en el lienzo con el viaje en el tiempo o compara el diagrama con otro archivo .json en el visor de diferencias. Su árbol, junto a las dos versiones, enumera las tablas, columnas, índices, claves externas, notas y grupos de tablas que se han añadido, modificado, eliminado o renombrado.
• Recorre el diagrama en el explorador, un árbol acoplado a la izquierda del lienzo: las tablas, cada una con sus columnas, índices y claves externas, y después los grupos de tablas y las notas. Haz clic en una fila para ir a lo que representa en el lienzo; una fila de clave externa ilumina además su relación. El botón Explorer de la barra de herramientas, junto a Search, lo abre y lo cierra.
• Encuentra texto con Buscar y reemplazar, en la parte superior del explorador. Busca en los nombres de tablas, columnas, índices y grupos de tablas, en los nombres lógicos de tablas y columnas y, una vez que los activas, en los comentarios y las notas, y muestra las coincidencias en el árbol del explorador. Reemplaza una coincidencia o todas; Preserve Case da a cada reemplazo las mayúsculas y minúsculas del texto que reemplaza. Ctrl + F (⌘ + F en Mac) abre el explorador con el cursor de texto en el campo Buscar, y al volver a pulsarlo se cierra el explorador.
• Usa el editor en 25 idiomas, que se eligen con el botón Display Language de la barra de herramientas o desde la búsqueda rápida. System sigue el idioma del navegador o de la aplicación host, y el árabe, el hebreo y el persa disponen el editor de derecha a izquierda, mientras que el diagrama sigue de izquierda a derecha. Solo cambia el texto propio del editor: los nombres, el SQL y el código generado se quedan tal como se escribieron. En el generador de temas de la barra de herramientas se elige la apariencia (System, Light o Dark), un tono de gris y un color de énfasis. Consulta Idioma y tema.
• Mantén limpios los diffs: la posición de desplazamiento y el zoom, la pestaña abierta, el lenguaje y los estilos de nombres del Generador de código, el tipo de delimitador y la vista de nombres están bloqueados de forma predeterminada, así que el archivo conserva los valores que tenían al bloquearse, y desplazar la vista, hacer zoom, cambiar de pestaña o cambiar la vista de nombres nunca lo modifica. El archivo se escribe en un orden fijo, con una línea por cada fila de los diccionarios, y omite los anchos medidos, el orden de apilamiento, los puntos de anclaje de los conectores, los elementos eliminados, el texto vacío de un elemento y las listas y colecciones de un tipo del que el diagrama no tiene ninguno, de modo que abrir un diagrama y cerrarlo sin editarlo deja el archivo como estaba.
• Deja que un agente de programación como Claude Code o Codex edite el diagrama a través del servidor MCP: en vivo en VS Code, Obsidian o un IDE de JetBrains, donde cada cambio aparece en el lienzo en el momento en que se produce, o en el propio archivo. También puede establecer nombres lógicos y dominios de columnas, editar los diccionarios, volver a derivar los nombres físicos y enumerar lo que detecta la hoja Checks.
• Edita con otras personas en tiempo real en la aplicación web (experimental). Las sesiones son entre pares y con cifrado de extremo a extremo, así que ningún servidor guarda tu esquema, y los pares ven los cursores, el foco y las selecciones de los demás. En tu propia página, getSharedStore() te ofrece el mismo flujo de acciones sobre el transporte que elijas, y @dineug/erd-editor-yjs mantiene el diagrama al día a través de un documento de Yjs y de cualquier proveedor que lo transporte, con las ediciones sin conexión y la presencia incluidas.

Empieza por la Guía de edición.

El porqué de este proyecto

Las herramientas de modelado existentes no ofrecían el nivel de experiencia de usuario que yo deseaba.
Por eso inicié este proyecto, para ofrecer la experiencia de usuario definitiva.
La máxima prioridad del proyecto es la experiencia de edición del usuario.
Te ofrecerá una experiencia de edición asombrosa.