Ne partez pas d’un éditeur vide. mermaid.design embarque une galerie intégrée de modèles de diagrammes prêts à l’emploi — ouvrez-en un, ajustez le code et appropriez-le-vous.
Ouvrir la galerie
Cliquez sur Modèles dans la barre de navigation pour ouvrir la galerie du mode de rendu actuel :
/templates— modèles rendus avec le moteur officiel (SVG) et votre thème actif/ascii/templates— les mêmes modèles rendus en art ASCII
Chaque carte de la galerie est rendue en direct avec votre thème actuel : ce que vous voyez est exactement ce que vous retrouvez dans l’éditeur.
Trouver un modèle
La galerie comprend des organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes d’états, diagrammes entité-association, diagrammes de Gantt, camemberts, graphes Git, cartes mentales, parcours utilisateurs, et plus encore.
Utilisez les puces de filtre en haut pour affiner la liste par type de diagramme. Si un modèle n’est pas pris en charge par le mode de rendu actuel (par exemple, certains types de diagrammes ne peuvent pas encore être rendus en ASCII), il est masqué automatiquement et un avis indique combien de modèles ont été filtrés.
Appliquer un modèle
- Cliquez sur une carte de modèle.
- Confirmez la boîte de dialogue d’écrasement — appliquer un modèle remplace le code actuellement présent dans l’éditeur. Cette action est irréversible.
- Vous revenez à l’éditeur avec le code du modèle chargé et rendu.
Depuis la galerie, cliquez sur Retour à l’éditeur dans la barre de navigation pour revenir à l’éditeur sans rien appliquer.
Astuces
- Appliquez d’abord un modèle, puis changez de thème — le modèle reprend instantanément vos variables de thème.
- Les modèles sont un excellent moyen d’apprendre la syntaxe Mermaid : ouvrez-en un, modifiez le code et observez l’aperçu évoluer.