Syntaxe des diagrammes Mermaid
Les diagrammes Mermaid sont des actifs d’architecture. Utilisez-les lorsqu’une relation, une séquence, un cycle de vie ou une carte est plus claire en texte structuré qu’en prose ou en image statique.
Préférez le plus petit type de diagramme qui explique l’idée. Gardez les diagrammes locaux, révisables et près de la page qui en dépend.
Charger Mermaid dans la page#
Le JavaScript Mermaid n’est pas chargé globalement. Toute page qui contient une clôture
Mermaid ou le shortcode mermaid doit l’activer dans ses métadonnées :
mermaid: truelayouts/_default/baseof.html lit ce paramètre de page et importe Mermaid seulement pour
cette page. Sans lui, la source du diagramme reste dans le HTML rendu, mais n’est pas
convertie en diagramme SVG.
Inventaire des syntaxes#
La source de vérité pour la syntaxe est la documentation Diagram Syntax de Mermaid.
| Type de diagramme | À utiliser pour | Syntaxe Mermaid |
|---|---|---|
| Flowchart | Montrer des décisions, des étapes, des embranchements ou des mouvements de système | Flowchart |
| Swimlanes diagram | Montrer le travail réparti entre acteurs, systèmes ou responsabilités | Swimlanes Diagram |
| Sequence diagram | Montrer des messages ou des appels dans le temps | Sequence Diagram |
| Class diagram | Montrer des modèles d’objets, des relations de types ou une structure d’interface | Class Diagram |
| State diagram | Montrer des états de cycle de vie et des transitions | State Diagram |
| Entity relationship diagram | Montrer des entités de données et leurs relations | Entity Relationship Diagram |
| User journey | Montrer des étapes, tâches et niveaux de satisfaction côté utilisateur | User Journey |
| Gantt | Montrer des calendriers, phases ou fenêtres de livraison | Gantt |
| Pie chart | Montrer des comparaisons simples entre parties et ensemble | Pie Chart |
| Quadrant chart | Placer des éléments selon deux dimensions | Quadrant Chart |
| Requirement diagram | Montrer des exigences et leurs relations | Requirement Diagram |
| GitGraph diagram | Montrer des branches Git, commits, fusions et mouvements de livraison | GitGraph (Git) Diagram |
| C4 diagram | Montrer des vues de contexte système, conteneurs, composants et déploiement | C4 Diagram |
| Mindmap | Montrer des idées ou notes hiérarchiques | Mindmaps |
| Timeline | Montrer des évènements en ordre chronologique | Timeline |
| ZenUML | Montrer une interaction de type séquence avec la syntaxe ZenUML | ZenUML |
| Sankey | Montrer des flux et quantités entre étapes | Sankey |
| XY chart | Montrer des valeurs simples sur des axes x et y | XY Chart |
| Block diagram | Montrer des blocs libellés et des relations spatiales | Block Diagram |
| Packet | Montrer une structure de paquet ou de trame | Packet |
| Kanban | Montrer des cartes regroupées par statut de travail | Kanban |
| Architecture | Montrer des services, groupes et liens d’architecture | Architecture |
| Radar | Montrer des scores de maturité, de capacité ou d’évaluation | Radar |
| Event modelling | Montrer des évènements, commandes, vues et interactions dans le temps | Event Modelling |
| Treemap | Montrer des quantités hiérarchiques par surface | Treemap |
| Venn | Montrer les chevauchements entre ensembles | Venn |
| Ishikawa | Montrer une analyse cause-effet | Ishikawa |
| Wardley | Montrer des chaînes de valeur et leur évolution | Wardley |
| Cynefin | Classer des situations par domaine de prise de décision | Cynefin |
| TreeView | Montrer des arborescences de fichiers, hiérarchies ou structures imbriquées | TreeView |
| Other examples | Vérifier des patrons de syntaxe qui ne s’inscrivent pas clairement dans une famille | Other Examples |
Règles d’utilisation#
- Utilisez Mermaid lorsque le diagramme profite du contrôle de version, des diffs et de la révision locale.
- Utilisez une image statique lorsque la fidélité visuelle compte plus que la lisibilité de la source.
- Gardez les libellés courts. Si le libellé a besoin d’un paragraphe, le diagramme porte trop de sens.
- Préférez un diagramme par concept. Divisez les grands diagrammes avant qu’ils deviennent des cartes de tout.
- Gardez la source du diagramme dans la page Markdown, sauf lorsque la même source est réutilisée par plusieurs pages.