Comment créer un diagramme ER avec Mermaid

Apprenez à créer des diagrammes ER en utilisant la syntaxe simple de Mermaid. Découvrez des exemples pratiques et des conseils pour visualiser votre base de données efficacement.

banner
robot TL;DR:

Mermaid génère des diagrammes d'entité-relation (ER) via une syntaxe textuelle de type Markdown, bien que des alternatives par glisser-déposer comme EdrawMax soient préférables pour les schémas complexes nécessitant une personnalisation poussée.
    ● La syntaxe exige le mot-clé erDiagram pour structurer les entités, les types de données et les relations (comme ||--o{ pour un-à-plusieurs) afin d'obtenir un rendu instantané sur Mermaid Live Editor, Notion ou VS Code, une rédaction qui peut être contournée en utilisant des IA comme ChatGPT ou Claude.
    ● Cette méthode textuelle présente des lacunes face aux bases de données contenant des dizaines de tables ou des relations imbriquées, et limite les modifications visuelles à des directives de thème basiques intégrées au code.
    ● EdrawMax s'impose comme la solution de remplacement pour les utilisateurs sans compétences techniques et les équipes, offrant une création par modèles, une modification des couleurs équivalente à PowerPoint et une synchronisation cloud pour l'édition simultanée.


Demandez un résumé à l'IA

Savez-vous comment dessiner des diagrammes ER en utilisant Mermaid ? Mermaid est un outil qui vous permet de dessiner divers diagrammes en utilisant une notation simple similaire à Markdown. En particulier, en créant des diagrammes ER (diagrammes entité-relation) avec Mermaid, vous pouvez facilement visualiser des structures de bases de données complexes, mais vous devez comprendre comment les écrire. Dans cet article, nous expliquerons comment dessiner des diagrammes ER en utilisant Mermaid.

Dans cet article
  1. Structure du diagramme ER
  2. Comment créer un diagramme ER en utilisant la notation Mermaid
  3. Exemple de dessin d'un diagramme ER en utilisant Mermaid
  4. Créer un diagramme ER avec un modèle

Structure du diagramme ER

Les diagrammes ER jouent un rôle très important dans la conception de bases de données. Les éléments de base d'un diagramme ER sont les entités (tables), les relations entre entités et les attributs (colonnes) de chaque entité. Les entités représentent des objets importants dans la base de données ; chacune a ses propriétés (colonnes). Les relations entre entités montrent les connexions entre les tables et sont généralement représentées par des lignes.

ER Diagram-mermaid-1

La façon d'écrire un diagramme ER dans Mermaid consiste à commencer par exprimer cette structure de base telle quelle. Mermaid vous permet de décrire les entités, les attributs et les relations en utilisant une syntaxe spécifique. Plus précisément, vous pouvez facilement exprimer une table utilisateur, une table produit et les relations entre elles dans Mermaid.

Par exemple, vous pouvez utiliser la syntaxe Mermaid pour définir des entités appelées "Utilisateur" et "Commande" et décrire les attributs de chaque entité. Ensuite, vous pouvez tracer une ligne pour montrer que les utilisateurs gèrent leurs commandes. Cela facilite la compréhension visuelle des composants de votre base de données et de leurs relations.

Comment créer un diagramme ER en utilisant la notation Mermaid

Dans cette section, nous vous guiderons dans la création d'un diagramme ER (Entité-Relation) en utilisant la notation Mermaid. Nous utiliserons le Mermaid Live Editor, un outil en ligne où vous pouvez écrire du code Mermaid et voir le diagramme instantanément. La syntaxe est la même dans des outils comme Notion et VS Code, ce qui rend ce guide utile pour les utilisateurs de ces plateformes également.

Commencer avec Mermaid Live Editor

Commencez par ouvrir le Mermaid Live Editor dans votre navigateur.

ER Diagram-mermaid-2

Le site inclut des exemples intégrés et des guides de syntaxe. Vous pouvez également trouver des modèles de diagrammes ER dans la section "Exemples de diagrammes" sur la gauche.

ER Diagram-mermaid-3

Syntaxe de base pour les diagrammes ER

Mermaid prend en charge les diagrammes ER avec le mot-clé erDiagram. Voici la structure de base :

erDiagram CUSTOMER ||--o{ ORDER : placesORDER ||--|{ LINE_ITEM : containsCUSTOMER }|..|{ DELIVERY_ADDRESS : uses

Explication de la syntaxe :

  • ||--o{ représente une relation un-à-plusieurs.
  • }|..|{ représente une relation plusieurs-à-plusieurs.
  • : introduit l'étiquette de relation.

Dans l'éditeur en direct, lorsque vous saisissez ce code, un diagramme visuel apparaît sur le panneau de droite en temps réel.

ER Diagram-mermaid-4

Définir les entités et les attributs

Les entités et leurs champs (attributs) peuvent être définis comme suit :

erDiagramCUSTOMER {string namestring emailint customer_id}ORDER {int order_iddate order_datefloat amount}

Détails de la syntaxe :

  • Chaque entité a un nom et un bloc de définitions de champs.
  • Les champs peuvent être des types de données tels que string, int, float ou date.
  • Vous pouvez ajouter autant d'attributs que nécessaire pour chaque entité afin de représenter correctement votre schéma de base de données.
ER Diagram-mermaid-5

Établir des relations entre les entités

Les relations entre entités sont décrites après que les entités sont définies. Par exemple :

erDiagramCUSTOMER ||--o{ ORDER : placesORDER ||--|{ LINE_ITEM : includesPRODUCT ||--o{ LINE_ITEM : listed_in

Cet exemple crée :

  • Une relation un-à-plusieurs de CUSTOMER à ORDER.
  • Une relation plusieurs-à-un de LINE_ITEM à PRODUCT.

Les étiquettes après les deux points (:) aident à clarifier la relation.

ER Diagram-mermaid-6

Stylisation et thèmes

Le style des diagrammes ER de Mermaid est basique. Vous pouvez toujours appliquer des thèmes avec la directive %%{init: ... }%%.

%%{init: {'theme': 'forest'}}%%erDiagramUSER ||--o{ LOGIN : uses

Cette ligne change l'apparence de l'ensemble du diagramme au thème "forest".

ER Diagram-mermaid-7

Générer des diagrammes ER en utilisant l'IA

Si vous êtes nouveau dans la syntaxe, vous pouvez toujours créer des diagrammes ER en utilisant un chatbot IA comme ChatGPT ou Claude.

Étape 1 : Demandez à l'IA votre schéma de base de données : "Créez un diagramme ER Mermaid avec des entités pour les utilisateurs, les produits et les commandes."

ER Diagram-mermaid-8

Étape 2 : Copiez le code qu'il génère.

Étape 3 : Collez-le dans le Mermaid Live Editor pour voir le diagramme.

ER Diagram-mermaid-9

Étape 4 : Modifiez le code dans l'éditeur ou demandez à l'IA des révisions.

L'utilisation de la notation Mermaid avec des outils comme le Mermaid Live Editor et le support de l'IA rend la création de diagrammes ER rapide, facile et accessible aux débutants.

Exemple de dessin d'un diagramme ER en utilisant Mermaid

Appliquons maintenant ce que nous avons appris jusqu'à présent et passons en revue un exemple pratique de création d'un diagramme ER en utilisant la notation Mermaid.

Identifier les entités et relations requises

Avant de plonger dans le code, il est utile de clarifier quelles informations vous souhaitez représenter dans le diagramme ER. Sur une feuille vierge ou un éditeur de texte, listez vos entités (tables), attributs (colonnes) et les relations entre elles.

ER Diagram-mermaid-10

Pour cet exemple, nous modéliserons un système de commerce électronique simple avec deux entités principales : USER et ORDER.

Écrire du code Mermaid basé sur le schéma

Une fois que vous avez esquissé la structure, convertissez l'information en syntaxe Mermaid. Commencez par le type de diagramme (erDiagram), suivi des définitions d'entités et de leurs attributs. Ensuite, définissez les relations.

erDiagram USER { int idstring namestring email }ORDER {int idint user_idstring productfloat price }USER ||--o{ ORDER: places 

Dans ce code Mermaid :

  • USER représente une table utilisateur avec trois champs : id, name et email.
  • ORDER représente une table de commande contenant un id, une clé étrangère user_id et des détails de commande tels que product et price.
  • La ligne USER ||--o{ ORDER : places définit une relation un-à-plusieurs, ce qui signifie qu'un utilisateur peut passer plusieurs commandes.

Cette syntaxe simple vous permet de définir clairement la structure et la logique de votre base de données.

Étape1Coller le code dans l'éditeur Mermaid

Ensuite, ouvrez le Mermaid Live Editor dans votre navigateur et collez le code dans le panneau de gauche. Le diagramme ER sera automatiquement rendu sur le côté droit.

ER Diagram-mermaid-11
Étape2Réviser et affiner votre diagramme

Vérifiez le diagramme visuellement. Si quelque chose semble incorrect ou si vous souhaitez ajuster le nommage, les relations ou le formatage, modifiez simplement le code et voyez les résultats se mettre à jour en temps réel.

Ce retour immédiat facilite les ajustements et les expérimentations avec la mise en page et la structure de votre diagramme.

Étape3Enregistrer ou exporter votre diagramme

Une fois que vous êtes satisfait du diagramme, vous pouvez le télécharger en tant qu'image ou copier le code à des fins de documentation. Ceci est utile pour inclure des conceptions de bases de données dans vos rapports de projet, présentations ou dépôts de code.

Mermaid est suffisant pour des diagrammes ER simples, mais il présente encore certaines lacunes, telles que les suivantes :

  • Courbe d'apprentissage : Comprendre et mémoriser la syntaxe demande un peu de pratique.
  • Gestion de la complexité : Il n'est pas bien adapté aux schémas très complexes avec des dizaines de tables et des relations imbriquées.
  • Personnalisation : Mermaid offre seulement des options de style et de formatage limitées par rapport à des outils plus avancés.

Compte tenu de ces points, vous pouvez envisager d'autres outils en fonction de vos besoins. Nous présenterons quelques outils utiles ci-dessous.

Créer un diagramme ER avec un modèle

EdrawMax est un outil pratique qui vous permet de créer facilement des diagrammes ER. Contrairement à la méthode de création de diagrammes ER utilisant la notation Mermaid présentée dans la partie 3, EdrawMax vous permet de dessiner des diagrammes de manière intuitive avec des opérations de glisser-déposer. Les étapes sont les suivantes :

ER Diagram-Mermaid-12
Étape1Lancer EdrawMax

star icon Note G2 : 4,5/5 (Plus de 2360 réponses)
seguridad garantizada100% sûr | Sans annonces |ai Propulsé par l'IA

Tout d'abord, lancez EdrawMax et créez un nouveau projet. Ensuite, sélectionnez Diagramme de base de données dans la barre d'outils et choisissez le modèle de diagramme ER.

ER Diagram-mermaid-13
Étape2Modifier

Une fois le modèle ouvert, glissez-déposez les symboles d'entité et de relation de la bibliothèque à gauche sur la zone de travail.

ER Diagram-mermaid-14
Étape3Personnaliser

Pour personnaliser une entité, vous pouvez double-cliquer dessus pour ajouter des attributs et des clés primaires. Les relations peuvent également être créées en sélectionnant simplement une ligne et en définissant des attributs. De cette façon, EdrawMax rend la création de diagrammes ER très fluide et efficace.

Avantages de l'utilisation d'EdrawMax

EdrawMax présente de nombreux avantages. Tout d'abord, il est intuitif et facile à utiliser. Vous pouvez facilement créer des diagrammes ER et d'autres diagrammes avec de simples opérations de glisser-déposer. Il est particulièrement intéressant que même les personnes sans compétences techniques puissent l'utiliser immédiatement.

De plus, la vaste bibliothèque de modèles et de symboles vous permet de créer une grande variété de diagrammes en peu de temps, ce qui peut grandement améliorer l'efficacité de vos projets.

ER Diagram-mermaid-15

En outre, son intégration cloud robuste facilite la collaboration avec votre équipe. Les membres du projet peuvent modifier et mettre à jour les diagrammes en temps réel, facilitant une communication fluide.

Enfin, le haut niveau de personnalisation est également un avantage majeur. Vous pouvez changer les couleurs et les lignes du diagramme ER de manière similaire à PowerPoint, au lieu d'utiliser du code, afin de créer un diagramme ER plus propre. Veuillez essayer de télécharger la version gratuite à partir du bouton ci-dessous !

Résumé

J'ai présenté comment écrire des diagrammes ER en utilisant la syntaxe Mermaid. En utilisant Mermaid, vous pouvez facilement créer des diagrammes ER complexes et des diagrammes de séquence d'une manière similaire à Markdown. Ceci est très utile pour la conception de bases de données et la conception de base. En particulier, cela facilite la visualisation des relations entre entités, ce qui vous aidera à communiquer plus efficacement avec les membres de l'équipe.

De plus, l'utilisation d'outils comme EdrawMax rend le processus encore plus efficace. Il vous permet de créer facilement des diagrammes ER par glisser-déposer, de sorte que même les débutants peuvent l'utiliser de manière intuitive, ce qui permet d'économiser du temps et de réduire les erreurs.

Daniel Belisario
Daniel Belisario Jun 03, 26
Partager les articles:
download EdrawMax EdrawMax online
main page