Introduction

erd-editor est un éditeur de diagrammes entité-relation. Il est disponible sous forme d’application web, d’application Google Drive, d’extension VS Code, de plugin IntelliJ, de plugin Obsidian et d’élément personnalisé <erd-editor> que vous pouvez intégrer à votre propre page, avec <erd-viewer> à ses côtés pour afficher un diagramme en lecture seule. Un site qui ne charge aucun script de son cru peut plutôt encadrer un diagramme en lecture seule depuis erd-editor.io/embed. C’est le même éditeur et le même format de document sur toutes ces plateformes.

Où l’obtenir

Plateforme	Installation	Ce que vous obtenez
Application web	erd-editor.io	PWA installable, fonctionne hors connexion, collaboration en temps réel
Google Drive	Google Workspace Marketplace	Ajoute ERD Editor aux menus Open with et New de Drive, et enregistre dans le même fichier
VS Code	Marketplace	Ouvre les fichiers .erd.json dans un éditeur personnalisé
IntelliJ	JetBrains Marketplace	Le même éditeur, pour les IDE basés sur IntelliJ
Obsidian	Community plugins	Ouvre les fichiers .erd et .erd.json dans un onglet du coffre, sur ordinateur uniquement
Votre page	npm install @dineug/erd-editor	L’élément personnalisé <erd-editor>, indépendant de tout framework, et <erd-viewer>, qui affiche un diagramme en lecture seule (voir Installation et ErdViewerElement)
Tout site	erd-editor.io/embed	Un diagramme en lecture seule dans une iframe, à partir de l’URL d’un document, sans aucun code (voir Intégration)
Agents de codage	@dineug/erd-editor-mcp	Un serveur MCP qui permet à Claude Code, à Codex ou à un autre client de modifier un diagramme en direct dans VS Code, un IDE JetBrains ou Obsidian, ou dans le fichier lui-même

Pour l’essayer dans un IDE, créez un fichier vide portant l’extension .erd.json et ouvrez-le. Dans Obsidian, exécutez ERD Editor: Create new diagram depuis la palette de commandes, ou choisissez New ERD dans le menu contextuel d’un dossier de l’explorateur de fichiers. L’une comme l’autre crée un fichier .erd vide et l’ouvre. Dans Google Drive, choisissez New → More → ERD Editor, puis connectez-vous avec Google. ERD Editor n’accède qu’aux fichiers que vous créez ou ouvrez avec lui. Dans l’application web, Google Drive, VS Code, un IDE JetBrains et Obsidian, un nouveau diagramme vide s’ouvre sur l’écran d’accueil, un menu de premières étapes : New Table, New Memo, Import, Command Palette et Shortcuts. Le défilement, le zoom, le changement d’onglet et le changement de vue dans l’affichage des noms laissent tel quel le fichier vide d’un nouveau diagramme, car tous les verrous sont activés dans un nouveau diagramme. Voir Verrouillage. VS Code ouvre un fichier ERD sous forme de texte JSON dans Source Control, Local History, Compare with Saved, les revues de modifications du chat de VS Code et des agents de codage comme GitHub Copilot et Claude Code, et les vues de révision d’extensions comme GitLens, GitHub Pull Requests et Git Graph, si bien qu’une modification se compare ligne par ligne. Reopen Editor With... affiche une révision Git sous forme de diagramme en lecture seule.

Après avoir mis à jour le plugin Obsidian, redémarrez Obsidian : jusque-là, la fenêtre conserve l’éditeur qu’avait chargé la version précédente. Mettez à jour ERD Editor et @dineug/erd-editor-mcp partout où vous partagez des diagrammes. Une version antérieure à l’onglet Dictionnaire, ou une version antérieure du serveur MCP qui modifie un fichier sur le disque, enregistre le diagramme sans ses noms logiques, ses liens de domaine et ses dictionnaires. Une version antérieure aux groupes de tables n’affiche en outre aucune icône de clé primaire dans un fichier enregistré par la version actuelle, et enregistrer le fichier avec cette version supprime ses groupes de tables et ses scripts de Schéma SQL. Un fichier enregistré par une version antérieure est réécrit sous la forme actuelle au premier changement que le fichier conserve (voir Verrouillage). Cet enregistrement supprime aussi les textes, listes et collections vides qu’écrivait la version antérieure, si bien qu’il modifie davantage le fichier que la modification elle-même. Jusque-là, un éditeur JSON qui valide par rapport à son $schema un fichier issu d’une version antérieure aux groupes de tables le signale comme non valide.

