Visualiseur de diagrammes ER Mermaid
Collez le code Mermaid erDiagram et prévisualisez votre schéma de base de données instantanément. Exportez en SVG ou PNG. Outil de diagramme ER gratuit, uniquement dans le navigateur.
Entrez du code Mermaid pour prévisualiser votre diagramme
Les diagrammes Entité-Relation (ER) sont la notation standard pour visualiser les schémas de bases de données relationnelles. Ils montrent les entités (tables), leurs attributs (colonnes) et les relations entre elles — un-à-un, un-à-plusieurs, plusieurs-à-plusieurs. La syntaxe `erDiagram` de Mermaid intègre la création de diagrammes ER dans le monde du texte-comme-code, facilitant la documentation des schémas de bases de données dans les README, les ADR (Architecture Decision Records) et les descriptions de pull requests. Lorsque les ingénieurs de bases de données ou les développeurs backend demandent à des assistants IA de concevoir un schéma — 'Créez une base de données pour une plateforme e-commerce avec des utilisateurs, des produits et des commandes' — la réponse inclut souvent un diagramme ER Mermaid. Coller ce code dans Zolkit vous permet de valider immédiatement que les relations et les cardinalités reflètent les règles métier prévues. Le visualiseur de diagrammes ER de Zolkit prend entièrement en charge la syntaxe `erDiagram` de Mermaid, y compris les définitions d'entités avec des attributs typés, les annotations de clés primaires et étrangères, les lignes de relation avec la notation 'patte de corbeau' (crow's foot), et les étiquettes de relation en ligne. Il est utilisé par les développeurs backend, les architectes de bases de données et les rédacteurs techniques pour documenter les schémas sans quitter le navigateur.
Visualiseur et Exportateur Gratuit de Diagrammes Mermaid en Ligne
Le Visualiseur de Diagrammes Mermaid de Zolkit vous permet de coller n'importe quel code Mermaid et de voir un diagramme rendu instantanément — aucune installation, aucune inscription, aucun téléversement sur serveur. Tout s'exécute dans votre navigateur, ce qui en fait le moyen le plus rapide de vérifier les diagrammes générés par IA depuis Claude, ChatGPT ou Gemini. Prend en charge tous les principaux types de diagrammes Mermaid : organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, diagrammes d'états, cartes mentales, graphes Git, diagrammes circulaires et chronologies.
Aperçu Instantané en Direct
Les diagrammes sont rendus automatiquement pendant que vous tapez, avec un délai de 300 ms pour qu'il ne soit jamais lent.
100% Privé
Tout le rendu se fait dans votre navigateur à l'aide de mermaid.js. Votre code n'est jamais envoyé à aucun serveur.
Exporter SVG & PNG
Téléchargez votre diagramme en tant que SVG vectoriel net ou PNG 2× haute résolution prêt pour vos documents et présentations.
Tous les Types de Diagrammes Mermaid
Prend en charge les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, cartes mentales, graphes Git, et plus encore.
Prêt pour les Diagrammes IA
Conçu pour l'ère de l'IA — prévisualisez directement les diagrammes générés par Claude, ChatGPT, Gemini, ou tout LLM.
Toujours Gratuit
Aucun compte requis, aucune limite d'utilisation, aucun filigrane. Le visualiseur Mermaid de Zolkit est entièrement gratuit pour toujours.
Comment Prévisualiser un Diagramme Mermaid
- 1
Collez votre code Mermaid dans l'éditeur à gauche — vous pouvez le copier depuis un assistant IA ou l'écrire manuellement.
- 2
Le diagramme est rendu instantanément dans le panneau d'aperçu à droite. S'il y a une erreur de syntaxe, un message explique le problème.
- 3
Cliquez sur 'Exporter SVG' ou 'Exporter PNG' pour télécharger votre diagramme sous forme de fichier prêt pour la documentation, les présentations ou le partage.
Questions Fréquemment Posées
Quels symboles de cardinalité Mermaid utilise-t-il pour les diagrammes ER ?
Mermaid utilise la notation 'patte de corbeau' : `||--||` pour un-à-un exact, `||--o{` pour un-à-zéro-ou-plusieurs, `}o--o{` pour zéro-ou-plusieurs-à-zéro-ou-plusieurs, et `||--|{` pour un-à-un-ou-plusieurs. Ceux-ci sont rendus sous forme de symboles standard de patte de corbeau sur les lignes de relation, rendant la cardinalité immédiatement lisible.
Comment marquer les clés primaires et étrangères dans les diagrammes ER Mermaid ?
Ajoutez `PK` ou `FK` après le type de colonne dans la définition de l'entité : `int id PK` pour une clé primaire, `int userId FK` pour une clé étrangère. Vous pouvez également ajouter `UK` pour les clés uniques. Ces annotations apparaissent comme des étiquettes à l'intérieur de la boîte de l'entité et sont essentielles pour communiquer la structure relationnelle du schéma.
Puis-je documenter une relation plusieurs-à-plusieurs dans les diagrammes ER Mermaid ?
Oui. Représentez directement les relations plusieurs-à-plusieurs avec `}o--o{` ou via une entité de jonction. L'utilisation d'une entité de jonction (comme ORDER_ITEM entre ORDER et PRODUCT) est généralement une meilleure pratique car elle modélise plus précisément la conception réelle du schéma et vous permet d'ajouter des attributs à la relation elle-même, tels que la quantité ou le prix.
Quelle est la meilleure façon d'utiliser les diagrammes ER Mermaid dans un projet ?
Ajoutez le diagramme ER sous forme de bloc de code Mermaid dans le README de votre projet ou dans un fichier `SCHEMA.md` dédié. GitHub, GitLab et Notion rendent tous Mermaid nativement, de sorte que le diagramme reste à jour avec le code. Mettez à jour le diagramme chaque fois que vous exécutez une migration — traitez-le comme une documentation vivante plutôt qu'un artefact unique.