Éditeur Mermaid
En attente de saisie
Qu'est-ce que l'éditeur de diagrammes Mermaid ?
Mermaid est un outil de création de diagrammes basé sur JavaScript qui utilise une syntaxe textuelle similaire à Markdown pour générer divers diagrammes. Pas besoin de glisser-déposer manuellement des formes, il suffit d'écrire une simple description textuelle pour générer automatiquement des diagrammes de flux, des diagrammes de séquence, des diagrammes de classes, etc. Cet outil propose un environnement d'édition Mermaid en ligne avec prévisualisation en temps réel, zoom par glisser-déposer et fonctionnalités d'exportation pour aider les développeurs à créer et partager rapidement des diagrammes. Pour des données ou bases de code en production, le résultat doit encore être contrôlé par un parseur, des tests ou les règles du projet.
Comment utiliser
Comment utiliser
- Saisissez la syntaxe Mermaid dans l'éditeur de gauche
- Le panneau de droite affiche le diagramme en temps réel
- Utilisez la souris pour glisser et la molette pour zoomer
- Cliquez sur les boutons d'exportation pour enregistrer en PNG ou SVG
Vérifications du diagramme
- Effectuez le rendu après chaque modification importante ; les erreurs Mermaid viennent souvent d'une mauvaise indentation, d'une ponctuation non échappée ou d'une syntaxe non prise en charge pour le type de diagramme choisi.
- Avant l'exportation, vérifiez que les étiquettes, les flèches et les sauts de ligne restent lisibles à la taille d'utilisation du diagramme.
Cas d’utilisation
Principe technique
Mermaid est une bibliothèque open source de rendu de diagrammes lancée par Knut Sveidqvist en 2014. Son principe fondamental consiste à prendre un DSL (langage spécifique à un domaine) lisible par l'humain et, via un parseur, le transformer en graphique SVG. Le pipeline complet comporte trois étapes : un analyseur lexical/syntaxique (généré par jison) parse la source en une structure de données interne ; un algorithme de disposition spécifique au type de diagramme calcule les coordonnées des nœuds et des arêtes ; enfin, d3 rend la disposition sous forme d'éléments SVG. Les différents diagrammes utilisent différents moteurs de disposition : flowchart utilise par défaut dagre (une disposition de graphes dirigés par niveaux), et depuis la v10 supporte également ELK (plus puissant mais plus lourd) ; sequenceDiagram utilise une disposition temporelle personnalisée qui place les participants horizontalement et empile les messages verticalement ; gantt dispose les tâches manuellement sur un axe temporel avec dépendances ; classDiagram et stateDiagram s'appuient aussi sur dagre. L'algorithme de disposition détermine la lisibilité — dagre suit le cadre Sugiyama pour affecter les rangs, minimiser les croisements d'arêtes et resserrer l'espacement, ce qui fonctionne bien pour les diagrammes de flux de taille courante. Comparé à Graphviz, la syntaxe de Mermaid est plus proche du langage naturel (par ex. A → B) et rend nativement dans le navigateur avec prévisualisation en direct. Le langage DOT de Graphviz est de plus bas niveau, et ses moteurs de disposition (fdp, neato, ...) sont plus matures, mais il nécessite une installation locale et son style par défaut paraît daté. Mermaid supporte actuellement plus de 15 types de diagrammes — flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, etc. — couvrant la grande majorité des besoins en schémas d'ingénierie logicielle.
- Analyse syntaxique : un parseur généré par jison transforme le texte DSL en un AST interne ; chaque type de diagramme possède son propre fichier de grammaire.
- Algorithme de disposition : flowchart utilise dagre pour la disposition en niveaux de graphes dirigés et peut basculer sur ELK ; les diagrammes de séquence et de Gantt utilisent leur propre logique de disposition dédiée.
- Moteur de rendu : le SVG est dessiné avec d3 ; les nœuds utilisent les éléments g/rect/path/text, et les flèches sont définies par des marqueurs.
- Types de diagrammes : supporte flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap et une dizaine d'autres.
- Comparaison avec Graphviz : Mermaid a une syntaxe plus conviviale et un support web natif ; Graphviz a une disposition plus fine, adaptée aux graphes grands et complexes.
- Thèmes : basculez entre les thèmes intégrés default, dark, forest, neutral et autres via la configuration themeVariables ou la directive init.
Exemples
Organigramme
flowchart TD
A[Début] --> B{Connecté ?}
B -- Oui --> C[Page d'accueil]
B -- Non --> D[Page de connexion]
D --> E[Saisir les identifiants]
E --> C
C --> F[Fin]Diagramme de séquence
sequenceDiagram
participant Navigateur
participant Serveur
participant BaseDeDonnees
Navigateur->>Serveur: GET /api/user
Serveur->>BaseDeDonnees: SELECT * FROM users
BaseDeDonnees-->>Serveur: Données utilisateur
Serveur-->>Navigateur: Réponse JSONDiagramme de Gantt
gantt
title Plan de projet
dateFormat YYYY-MM-DD
section Conception
Exigences :a1, 2026-06-01, 7d
Design UI :a2, after a1, 10d
section Développement
Frontend :b1, after a2, 20d
Backend :b2, after a2, 18d
section Tests
Intégration :c1, after b1, 7dFAQ
Quels types de diagrammes Mermaid prend-il en charge ?
Mermaid couvre les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes d'état, diagrammes entité-relation, diagrammes de Gantt, diagrammes en camembert, parcours utilisateur, graphes Git, mind maps et graphiques en quadrants. La première ligne de votre code déclare le type (par exemple « flowchart TD » ou « sequenceDiagram »).
Pourquoi mon diagramme affiche-t-il une erreur de syntaxe ?
Les causes les plus fréquentes sont des points-virgules ou opérateurs de flèche manquants, des crochets non appariés dans les libellés de nœuds (utilisez des guillemets autour du texte avec caractères spéciaux : A["Hello (world)"]), une syntaxe de flèche incorrecte pour le type de diagramme (--> pour flowchart, ->> pour sequence) et des problèmes d'indentation dans les sous-graphes. Le panneau d'erreur indique généralement la ligne où l'analyse s'est arrêtée.
Comment exporter le diagramme en image ?
Utilisez les boutons d'export pour enregistrer en SVG (vectoriel, redimensionnable, recommandé pour diapositives et documents) ou en PNG (matriciel, prêt pour le chat et l'e-mail). Copiez le balisage SVG si vous voulez l'intégrer directement en HTML ou le retoucher dans Figma ou Illustrator.
Puis-je personnaliser couleurs et styles ?
Oui. Utilisez « classDef » pour définir un style à la manière CSS et appliquez-le avec « class A,B,C myStyle ». Les surcharges en ligne comme « style A fill:#f9f,stroke:#333 » fonctionnent pour des modifications ponctuelles. Pour un thème global, placez %%{init: {'theme':'forest'}}%% sur la première ligne — les thèmes intégrés sont default, forest, dark, neutral et base.
Y a-t-il des limites de longueur ou de complexité ?
Mermaid rend sans problème jusqu'à plusieurs centaines de nœuds, mais le temps de mise en page croît de manière non linéaire au-delà. Si un diagramme est lent ou illisible, divisez-le en plusieurs diagrammes liés ou utilisez des sous-graphes pour regrouper les nœuds connexes ; la mise en page automatique choisit de moins bonnes positions quand trop d'arêtes se croisent.
Comment ajouter des hyperliens ou des gestionnaires de clic aux nœuds ?
Utilisez « click NodeId "https://example.com" » pour transformer un nœud en lien, ou « click NodeId callback "tooltip" » pour déclencher un callback JavaScript enregistré via mermaid.parseError. Les liens fonctionnent dans le SVG exporté tant que la page d'intégration ne les supprime pas.
Où d'autre puis-je rendre le même code Mermaid ?
GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code (avec extensions) et la plupart des outils de documentation modernes rendent les blocs de code Mermaid nativement. Collez le même code et il sera rendu avec le thème choisi par chaque plateforme.