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. 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; consulta Instalació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 y cambiar de pestaña 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 en todos los lugares donde compartas diagramas: una versión anterior a la introducción de los grupos de tablas 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 de esas versiones se reescribe en el formato actual con el primer cambio que el archivo conserva; consulta Bloqueo. Hasta entonces, un editor JSON que lo valida con su $schema 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.
• 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.
• 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, 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.
• 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. 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, y en los comentarios y las notas una vez que los activas, 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 y el tipo de delimitador están bloqueados de forma predeterminada, así que el archivo conserva los valores que tenían al bloquearse, y desplazar la vista, hacer zoom o cambiar de pestaña nunca lo modifica. El archivo se escribe en un orden fijo y omite los anchos medidos, el orden de apilamiento, los puntos de anclaje de los conectores y los elementos eliminados, 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.
• 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.

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.