Aller au contenu
Living Life

Tapez pour rechercher…

↑↓pour naviguer
Esc

Diagrammes Mermaid

Une vitrine de diagrammes Mermaid complexes rendus nativement avec Sätteri.

1min de lecture

Cet article montre comment écrire et afficher des diagrammes Mermaid directement dans vos fichiers Markdown et MDX. Puisque nous utilisons mermaid: true dans le frontmatter, la bibliothèque client Mermaid n’est chargée que sur cette page, gardant le reste du site léger et sans JavaScript.

Voici plusieurs exemples de diagrammes complexes, allant des organigrammes aux diagrammes de Gantt !

Pour afficher un diagramme, placez votre code Mermaid dans un bloc de code avec l’identifiant de langage mermaid :

```mermaid
stateDiagram-v2
    [*] --> Immobile
    Immobile --> [*]


    Immobile --> EnMouvement
    EnMouvement --> Immobile
    EnMouvement --> Accident
    Accident --> [*]
```

Ce qui s’affiche automatiquement ainsi :

stateDiagram-v2 [*] --> Immobile Immobile --> [*] Immobile --> EnMouvement EnMouvement --> Immobile EnMouvement --> Accident Accident --> [*]

sequenceDiagram autonumber Alice->>Jean: Bonjour Jean, comment vas-tu ? loop Bilan de santé Jean->>Jean: Lutter contre l'hypocondrie end Note right of Jean: Les pensées rationnelles<br/>l'emportent ! Jean-->>Alice: Super ! Jean->>Bob: Et toi ? Bob-->>Jean: Très bien !

gantt title Un Diagramme de Gantt dateFormat YYYY-MM-DD section Première section Une tâche :a1, 2014-01-01, 30d Une autre tâche :after a1 , 20d section Deuxième section Tâche en sec :2014-01-12 , 12d dernière tâche : 24d

classDiagram Animal <|-- Canard Animal <|-- Poisson Animal <|-- Zèbre Animal : +int age Animal : +String genre Animal: +estMammifere() Animal: +accouplement() class Canard{ +String couleurBec +nager() +cancaner() } class Poisson{ -int tailleEnCm -peutManger() } class Zèbre{ +bool est_sauvage +courir() }

gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

Commentaires

Les commentaires doivent être configurés

Giscus est activé mais pas encore configuré. Renseignez les informations du dépôt ci-dessous pour activer les commentaires.

  1. Rendez-vous sur giscus.app et sélectionnez votre dépôt GitHub public (les Discussions doivent être activées).
  2. Copiez les valeurs générées de data-repo-id, data-category et data-category-id.
  3. Définissez les variables d’environnement PUBLIC_GISCUS_ENABLED, PUBLIC_GISCUS_REPO, PUBLIC_GISCUS_REPO_ID, PUBLIC_GISCUS_CATEGORY et PUBLIC_GISCUS_CATEGORY_ID dans votre fichier .env.
  4. Reconstruisez le site — cet avis sera remplacé par le fil de commentaires en direct.

Ouvrir giscus.app