Présentationpar DevBlog10 diapositives
Introduction à Mermaid
Dessiner des diagrammes avec du texte : organigrammes, séquences, états et chronologies, directement dans le Markdown.
- #mermaid
- #diagrammes
- #documentation
- #presentation
Introduction à Mermaid
Des diagrammes écrits comme du code, versionnés comme du code.
Pourquoi du texte ?
- Versionné dans Git, relu en pull request
- Pas d'image binaire à mettre à jour
- Cohérent avec le thème clair ou sombre du site
Organigramme
flowchart LR
A[Requête] --> B{Slug valide ?}
B -->|Oui| C[Page]
B -->|Non| D[404]Diagramme de séquence
sequenceDiagram
participant N as Navigateur
participant P as Proxy
participant S as Serveur
N->>P: GET /articles/mon-article
P->>P: Le contenu existe ?
P->>S: Oui, on transmet
S-->>N: 200 + HTMLDiagramme d'états
stateDiagram-v2
[*] --> Brouillon
Brouillon --> Relecture
Relecture --> Brouillon: Corrections
Relecture --> Publie
Publie --> [*]Chronologie
timeline
title Cycle d'une fonctionnalité
Idée : Besoin exprimé
Développement : Code et tests
Revue : Relecture par l'équipe
Livraison : Mise en productionDiagramme de classes
classDiagram
class Article {
+string titre
+string date
+string[] tags
}
class Presentation {
+string[] diapositives
}
Article <|-- PresentationBonnes pratiques
- Un diagramme = une idée
- Peu de nœuds (moins d'une dizaine)
- Des libellés courts
- Un diagramme doit être expliqué par le texte autour
Sécurité et rendu
Sur ce blog, Mermaid tourne en mode strict : pas de gestionnaires de clic ni de scripts dans les diagrammes.
Si la syntaxe est invalide, une alerte affiche la source pour la corriger.
À retenir
- Le diagramme vit à côté du texte
- Simple, lisible, versionné
- Plusieurs types selon le besoin
1 / 10
Flèches ← → pour naviguer · F pour le plein écran