Chronologie simple avec titre
Un historique chronologique minimal avec un événement par période.
timeline
title Historique du Produit
2024 : Premier prototype
2025 : Bêta privée
2026 : Lancement publicRéférence de syntaxe de diagrammes
Aide-mémoire & Guide de diagrammes Mermaid
Copiez un exemple fonctionnel du diagramme dont vous avez besoin, visualisez le rendu et adaptez les libellés et liaisons pour votre documentation.
Modèle de syntaxe
```mermaid
flowchart LR
A[Write Markdown] --> B[Add Mermaid code]
B --> C[Preview diagram]
C --> D[Publish docs]
```Les blocs de code délimités par l’identifiant mermaid sont automatiquement transformés en diagrammes interactifs.
syntaxe organigramme mermaid
Syntaxe d’organigramme Mermaid
Utilisez un organigramme pour montrer le déroulement d’un processus d’une étape à l’autre, avec décisions et branches alternatives.
Syntaxe copiable
Organigrammes
flowchart TD
A[Rédiger Markdown] --> B{Besoin d'un diagramme ?}
B -- Oui --> C[Écrire code Mermaid]
B -- Non --> D[Publier notes]
C --> E[Aperçu et export]
E --> DAperçu rendu
Processus, branches, décisions, flux opérationnels
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Commencez par flowchart puis choisissez TD (haut en bas) ou LR (gauche à droite).
Crochets pour les étapes d’action, accolades pour les décisions.
Étiquetez les liaisons entre tirets, par exemple -- Oui -->.
syntaxe diagramme de sequence mermaid
Syntaxe de diagramme de séquence Mermaid
Les diagrammes de séquence affichent les échanges de messages dans l’ordre temporel. Idéal pour les APIs et l’authentification.
Syntaxe copiable
Séquence
sequenceDiagram
participant Utilisateur
participant App
participant Renderer
Utilisateur->>App: Coller syntaxe Mermaid
App->>Renderer: Valider diagramme
Renderer-->>App: Aperçu SVG
App-->>Utilisateur: Options d'exportAperçu rendu
APIs, flux requête-réponse, microservices
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Déclarez les participants pour contrôler l’ordre d’affichage.
Utilisez ->> pour les requêtes et -->> pour les réponses.
Indiquez le libellé du message après deux-points.
exemple chronologie mermaid
Syntaxe de chronologie Mermaid
Les chronologies organisent les événements dans l’ordre chronologique pour les jalons, feuilles de route et historiques.
Syntaxe copiable
Chronologie
timeline
title Histoire de Markdown
2004 : Création de Markdown : John Gruber & Aaron Swartz
2011 : Standard CommonMark
2014 : GitHub Flavored Markdown (GFM)
2026 : Outils TheMarkdownerAperçu rendu
Historiques de versions, roadmaps, chronologie de projet
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Autres modèles de chronologie
4 exemples de chronologies Mermaid à copier
Plusieurs événements dans une même période
Ajoutez des deux-points supplémentaires pour regrouper des jalons liés dans une même période.
timeline
title Plan de Lancement 2026
T1 : Recherche client : Feuille de route validée
T2 : Bêta privée : Documentation
T3 : Disponibilité générale : Revue d’adoptionFeuille de route par sprints
Regroupez les périodes de livraison avec des sections pour une feuille de route lisible.
timeline
title Sprints Logiciels
section Découverte
Sprint 1 : Définir le périmètre : Prototype
section Livraison
Sprint 2 : Construire l’éditeur : Ajouter la validation
section Publication
Sprint 3 : Revue d’accessibilité : LancementHistorique des versions
Documentez les versions du logiciel et les changements notables dans l’ordre chronologique.
timeline
title Historique des Versions
v1.0 : Version initiale : Éditeur principal
v1.1 : Export SVG : Thème sombre
v2.0 : Constructeur de chronologie : Liens partageablesCommencez par le mot-clé timeline.
Définissez les périodes suivies de deux-points puis des événements.
Séparez plusieurs événements d’une même période par des deux-points.
syntaxe diagramme er mermaid
Syntaxe de diagramme ER Mermaid
Les diagrammes entité-association modélisent les entités de base de données et leurs relations.
Syntaxe copiable
Diagrammes ER
erDiagram
DOCUMENT ||--o{ DIAGRAMME : contient
DOCUMENT {
string titre
string format
}
DIAGRAMME {
string type
string source
}Aperçu rendu
Schémas de bases de données, modèles relationnels, contrats de données
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Déclarez erDiagram sur la première ligne.
Définissez les liaisons avec des symboles comme ||--o{ (un-à-plusieurs).
Placez les propriétés des tables entre accolades.
syntaxe diagramme de classes mermaid
Syntaxe de diagramme de classes Mermaid
Les diagrammes de classes représentent les objets, attributs, méthodes et héritages pour la documentation technique orientée objet.
Syntaxe copiable
Classes
classDiagram
class Document {
+string titre
+string format
+convertToMarkdown()
}
class Diagramme {
+string type
+render()
}
Document "1" --> "0..*" Diagramme : inclutAperçu rendu
Objets, propriétés, classes, architecture de code
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Commencez par classDiagram au sommet.
Utilisez + pour public et - pour privé.
Spécifiez les liaisons avec des flèches comme -->.
syntaxe diagramme detats mermaid
Syntaxe de diagramme d’états Mermaid
Affiche les états valides d’un système et les transitions qui le font évoluer.
Syntaxe copiable
États
stateDiagram-v2
[*] --> Brouillon
Brouillon --> Apercu: afficher
Apercu --> Erreur: syntaxe invalide
Apercu --> Publie: exporter
Erreur --> Brouillon: corriger codeAperçu rendu
Cycles de vie, modes opératoires, transitions
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Utilisez stateDiagram-v2 pour la syntaxe moderne.
Représentez le début et la fin avec [*].
Ajoutez les libellés de transition après deux-points.
syntaxe diagramme de gantt mermaid
Syntaxe de diagramme de Gantt Mermaid
Les diagrammes de Gantt planifient les tâches sur un calendrier daté avec durées, jalons et dépendances.
Syntaxe copiable
Gantt
gantt
title Publication de la documentation
dateFormat YYYY-MM-DD
section Rédaction
Écrire le guide :a1, 2026-06-12, 2d
Revoir exemples :after a1, 1d
section Publication
Captures d'écran :1d
Lancer la page :1dAperçu rendu
Plannings de projets, jalons, suivi de sprints
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Déclarez dateFormat pour correspondre au format des dates.
Organisez les tâches en sections avec le mot-clé section.
Enchaînez les dépendances avec after id-tache.
syntaxe diagramme circulaire mermaid
Syntaxe de diagramme circulaire Mermaid
Montrent la répartition de différentes catégories au sein d’un ensemble.
Syntaxe copiable
Diagrammes circulaires
pie showData
title Types de diagrammes en documentation
"Organigrammes" : 40
"Diagrammes de séquence" : 25
"Diagrammes ER" : 20
"Autres" : 15Aperçu rendu
Répartitions, parts de marché, statistiques
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Utilisez pie showData pour afficher les valeurs à côté des libellés.
Entourez de guillemets doubles les libellés contenant des espaces.
Limitez le nombre de secteurs pour préserver la clarté.
syntaxe carte mentale mermaid
Syntaxe de carte mentale Mermaid
Structurent un sujet central et ses ramifications via des indentations hiérarchiques.
Syntaxe copiable
Cartes mentales
mindmap
root((Mermaid))
Markdown
Fichiers README
Sites de docs
Diagrammes
Organigrammes
Séquence
ERDAperçu rendu
Arborescences, brainstorming, cartographies d’idées
Génération de l’aperçu Mermaid
La syntaxe reste visible si JavaScript est désactivé.
Utilisez les espaces d’indentation pour imbriquer les sous-branches.
Déclarez root((Noeud)) pour un centre visuel distinct.
Gardez les libellés courts pour un espacement régulier.
Dépannage
Erreurs de syntaxe Mermaid fréquentes
La plupart des erreurs Mermaid viennent d’un identifiant de type de diagramme manquant, d’une flèche mal écrite ou d’un libellé qui exige des guillemets doubles. Si un diagramme ne compile pas, réduisez le code à une seule relation, puis rajoutez les lignes une à une.
Identifiant de diagramme manquant
Un bloc Mermaid doit commencer par un mot-clé (par exemple flowchart, sequenceDiagram ou erDiagram) pour que l’analyseur sache quelle structure construire.
Ponctuation de flèche incorrecte
Les flèches dépendent du type de diagramme. Les organigrammes utilisent -->, tandis que les diagrammes de séquence exigent ->> et -->> pour les retours.
Caractères spéciaux sans guillemets
La ponctuation à l’intérieur d’un libellé peut être interprétée comme de la syntaxe Mermaid. Entourez le libellé de guillemets doubles ou séparez l’identifiant du nœud de son texte affiché.
Indentation incohérente
Les cartes mentales et les feuilles de route chronologiques dépendent fortement de l’indentation. Vérifiez que les éléments enfants imbriqués sont indentés de façon identique.
Foire aux questions
Comment est structuré cet aide-mémoire Mermaid ?
Chaque section associe un bloc de code fonctionnel avec un aperçu dynamique et des conseils de syntaxe.
Puis-je exporter des diagrammes Mermaid sous forme d’images ?
Oui. Collez le code dans l’éditeur Mermaid pour télécharger vos images en SVG, PNG ou PDF.
Les diagrammes Mermaid sont-ils pris en charge sur GitHub ?
Oui. GitHub, GitLab et Obsidian affichent nativement les blocs de code ```mermaid.
Utilitaires de syntaxe
Commentaires et caractères spéciaux Mermaid
Les commentaires et les libellés échappés fonctionnent pour tous les types de diagrammes : ils ne dépendent donc pas de la syntaxe des chronologies. Utilisez des commentaires pour les notes de maintenance et des entités HTML lorsqu’un libellé contient de la ponctuation de syntaxe.
Ajouter un commentaire Mermaid
Les lignes commençant par
%%restent dans la source mais ne sont pas rendues.Échapper la ponctuation de la syntaxe
Utilisez une entité HTML lorsqu’un deux-points fait partie d’un libellé.