Guide complet des diagrammes Mermaid dans Markdown
Cet article montre comment utiliser Mermaid dans des documents Markdown pour créer différents types de diagrammes complexes, notamment des diagrammes de flux, des diagrammes de séquence, des diagrammes de Gantt, des diagrammes de classes et des diagrammes d’état.
Exemples de diagrammes de flux
Les diagrammes de flux sont très adaptés pour représenter des processus ou des étapes algorithmiques.
graph TD
A[Début] --> B{Vérification}
B -->|Oui| C[Étape 1]
B -->|Non| D[Étape 2]
C --> E[Sous-processus]
D --> E
subgraph E [Détails]
E1[Sous-étape 1] --> E2[Sous-étape 2]
E2 --> E3[Sous-étape 3]
end
E --> F{Décision suivante}
F -->|Option 1| G[Résultat 1]
F -->|Option 2| H[Résultat 2]
F -->|Option 3| I[Résultat 3]
G --> J[Fin]
H --> J
I --> J
Exemples de diagrammes de séquence
Les diagrammes de séquence montrent les interactions entre objets au fil du temps.
sequenceDiagram
participant User as Utilisateur
participant WebApp as Application Web
participant Server as Serveur
participant Database as Base de données
User->>WebApp: Soumettre la demande de connexion
WebApp->>Server: Envoyer la requête d'authentification
Server->>Database: Interroger les identifiants utilisateur
Database-->>Server: Retourner les données utilisateur
Server-->>WebApp: Retourner le résultat d'authentification
alt Authentification réussie
WebApp->>User: Afficher la page d'accueil
WebApp->>Server: Demander les données utilisateur
Server->>Database: Récupérer les préférences utilisateur
Database-->>Server: Retourner les préférences
Server-->>WebApp: Retourner les données utilisateur
WebApp->>User: Charger l'interface personnalisée
else Authentification échouée
WebApp->>User: Afficher le message d'erreur
WebApp->>User: Inviter à ressaisir les informations
end
Exemples de diagrammes de Gantt
Les diagrammes de Gantt sont très adaptés pour afficher la progression et le calendrier d’un projet.
gantt
title Calendrier du projet de développement web
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Phase de conception
Analyse des besoins :a1, 2023-10-01, 7d
Conception UI :a2, after a1, 10d
Création du prototype :a3, after a2, 5d
section Phase de développement
Développement frontend :b1, 2023-10-20, 15d
Développement backend :b2, after a2, 18d
Conception de la base de données :b3, after a1, 12d
section Phase de test
Tests unitaires :c1, after b1, 8d
Tests d'intégration :c2, after b2, 10d
Tests d'acceptation utilisateur :c3, after c2, 7d
section Déploiement
Déploiement en production :d1, after c3, 3d
Publication :milestone, after d1, 0d
Exemples de diagrammes de classes
Les diagrammes de classes montrent la structure statique du système, y compris les classes, les attributs, les méthodes et leurs relations.
classDiagram
class User {
+String username
+String password
+String email
+Boolean active
+login()
+logout()
+updateProfile()
}
class Article {
+String title
+String content
+Date publishDate
+Boolean published
+publish()
+edit()
+delete()
}
class Comment {
+String content
+Date commentDate
+addComment()
+deleteComment()
}
class Category {
+String name
+String description
+addArticle()
+removeArticle()
}
User "1" -- "*" Article : rédige
User "1" -- "*" Comment : publie
Article "1" -- "*" Comment : possède
Article "1" -- "*" Category : appartient à
Exemples de diagrammes d’état
Les diagrammes d’état montrent la séquence d’états qu’un objet traverse au cours de son cycle de vie.
stateDiagram-v2
[*] --> Brouillon
Brouillon --> EnRevision : Soumettre
EnRevision --> Brouillon : Refuser
EnRevision --> Approuvé : Approuver
Approuvé --> Publié : Publier
Publié --> Archivé : Archiver
Publié --> Brouillon : Retirer
state Publié {
[*] --> Actif
Actif --> Masqué : Masquer temporairement
Masqué --> Actif : Restaurer
Actif --> [*]
Masqué --> [*]
}
Archivé --> [*]
Exemples de diagrammes en secteurs
Les diagrammes en secteurs sont très adaptés pour afficher des données proportionnelles et des pourcentages.
pie title Analyse des sources de trafic du site web
"Moteurs de recherche" : 45.6
"Accès direct" : 30.1
"Réseaux sociaux" : 15.3
"Liens référents" : 6.4
"Autres sources" : 2.6
Résumé
Mermaid est un outil puissant pour créer différents types de diagrammes dans des documents Markdown. Cet article a montré comment utiliser les diagrammes de flux, de séquence, de Gantt, de classes, d’état et en secteurs. Ces diagrammes peuvent vous aider à exprimer plus clairement des concepts complexes, des processus et des structures de données.
Pour utiliser Mermaid, il suffit de spécifier le langage mermaid dans un bloc de code et de décrire le diagramme avec une syntaxe textuelle concise. Mermaid convertira automatiquement ces descriptions en visualisations élégantes.
Essayez d’utiliser des diagrammes Mermaid dans votre prochain article de blog technique ou documentation de projet — ils rendront votre contenu plus professionnel et plus facile à comprendre !
