Mermaid

Introduction

Mermaid est une bibliothèque de diagrammes et de visualisation basée sur JavaScript, qui permet de créer des diagrammes et des organigrammes à l’aide de descriptions textuelles. Mermaid est fréquemment utilisé dans les documents Markdown (par exemple, sur GitHub, GitLab ou Confluence) pour représenter visuellement des relations complexes.

Avantages de Mermaid :

• Intégration simple dans les documents Markdown.
• Aucun outil externe nécessaire – les diagrammes sont rendus directement dans le navigateur.
• Prend en charge une grande variété de types de diagrammes.
• Idéal pour la documentation, les présentations et les spécifications techniques.

---

Types de diagrammes possibles

Organigramme (Flowchart)

Les organigrammes visualisent des processus ou des flux de travail. Ils sont composés de nœuds (étapes) et de connexions (flèches) représentant la séquence des étapes.

Exemple :

flowchart TD
  A[Début] --> B{Décision}
  B -->|Oui| C[Processus 1]
  B -->|Non| D[Processus 2]
  C --> E[Fin]
  D --> E

flowchart TD
  A[Début] --> B{Décision}
  B -->|Oui| C[Processus 1]
  B -->|Non| D[Processus 2]
  C --> E[Fin]
  D --> E

Explication :

• flowchart TD : Définit un organigramme de haut en bas.
• A[Début] : Un nœud avec l’étiquette “Début”.
• --> : Connexion entre les nœuds.
• |Oui| et |Non| : Étiquettes pour les connexions.

Diagramme de classes (Class Diagram)

Les diagrammes de classes montrent la structure des classes, leurs attributs, leurs méthodes et leurs relations entre elles.

Exemple :

classDiagram
class Animal {
  -nom: String
  +manger()
}
class Chien {
  +aboyer()
}
Animal <|-- Chien

classDiagram
class Animal {
  -nom: String
  +manger()
}
class Chien {
  +aboyer()
}
Animal <|-- Chien

Explication :

• classDiagram : Définit un diagramme de classes.
• Animal et Chien : Classes avec attributs (-nom) et méthodes (+manger()).
• <|-- : Relation d’héritage (Chien hérite d’Animal).

Diagramme de séquence (Sequence Diagram)

Les diagrammes de séquence visualisent les interactions entre des objets ou des acteurs dans un ordre chronologique.

Exemple :

sequenceDiagram
    Alice->>Bob: Bonjour !
    Bob-->>Alice: Bonjour en retour !

sequenceDiagram
    Alice->>Bob: Bonjour !
    Bob-->>Alice: Bonjour en retour !

Explication :

• sequenceDiagram : Définit un diagramme de séquence.
• Alice->>Bob : Message d’Alice à Bob.
• -->> : Réponse de Bob à Alice.

Diagramme Entité-Association (ER Diagram)

Les diagrammes ER montrent les relations entre les entités dans une base de données.

Exemple :

erDiagram
    CLIENT ||--o{ COMMANDE : places
    CLIENT {
        int id PK
        string nom
    }
    COMMANDE {
        int id PK
        date date
    }

erDiagram
    CLIENT ||--o{ COMMANDE : places
    CLIENT {
        int id PK
        string nom
    }
    COMMANDE {
        int id PK
        date date
    }

Explication :

• erDiagram : Définit un diagramme ER.
• CLIENT ||--o{ COMMANDE : Un client a plusieurs commandes.
• PK : Clé primaire.

Diagramme d’états (State Diagram)

Les diagrammes d’états montrent les états d’un système et les transitions entre ces états.

Exemple :

stateDiagram-v2
    s1 --> Arrêt
    Arrêt --> Marche: Allumer
    Marche --> Arrêt: Éteindre

stateDiagram-v2
    s1 --> Arrêt
    Arrêt --> Marche: Allumer
    Marche --> Arrêt: Éteindre

Explication :

• stateDiagram-v2 : Définit un diagramme d’états.
• [*] : État de départ.
• Arrêt --> Marche : Transition de “Arrêt” à “Marche” via “Allumer”.

Diagramme heuristique (Mindmap)

Les cartes heuristiques visualisent des idées ou des concepts hiérarchiques.

Exemple :

mindmap
  root((Sujet))
    Branche 1
      Sous-sujet 1
      Sous-sujet 2
    Branche 2
      Sous-sujet 3

mindmap
  root((Sujet))
    Branche 1
      Sous-sujet 1
      Sous-sujet 2
    Branche 2
      Sous-sujet 3

Explication :

• mindmap : Définit une carte heuristique.
• root((Sujet)) : Sujet central.
• Les indentations définissent la hiérarchie.

Diagramme d’exigences (Requirement Diagram)

Les diagrammes d’exigences montrent les exigences et leurs relations.

Exemple :

requirementDiagram
  requirement Exigence1 {
    id: 1
    text: "Le système doit être sécurisé."
  }
  element Système {
    type: "logiciel"
  }
  Système - satisfies -> Exigence1

requirementDiagram
  requirement Exigence1 {
    id: 1
    text: "Le système doit être sécurisé."
  }
  element Système {
    type: "logiciel"
  }
  Système - satisfies -> Exigence1

Explication :

• requirementDiagram : Définit un diagramme d’exigences.
• requirement : Définit une exigence.
• satisfies : Relation entre un élément et une exigence.

Diagramme de Gantt

Les diagrammes de Gantt visualisent les plans de projet et les calendriers.

Exemple :

gantt
    title Plan de projet
    dateFormat YYYY-MM-DD
    section Phase 1
        Tâche 1 :a1, 2024-01-01, 7d
        Tâche 2 :after a1, 3d

gantt
    title Plan de projet
    dateFormat YYYY-MM-DD
    section Phase 1
        Tâche 1 :a1, 2024-01-01, 7d
        Tâche 2 :after a1, 3d

Explication :

• gantt : Définit un diagramme de Gantt.
• dateFormat : Format des dates.
• Tâche 1 :a1, 2024-01-01, 7d : La tâche 1 dure 7 jours à partir du 1er janvier 2024.

Chronologie (Timeline)

Les chronologies montrent les événements dans un ordre chronologique.

Exemple :

timeline
    title Événements importants 2024 : Événement 1
    2025 : Événement 2

timeline
    title Événements importants 2024 : Événement 1
    2025 : Événement 2

Explication :

• timeline : Définit une chronologie.
• 2024 : Événement 1 : Événement en l’année 2024.

Informations complémentaires

Liens web

Mermaid Open-Source