Intégration de Mermaid

Binder NbViewer

Intégration de Mermaid#

L’objectif de ce carnet Jupyter est de présenter les principaux diagrammes qui peuvent être construits à partir d’une description 100 % textuelle. Mermaid est un outil de création de diagrammes et de graphiques basé sur JavaScript qui propose un rendu graphique à partir de descriptions textuelles (page web https://mermaid.js.org/).

La fonctionnalité majeure de ce carnet est :

  • Affichage de diagrammes Mermaid qui sont intégré à Jupyter depuis Jupyter Lab 4.1 et Jupyter Notebook 7.1

Remarque :

La syntaxe Markdown pour débuter et fermer le bloc de code d’un diagramme Mermaid est différente selon le programme qui interprète la cellule.

Avec JupyterLab ou Jupyter Notebook la syntaxe CommonMark Markdown est :

```mermaid
   Ici le code du diagramme
   mermaid est placé.
```

Tandis d’avec Jupyter Book la syntaxe MyST Markdown est :

```{mermaid}
   Ici le code du diagramme
   mermaid est placé.
```

Organigramme#

flowchart LR
    A[Début] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[Fin]
%%| fig-responsive: true flowchart LR A[Début] --> B{Question?} B -->|Oui| C[OK] C --> D[Re] D --> B B ---->|Non| E[Fin]

Diagramme de séquence#

``` mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
```
%%| fig-responsive: true sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

Diagramme de classe#

```mermaid
classDiagram

    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    
    Animal: +int age
    Animal: +String gender
    Animal: +isMammal()
    Animal: +mate()
    
    Duck: +String beakColor
    Duck: +swim()
    Duck: +quack()
    
    Fish: -int sizeInFeet
    Fish: -canEat()
    
    Zebra: +bool is_wild
    Zebra: +run()

    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
```
%%| fig-responsive: true classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal: +int age Animal: +String gender Animal: +isMammal() Animal: +mate() Duck: +String beakColor Duck: +swim() Duck: +quack() Fish: -int sizeInFeet Fish: -canEat() Zebra: +bool is_wild Zebra: +run() note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"

Diagramme d’état#

```mermaid
stateDiagram-v2
    direction LR
    [*] --> A
    A --> B : début de \n production
    B --> C : fin de \n production
    C --> [*]
    B --> D : ARU
    D --> B : not ARU
    state "A \n enter: n = 0 \n exit: n = n + 1" as A
    state "Arrêt\nd'urgence" as D
    state B {
      [*] --> a : cpt = 1
      a --> b : temp < 20 \n cpt += 1
      b --> c
      c --> a : in e
      --
      [*] --> d 
      d --> e
      e --> d
    }
```
%%| fig-responsive: true stateDiagram-v2 direction LR [*] --> A A --> B : début de \n production B --> C : fin de \n production C --> [*] B --> D : ARU D --> B : not ARU state "A \n enter: n = 0 \n exit: n = n + 1" as A state "Arrêt\nd'urgence" as D state B { [*] --> a : cpt = 1 a --> b : temp < 20 \n cpt += 1 b --> c c --> a : in e -- [*] --> d d --> e e --> d }

Diagramme chronologique#

```mermaid
timeline
    title Chronologie de la révolution industrielle
    section 17e-20e siècle
        Industry 1.0 : Machines, Énergie hydraulique, Énergie à vapeur
        Industry 2.0 : Électricité, moteur à combustion interne, production de masse
        Industry 3.0 : Électronique, informatique, automatisation
    section 21e siècle
        Industry 4.0 : Internet, robotique, Internet des objets
        Industry 5.0 : Intelligence artificielle, Big data, impression 3D
```
%%| fig-responsive: true timeline title Chronologie de la révolution industrielle section 17e-20e siècle Industry 1.0 : Machines, Énergie hydraulique, Énergie à vapeur Industry 2.0 : Électricité, moteur à combustion interne, production de masse Industry 3.0 : Électronique, informatique, automatisation section 21e siècle Industry 4.0 : Internet, robotique, Internet des objets Industry 5.0 : Intelligence artificielle, Big data, impression 3D

Diagramme de branche Git#

```mermaid
gitGraph
   commit id: "0452fcf"
   commit id: "1c9efc5"
   branch develop
   checkout develop
   commit id: "e1074ab"
   commit id: "07fd5c9"
   checkout main
   merge develop
   commit id: "e76de3a" tag: "v1.2"
   commit id: "06b2f6b"
```
%%| fig-responsive: true gitGraph commit id: "0452fcf" commit id: "1c9efc5" branch develop checkout develop commit id: "e1074ab" commit id: "07fd5c9" checkout main merge develop commit id: "e76de3a" tag: "v1.2" commit id: "06b2f6b"

Diagramme quatre quadrants#

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```
%%| fig-responsive: true quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]

Diagramme de Gantt#

```mermaid
gantt
dateFormat  YYYY-MM-DD
excludes weekdays 2014-01-10

Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d
```
%%| fig-responsive: true gantt dateFormat YYYY-MM-DD excludes weekdays 2014-01-10 Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d
Contenu