Guide complet des diagrammes Mermaid
Apprenez à créer des diagrammes professionnels avec une syntaxe simple basée sur le texte
Qu’est-ce que Mermaid ?
Mermaid est un outil de diagrammation et de charting basé sur JavaScript qui utilise des définitions de texte inspirées de Markdown pour créer et modifier des diagrammes dynamiquement. C’est un projet open source qui permet de générer des diagrammes à partir de descriptions textuelles simples.
Au lieu d’utiliser des outils de dessin complexes, vous écrivez une syntaxe proche du code qui décrit votre diagramme, et Mermaid le rend sous forme de diagramme visuel. Cette approche rend les diagrammes versionnables, faciles à mettre à jour et parfaits pour la documentation.
Mermaid s’intègre parfaitement aux plateformes de documentation, aux wikis et aux fichiers Markdown, ce qui en fait un outil apprécié des développeurs et des rédacteurs techniques.
Pourquoi utiliser Mermaid ?
- Contrôle de version : les diagrammes sont des fichiers texte, ils peuvent donc être suivis dans Git avec votre code
- Mises à jour rapides : modifiez quelques lignes de texte plutôt que de redessiner des diagrammes entiers
- Cohérence : Mermaid gère automatiquement la mise en page et le style, garantissant des diagrammes cohérents
- Pas d’outils de design nécessaires : inutile d’utiliser Visio, Lucidchart ou d’autres outils coûteux
- Documentation comme du code : gardez les diagrammes dans le même dépôt que votre documentation
- Multiplateforme : fonctionne dans les navigateurs et Node.js, et s’intègre à de nombreuses plateformes
- Gratuit et open source : pas de coûts de licence, communauté active
- Plusieurs types de diagrammes : prend en charge les organigrammes, diagrammes de séquence, de classes, etc.
Types de diagrammes pris en charge
Mermaid prend en charge une grande variété de types de diagrammes pour répondre à différents besoins de documentation :
Organigramme
Visualisez des workflows, des processus et des arbres de décision avec des nœuds et des arêtes.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> ECas d’usage: Flux de processus, algorithmes, logique décisionnelle
Diagramme de séquence
Montre les interactions entre différents acteurs ou systèmes au fil du temps.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: ResponseCas d’usage: Interactions API, communication système, parcours utilisateur
Diagramme de classes
Modélise des systèmes orientés objet avec classes, attributs et relations.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- DogCas d’usage: Architecture logicielle, conception POO, schémas de base de données
Diagramme d’états
Représente les états et transitions d’un système ou d’un processus.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: RetryCas d’usage: Machines à états, gestion du cycle de vie, états d’UI
Diagramme entité‑relation
Modélise les structures de base de données et les relations entre entités.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}Cas d’usage: Conception de base de données, modélisation de données, architecture système
Diagramme de Gantt
Planifiez et visualisez les plannings et chronologies de projet.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dCas d’usage: Planification de projet, chronologies de sprint, roadmaps
Diagramme circulaire
Affiche des données proportionnelles et des pourcentages de façon visuelle.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28Cas d’usage: Résultats d’enquête, parts de marché, allocation de ressources
Graphe Git
Visualisez les stratégies de branchement Git et l’historique des commits.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developCas d’usage: Documentation des workflows Git, stratégies de branchement
Bien démarrer avec Mermaid
Choisir votre type de diagramme
Commencez par décider quel type de diagramme représente le mieux ce que vous voulez montrer. Chaque type commence par un mot-clé spécifique comme 'flowchart', 'sequenceDiagram' ou 'classDiagram'.
Écrire la syntaxe textuelle
Utilisez la syntaxe simple de Mermaid pour décrire votre diagramme. La syntaxe est intuitive et se lit presque comme du langage naturel. Par exemple, 'A --> B' crée une flèche de A vers B.
Prévisualiser votre diagramme
Utilisez notre visualiseur en ligne ou tout outil compatible Mermaid pour voir votre diagramme rendu en temps réel. Ajustez-le jusqu’à satisfaction.
Exporter et partager
Exportez votre diagramme en SVG ou PNG pour des présentations, ou partagez une URL avec votre équipe. Vous pouvez aussi intégrer Mermaid directement dans des fichiers Markdown.
Bonnes pratiques
- Gardez les diagrammes centrés sur un seul concept ou workflow
- Utilisez des libellés significatifs qui décrivent la logique métier réelle
- Décomposez les diagrammes complexes en diagrammes plus petits et interconnectés
- Ajoutez des commentaires avec %% pour expliquer les sections complexes
- Utilisez des conventions de nommage cohérentes dans vos diagrammes
- Testez vos diagrammes dans l’environnement cible avant de les finaliser
- Ajoutez des indications de direction (TD, LR) pour contrôler la mise en page si nécessaire
- Utilisez des sous-graphes pour regrouper les nœuds liés dans les organigrammes
- Utilisez les options de style avec parcimonie pour préserver la lisibilité
- Versionnez les fichiers source de vos diagrammes avec votre code
Cas d’usage courants
Documentation logicielle
Documentez l’architecture système, les flux API et les interactions de composants avec votre code.
Planification de projet
Créez des diagrammes de Gantt pour la planification de sprint, les chronologies de projet et l’allocation de ressources.
Propositions techniques
Visualisez des solutions proposées, des conceptions de systèmes et des décisions d’architecture.
Parcours utilisateur
Cartographiez les flux utilisateur, les expériences client et les schémas d’interaction.
Conception de base de données
Modélisez les relations entre entités, les structures de schéma et les dépendances de données.
Documentation des processus
Documentez les processus métier, les workflows et les procédures opérationnelles standard.
Supports pédagogiques
Créez des diagrammes clairs et versionnés pour des tutoriels et des cours techniques.
Documentation API
Illustrez les flux requête/réponse, les séquences d’authentification et les interactions d’endpoints.
Ressources supplémentaires
Questions fréquentes
Questions fréquentes sur l'utilisation de Mermaid Viewer et la création de diagrammes
Cet éditeur Mermaid est-il vraiment gratuit ?
Dois-je installer quelque chose ?
Comment enregistrer mes diagrammes ?
Puis-je utiliser les diagrammes dans ma documentation ?
Quelle différence entre SVG et PNG ?
Pourquoi mon diagramme ne se rend pas ?
Puis-je collaborer avec d’autres personnes ?
Le viewer fonctionne-t-il hors ligne ?
Comment apprendre la syntaxe Mermaid ?
Puis-je personnaliser l’apparence ?
Quels types de diagrammes sont pris en charge ?
Mes données de diagramme sont-elles privées ?
Pourquoi préférer des diagrammes textuels ?
Puis-je intégrer Mermaid sur mon site web ?
Quelle taille maximale de diagramme est recommandée ?
Prêt à créer votre premier diagramme ?
Essayez notre visualiseur Mermaid en ligne gratuit et commencez à créer des diagrammes professionnels en quelques minutes.
Ouvrir le visualiseur Mermaid