Avec Mermaid, quelques lignes de texte deviennent un diagramme. Markdown Preview Editor fait office d’éditeur Mermaid avec aperçu en direct : tapez le code du diagramme dans un document Markdown, et l’aperçu le dessine au fil de la frappe. Contrairement à un outil de diagrammes séparé, le diagramme vit avec le texte qui l’entoure : un document de conception, un README ou une fiche de cours tient dans un seul fichier.
Qu’est-ce qu’un diagramme Mermaid ?
Un diagramme Mermaid est un schéma décrit en texte brut. Pas de cases ni de flèches à faire glisser : vous écrivez des lignes comme A --> B, et Mermaid se charge de la mise en page. Il prend en charge les organigrammes, les diagrammes de séquence, de Gantt, d’états et de classes, les camemberts, les cartes mentales et d’autres types encore.
Comme c’est du texte, un diagramme se modifie facilement, se range dans le contrôle de version et apparaît dans les diffs. GitHub, GitLab, Obsidian et de nombreux outils de documentation affichent Mermaid : le même code fonctionne partout.
Comment dessiner un diagramme
- Ouvrez l’éditeur. Rendez-vous sur l’éditeur en ligne.
- Ajoutez un bloc Mermaid. Tapez trois accents graves suivis de
mermaid, ou utilisez le bouton Diagramme Mermaid de la rangée Éditeur avancé pour insérer un modèle. - Écrivez le diagramme. L’aperçu à droite le redessine pendant la frappe : une flèche ou un crochet manquant se voit tout de suite.
- Enregistrez ou partagez. Enregistrez le document en
.md, exportez-le en HTML ou imprimez-le en PDF : les diagrammes sont inclus.
Voici un premier organigramme :
markdown```mermaid
flowchart LR
A[Idée] --> B{Ça vaut le coup ?}
B -- oui --> C[On la réalise]
B -- non --> D[On la met de côté]
```
Types de diagrammes disponibles
| Type | Commence par | Utile pour |
|---|---|---|
| Organigramme | flowchart TD / flowchart LR |
Processus, décisions, algorithmes |
| Diagramme de séquence | sequenceDiagram |
API, connexions, parcours utilisateur |
| Diagramme de Gantt | gantt |
Plannings et calendriers de projet |
| Diagramme d’états | stateDiagram-v2 |
Statuts d’une commande ou d’un document |
| Diagramme de classes | classDiagram |
Modèles de données et structure du code |
| Camembert | pie |
Parts d’un total |
La syntaxe complète de chaque type, avec des exemples prêts à copier, se trouve dans notre guide des diagrammes Mermaid en Markdown.
Pourquoi l’utiliser
- Aperçu en direct. Le diagramme se met à jour pendant la frappe ; les erreurs de syntaxe se voient immédiatement.
- Texte et diagrammes ensemble. Rédigez l’explication, les formules et l’organigramme dans un seul fichier Markdown.
- Confidentiel. Les diagrammes sont dessinés dans votre navigateur. Votre code n’est pas envoyé à un serveur.
- Gratuit et open source. Pas de compte, pas de limite sur le nombre de diagrammes.
Limites
- Il n’y a pas de téléchargement PNG ou SVG séparé pour un diagramme isolé. Les diagrammes sont exportés avec le document, dans l’export HTML et dans le PDF. Pour obtenir une image isolée, les outils officiels de Mermaid permettent de l’exporter.
- Les thèmes personnalisés et les styles par nœud sont limités : les diagrammes ont un rendu sobre par défaut, assorti au thème clair ou sombre.
- Les diagrammes s’écrivent en code ; il n’y a pas d’édition visuelle par glisser-déposer.
Vous voulez lire un fichier Markdown existant qui contient des diagrammes ? Utilisez le Markdown viewer, ou revenez à l’accueil de l’éditeur Markdown.
Questions fréquentes
Cet éditeur Mermaid est-il gratuit ?
Oui. Il est gratuit et open source, sans inscription et sans limite.
Quels types de diagrammes Mermaid sont pris en charge ?
Organigrammes, diagrammes de séquence, diagrammes de Gantt, diagrammes d’états, de classes et entité-association, camemberts, cartes mentales, frises chronologiques et les autres types pris en charge par Mermaid.
Peut-on exporter un diagramme Mermaid ?
Les diagrammes sont inclus quand vous exportez le document en HTML ou l’imprimez en PDF. Le téléchargement d’un diagramme isolé en PNG ou SVG n’est pas disponible.
Pourquoi mon diagramme Mermaid ne s’affiche-t-il pas ?
Le plus souvent, c’est une erreur de syntaxe : une flèche manquante, un crochet non fermé ou des caractères spéciaux dans un libellé sans guillemets. La première ligne doit indiquer le type de diagramme, par exemple flowchart TD.
L’éditeur envoie-t-il le code de mes diagrammes quelque part ?
Non. Le diagramme est dessiné dans votre navigateur, et le document reste sur votre appareil.