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{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| 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