Fonctionnalités

• Tracez des tables, des colonnes et des mémos sur un canevas illimité, et reliez-les avec quatre types de relation : Zero One, Zero N, One Only, One N. Voir Commencer l’édition. Les index se définissent dans le panneau des propriétés de la table. Un index unique portant sur deux colonnes ou plus est une clé alternative, et lorsque l’option d’affichage Alternate Key est activée, le diagramme marque ses colonnes AK1.1, AK1.2 et ainsi de suite. Voir Index et Clés alternatives.
• Terminez une relation sur des colonnes qu’une table possède déjà : pendant que vous en tracez une avec une souris ou un stylet, Map to existing columns, à côté de la table où elle aboutit, associe la clé de la table parente aux colonnes de cette table, et Create new columns en ajoute de nouvelles. Map Columns, dans le menu contextuel d’une relation, modifie ses colonnes par la suite. Voir Associer les colonnes. Une relation peut aussi porter des actions ON DELETE et ON UPDATE. Voir ON DELETE et ON UPDATE.
• Modifiez rapidement : Alt + N ajoute une table ; Alt + Enter ajoute une colonne ; Alt + K active ou désactive la clé primaire sur la colonne qui a le focus, ou sur chaque colonne sélectionnée lorsque celle-ci en fait partie ; et Delete ou Backspace supprime la sélection. Chacune de ces actions constitue une seule étape d’annulation. Voir Raccourcis. La barre d’outils du canevas, en bas du canevas, ajoute elle aussi une table ou un mémo en un clic.
• Colorez une table, un mémo ou un groupe de tables à l’aide d’un sélecteur proposant des couleurs prédéfinies et les couleurs que le diagramme utilise déjà, et retirez une couleur avec No color ou Remove color. Voir Couleur des tables et des mémos.
• Rassemblez des tables liées dans des groupes de tables : un cadre placé derrière elles, que vous pouvez nommer et colorer. Tracez-en un avec Alt + G ou avec New Table Group depuis le menu contextuel du canevas, la barre d’outils du canevas ou la recherche rapide, ou créez-en un à partir des tables sélectionnées avec T puis G ou avec Group selected tables dans leur menu contextuel. Une table rejoint un groupe lorsque vous la déposez à l’intérieur et le quitte lorsque vous la déposez à l’extérieur, et faire glisser un groupe par sa barre de titre déplace ses tables avec lui. Le DBML prend en charge les groupes dans les deux sens, sous forme de blocs TableGroup.
• Donnez aux tables et aux colonnes des noms logiques, les noms que lisent les gens, comme Customer Name pour CUST_NM, à côté des noms physiques qu’écrivent le Schéma SQL et le générateur de code. L’affichage des noms (Physical Names, Logical Names ou Both Names) détermine lesquels le canevas dessine, et la plupart des autres endroits qui nomment une table ou une colonne, comme les lignes de table et de colonne de l’explorateur, le mode Flux et une image exportée, le suivent. Choisissez-le depuis le bouton Name View de la barre d’outils du canevas, le menu contextuel du canevas, la barre d’outils de la visualisation en mode Flow ou la recherche rapide.
• Conservez la norme de nommage du diagramme dans l’onglet Dictionnaire. Ses feuilles Domains, Words et Terms se recherchent, se trient et se modifient comme un tableur, chacune avec son propre historique d’annulation. Les feuilles importent et exportent des fichiers CSV : une importation lit la structure propre à l’éditeur ou celle de la norme coréenne des données publiques, en UTF-8 ou en EUC-KR, et une exportation écrit la structure propre à l’éditeur. La cellule du nom logique complète les noms des termes. Un nom logique donne à sa table ou à sa colonne un nom physique tiré du terme correspondant, ou des abréviations des mots en lesquels il se découpe, jusqu’à ce que vous écriviez le nom vous-même. Après la modification d’un mot ou d’un terme, Derive Physical Names Again dérive à nouveau les noms, y compris ceux que vous avez écrits vous-même. Une colonne liée à un domaine, à la main ou par son terme, prend le type de données du domaine et suit ses modifications, et l’option d’affichage Domain affiche le domaine de chaque colonne. La feuille Checks liste les mots interdits, non enregistrés et synonymes, les noms en double, les domaines inconnus, les noms physiques qui diffèrent de celui de leur terme et les types de colonne qui diffèrent de celui de leur domaine. Le canevas colore les noms logiques et physiques que signalent les vérifications des mots et des termes.
• Importez un schéma existant depuis json, Schema SQL, GraphQL, DBML ou AML. Voir Importer ou exporter des fichiers. Un fichier Schéma SQL, GraphQL, DBML ou AML arrive avec ses tables disposées le long de leurs relations, ou en lignes lorsqu’il n’en a aucune. Import and Add ajoute un fichier sous le diagramme au lieu de le remplacer.
• Exportez le diagramme en json ; en Schéma SQL depuis l’onglet Schéma SQL, enregistré dans un fichier .sql ou copié ; ou depuis la boîte de dialogue Export image, sous forme d’image PNG ou SVG, ou d’image PNG dans le Presse-papiers.
• Affichez un diagramme en lecture seule sur un autre site : encadrez erd-editor.io/embed avec l’URL d’un fichier, y compris un fichier sur GitHub, ou chargez l’élément <erd-viewer> dans votre propre page. Un lecteur déplace la vue, zoome, recherche et éclaire des relations, et rien ne modifie le diagramme.
• Générez le Schéma SQL dans la syntaxe de huit SGBD : Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake et SQLite. Voir Fonctions liées aux tables. Le panneau des options de l’onglet Schéma SQL permet de choisir les instructions, l’en-tête et les groupes de tables à écrire, peut écrire les noms logiques dans les commentaires vides, et conserve votre propre SQL, enregistré dans le diagramme, à écrire avant et après les tables.
• Générez du code pour vingt-deux cibles : les langages C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift et TypeScript ; les ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy et TypeORM ; ainsi qu’AML, DBML, GraphQL, JSON Schema, Mermaid et Zod. Le panneau des options de l’onglet Générateur de code permet de choisir le langage, la base de données et les casses des noms, et le code est enregistré dans un fichier portant l’extension du langage, ou copié. Voir Générateur de code.
• Consultez le schéma dans la visualisation, sous forme de Graph dirigé par les forces ou de Flow de cartes de tables disposées le long de leurs relations, où le survol d’une table met en surbrillance tout ce à quoi elle est reliée. Appuyez sur Alt + F dans l’onglet ERD pour vous concentrer sur les tables sélectionnées et sur les tables qui leur sont liées. En mode Flow, Previous table et Next table reviennent en arrière et avancent parmi ce à quoi le mode Flux a été restreint, comme le font là les touches d’annulation et de rétablissement.
• Travaillez sur un canevas sans bords : déplacez la vue partout où va le diagramme, zoomez de 10% à 150% avec Ctrl + Wheel (⌘ + Wheel sur Mac), le clavier ou un pincement, et masquez tout sauf le diagramme avec le mode zen. Un glissement avec le bouton central de la souris déplace la vue depuis n’importe quel point du canevas, même au-dessus d’une table. Voir Se déplacer sur le canevas.
• Réorganisez tout un diagramme en une seule étape avec la disposition automatique : une simulation de forces, un flux de gauche à droite ou un arbre dans l’un ou l’autre sens, en gardant chaque groupe de tables d’un seul tenant.
• Exécutez une commande depuis n’importe où avec la recherche rapide, ou commencez la recherche par #, @ ou : pour aller directement à une table, à une colonne, ou à un commentaire ou un mémo ; # et @ correspondent aussi aux noms logiques. Parcourez l’historique des modifications étape par étape avec Annuler et rétablir, rejouez sur le canevas l’historique de cette session avec le voyage dans le temps, ou comparez le diagramme avec un autre fichier .json dans la visionneuse de différences. Son arborescence, à côté des deux versions, liste les tables, colonnes, index, clés étrangères, mémos et groupes de tables qui ont été ajoutés, modifiés, supprimés ou renommés.
• Parcourez le diagramme dans l’explorateur, une arborescence ancrée à gauche du canevas : les tables, chacune avec ses colonnes, ses index et ses clés étrangères, puis les groupes de tables et les mémos. Cliquez sur une ligne pour aller à ce qu’elle représente sur le canevas ; une ligne de clé étrangère met aussi sa relation en surbrillance. Le bouton Explorer de la barre d’outils, à côté de Search, l’ouvre et le ferme.
• Recherchez du texte avec Rechercher et remplacer, en haut de l’explorateur. La recherche porte sur les noms des tables, des colonnes, des index et des groupes de tables, sur les noms logiques des tables et des colonnes et, une fois que vous les activez, sur les commentaires et les mémos, et affiche les correspondances dans l’arborescence de l’explorateur. Remplacez une correspondance ou toutes à la fois ; Preserve Case donne à chaque remplacement la casse du texte qu’il remplace. Ctrl + F (⌘ + F sur Mac) ouvre l’explorateur avec le point d’insertion dans le champ Rechercher, et un nouvel appui ferme l’explorateur.
• Utilisez l’éditeur dans 25 langues, à choisir depuis le bouton Display Language de la barre d’outils ou depuis la recherche rapide. System suit la langue du navigateur ou de l’application hôte, et l’arabe, l’hébreu et le persan disposent l’éditeur de droite à gauche tandis que le diagramme reste de gauche à droite. Seul le texte propre à l’éditeur change : les noms, le SQL et le code généré restent tels qu’ils ont été écrits. Le configurateur de thème de la barre d’outils permet de choisir l’apparence (System, Light ou Dark), une nuance de gris et une couleur d’accentuation. Voir Langue et thème.
• Gardez des diffs propres : la position de défilement et le zoom, l’onglet ouvert, le langage et les casses des noms du générateur de code, le type de délimiteur ainsi que l’affichage des noms sont verrouillés par défaut, si bien que le fichier conserve les valeurs qu’ils avaient au moment du verrouillage, et que faire défiler, zoomer, changer d’onglet ou changer de vue dans l’affichage des noms ne le modifie jamais. Le fichier est écrit dans un ordre fixe, avec une ligne de texte par ligne de dictionnaire, et omet les largeurs mesurées, l’ordre d’empilement, les points d’ancrage des connecteurs, les éléments supprimés, le texte vide d’un élément, ainsi que les listes et collections d’un type dont le diagramme ne contient aucun élément, de sorte qu’ouvrir un diagramme puis le fermer sans modification laisse le fichier tel qu’il était.
• Laissez un agent de codage comme Claude Code ou Codex modifier le diagramme via le serveur MCP : en direct dans VS Code, Obsidian ou un IDE JetBrains, où chaque modification apparaît sur le canevas au moment où elle se produit, ou dans le fichier lui-même. Il peut aussi définir les noms logiques et les domaines des colonnes, modifier les dictionnaires, dériver à nouveau les noms physiques et lister ce que trouve la feuille Checks.
• Modifiez à plusieurs en temps réel dans l’application web (expérimental). Les sessions sont pair à pair et chiffrées de bout en bout, si bien qu’aucun serveur ne détient votre schéma, et les pairs voient les curseurs, le focus et les sélections les uns des autres. Dans votre propre page, getSharedStore() vous donne le même flux d’actions sur le transport de votre choix, et @dineug/erd-editor-yjs maintient le diagramme synchronisé par l’intermédiaire d’un document Yjs et de n’importe quel fournisseur qui le transporte, modifications hors ligne et présence comprises.

Commencez par le guide d’édition.

Pourquoi ce projet

Les outils de modélisation existants n’offraient pas le niveau d’expérience utilisateur que je souhaitais.
J’ai donc lancé ce projet pour proposer l’expérience utilisateur ultime.
La priorité absolue du projet est l’expérience d’édition de l’utilisateur.
Il vous offrira une expérience d’édition étonnante.