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. 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 (voir Installation)
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 et le changement d’onglet 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 partout où vous partagez des diagrammes : une version antérieure aux groupes de tables n’affiche 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 telle version est réécrit sous la forme actuelle au premier changement que le fichier conserve (voir Verrouillage). Jusque-là, un éditeur JSON qui le valide par rapport à son $schema 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.
• 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.
• 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, 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.
• 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. 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, ainsi que sur les commentaires et les mémos une fois que vous les activez, 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, ainsi que le type de délimiteur 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 ou changer d’onglet ne le modifie jamais. Le fichier est écrit dans un ordre fixe et omet les largeurs mesurées, l’ordre d’empilement, les points d’ancrage des connecteurs et les éléments supprimés, 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.
• 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.

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.