{ "cells": [ { "cell_type": "markdown", "id": "0", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/git/https%3A%2F%2Fgitlab.dsi.universite-paris-saclay.fr%2Fbruno.denis%2Fintro_jupyter/HEAD?labpath=notebooks%2Fmermaid.ipynb)\n", "[![NbViewer](https://badgen.net/static/render/NbViewer/orange)](https://nbviewer.org/urls/gitlab.dsi.universite-paris-saclay.fr/bruno.denis/intro_jupyter/-/raw/main/notebooks/mermaid.ipynb)\n", "\n", "# Intégration de Mermaid\n", "\n", "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/).\n", "\n", "La fonctionnalité majeure de ce carnet est :\n", "\n", "- **Affichage** de diagrammes Mermaid qui sont intégré à Jupyter depuis Jupyter Lab 4.1 et Jupyter Notebook 7.1" ] }, { "cell_type": "markdown", "id": "1", "metadata": { "editable": true, "slideshow": { "slide_type": "subslide" }, "tags": [] }, "source": [ "**Remarque** :\n", "\n", "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. \n", "\n", "Avec JupyterLab ou Jupyter Notebook la syntaxe [CommonMark Markdown](https://commonmark.org/) est :\n", "\n", "````\n", "```mermaid\n", " Ici le code du diagramme\n", " mermaid est placé.\n", "```\n", "````\n", "\n", "Tandis d'avec Jupyter Book la syntaxe [MyST Markdown](https://jupyterbook.org/en/stable/content/myst.html) est :\n", "\n", "````\n", "```{mermaid}\n", " Ici le code du diagramme\n", " mermaid est placé.\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "2", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Organigramme\n", "\n", "```\n", "flowchart LR\n", " A[Début] --> B{Is it?}\n", " B -->|Yes| C[OK]\n", " C --> D[Rethink]\n", " D --> B\n", " B ---->|No| E[Fin]\n", "```" ] }, { "cell_type": "markdown", "id": "3", "metadata": { "editable": true, "slideshow": { "slide_type": "" }, "tags": [ "remove-cell" ] }, "source": [ "\n", "``` mermaid\n", "%%| fig-responsive: true\n", "flowchart LR\n", " A[Début] --> B{Is it?}\n", " B -->|Yes| C[OK]\n", " C --> D[Rethink]\n", " D --> B\n", " B ---->|No| E[Fin]\n", "```" ] }, { "cell_type": "markdown", "id": "4", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "flowchart LR\n", " A[Début] --> B{Question?}\n", " B -->|Oui| C[OK]\n", " C --> D[Re]\n", " D --> B\n", " B ---->|Non| E[Fin]\n", "```" ] }, { "cell_type": "markdown", "id": "5", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme de séquence\n", "\n", "````\n", "``` mermaid\n", "sequenceDiagram\n", " Alice->>John: Hello John, how are you?\n", " activate John\n", " John-->>Alice: Great!\n", " deactivate John\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "6", "metadata": { "editable": true, "slideshow": { "slide_type": "" }, "tags": [ "remove-cell" ] }, "source": [ "```mermaid\n", "%%| fig-responsive: true\n", "sequenceDiagram\n", " Alice->>John: Hello John, how are you?\n", " activate John\n", " John-->>Alice: Great!\n", " deactivate John\n", "```" ] }, { "cell_type": "markdown", "id": "7", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "sequenceDiagram\n", " Alice->>John: Hello John, how are you?\n", " activate John\n", " John-->>Alice: Great!\n", " deactivate John\n", "```" ] }, { "cell_type": "markdown", "id": "8", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme de classe\n", "\n", "````\n", "```mermaid\n", "classDiagram\n", "\n", " Animal <|-- Duck\n", " Animal <|-- Fish\n", " Animal <|-- Zebra\n", " \n", " Animal: +int age\n", " Animal: +String gender\n", " Animal: +isMammal()\n", " Animal: +mate()\n", " \n", " Duck: +String beakColor\n", " Duck: +swim()\n", " Duck: +quack()\n", " \n", " Fish: -int sizeInFeet\n", " Fish: -canEat()\n", " \n", " Zebra: +bool is_wild\n", " Zebra: +run()\n", "\n", " note for Duck \"can fly\\ncan swim\\ncan dive\\ncan help in debugging\"\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "9", "metadata": { "editable": true, "slideshow": { "slide_type": "subslide" }, "tags": [ "remove-cell" ] }, "source": [ "```mermaid\n", "%%| fig-responsive: true\n", "classDiagram\n", "\n", " Animal <|-- Duck\n", " Animal <|-- Fish\n", " Animal <|-- Zebra\n", " \n", " Animal: +int age\n", " Animal: +String gender\n", " Animal: +isMammal()\n", " Animal: +mate()\n", " \n", " Duck: +String beakColor\n", " Duck: +swim()\n", " Duck: +quack()\n", " \n", " Fish: -int sizeInFeet\n", " Fish: -canEat()\n", " \n", " Zebra: +bool is_wild\n", " Zebra: +run()\n", "\n", " note for Duck \"can fly\\ncan swim\\ncan dive\\ncan help in debugging\"\n", "```" ] }, { "cell_type": "markdown", "id": "10", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "classDiagram\n", "\n", " Animal <|-- Duck\n", " Animal <|-- Fish\n", " Animal <|-- Zebra\n", " \n", " Animal: +int age\n", " Animal: +String gender\n", " Animal: +isMammal()\n", " Animal: +mate()\n", " \n", " Duck: +String beakColor\n", " Duck: +swim()\n", " Duck: +quack()\n", " \n", " Fish: -int sizeInFeet\n", " Fish: -canEat()\n", " \n", " Zebra: +bool is_wild\n", " Zebra: +run()\n", "\n", " note for Duck \"can fly\\ncan swim\\ncan dive\\ncan help in debugging\"\n", "```" ] }, { "cell_type": "markdown", "id": "11", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme d'état\n", "\n", "````\n", "```mermaid\n", "stateDiagram-v2\n", " direction LR\n", " [*] --> A\n", " A --> B : début de \\n production\n", " B --> C : fin de \\n production\n", " C --> [*]\n", " B --> D : ARU\n", " D --> B : not ARU\n", " state \"A \\n enter: n = 0 \\n exit: n = n + 1\" as A\n", " state \"Arrêt\\nd'urgence\" as D\n", " state B {\n", " [*] --> a : cpt = 1\n", " a --> b : temp < 20 \\n cpt += 1\n", " b --> c\n", " c --> a : in e\n", " --\n", " [*] --> d \n", " d --> e\n", " e --> d\n", " }\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "12", "metadata": { "editable": true, "slideshow": { "slide_type": "subslide" }, "tags": [ "remove-cell" ] }, "source": [ "\n", "```mermaid\n", "%%| fig-responsive: true\n", "stateDiagram-v2\n", " direction LR\n", " [*] --> A\n", " A --> B : début de \\n production\n", " B --> C : fin de \\n production\n", " C --> [*]\n", " B --> D : ARU\n", " D --> B : not ARU\n", " state \"A \\n enter: n = 0 \\n exit: n = n + 1\" as A\n", " state \"Arrêt\\nd'urgence\" as D\n", " state B {\n", " [*] --> a : cpt = 1\n", " a --> b : temp < 20 \\n cpt += 1\n", " b --> c\n", " c --> a : in e\n", " --\n", " [*] --> d \n", " d --> e\n", " e --> d\n", " }\n", "```\n" ] }, { "cell_type": "markdown", "id": "13", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "\n", "```{mermaid}\n", "%%| fig-responsive: true\n", "stateDiagram-v2\n", " direction LR\n", " [*] --> A\n", " A --> B : début de \\n production\n", " B --> C : fin de \\n production\n", " C --> [*]\n", " B --> D : ARU\n", " D --> B : not ARU\n", " state \"A \\n enter: n = 0 \\n exit: n = n + 1\" as A\n", " state \"Arrêt\\nd'urgence\" as D\n", " state B {\n", " [*] --> a : cpt = 1\n", " a --> b : temp < 20 \\n cpt += 1\n", " b --> c\n", " c --> a : in e\n", " --\n", " [*] --> d \n", " d --> e\n", " e --> d\n", " }\n", "```\n" ] }, { "cell_type": "markdown", "id": "14", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme chronologique\n", "\n", "````\n", "```mermaid\n", "timeline\n", " title Chronologie de la révolution industrielle\n", " section 17e-20e siècle\n", " Industry 1.0 : Machines, Énergie hydraulique, Énergie à vapeur\n", " Industry 2.0 : Électricité, moteur à combustion interne, production de masse\n", " Industry 3.0 : Électronique, informatique, automatisation\n", " section 21e siècle\n", " Industry 4.0 : Internet, robotique, Internet des objets\n", " Industry 5.0 : Intelligence artificielle, Big data, impression 3D\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "15", "metadata": { "editable": true, "slideshow": { "slide_type": "subslide" }, "tags": [ "remove-cell" ] }, "source": [ "\n", "```mermaid\n", "%%| fig-responsive: true\n", "timeline\n", " title Chronologie de la révolution industrielle\n", " section 17e-20e siècle\n", " Industry 1.0 : Machines, Énergie hydraulique, Énergie à vapeur\n", " Industry 2.0 : Électricité, moteur à combustion interne, production de masse\n", " Industry 3.0 : Électronique, informatique, automatisation\n", " section 21e siècle\n", " Industry 4.0 : Internet, robotique, Internet des objets\n", " Industry 5.0 : Intelligence artificielle, Big data, impression 3D\n", "```\n" ] }, { "cell_type": "markdown", "id": "16", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "\n", "```{mermaid}\n", "%%| fig-responsive: true\n", "timeline\n", " title Chronologie de la révolution industrielle\n", " section 17e-20e siècle\n", " Industry 1.0 : Machines, Énergie hydraulique, Énergie à vapeur\n", " Industry 2.0 : Électricité, moteur à combustion interne, production de masse\n", " Industry 3.0 : Électronique, informatique, automatisation\n", " section 21e siècle\n", " Industry 4.0 : Internet, robotique, Internet des objets\n", " Industry 5.0 : Intelligence artificielle, Big data, impression 3D\n", "```\n" ] }, { "cell_type": "markdown", "id": "17", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme de branche Git\n", "\n", "````\n", "```mermaid\n", "gitGraph\n", " commit id: \"0452fcf\"\n", " commit id: \"1c9efc5\"\n", " branch develop\n", " checkout develop\n", " commit id: \"e1074ab\"\n", " commit id: \"07fd5c9\"\n", " checkout main\n", " merge develop\n", " commit id: \"e76de3a\" tag: \"v1.2\"\n", " commit id: \"06b2f6b\"\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "18", "metadata": { "editable": true, "slideshow": { "slide_type": "" }, "tags": [ "remove-cell" ] }, "source": [ "```mermaid\n", "%%| fig-responsive: true\n", "gitGraph\n", " commit id: \"0452fcf\"\n", " commit id: \"1c9efc5\"\n", " branch develop\n", " checkout develop\n", " commit id: \"e1074ab\"\n", " commit id: \"07fd5c9\"\n", " checkout main\n", " merge develop\n", " commit id: \"e76de3a\" tag: \"v1.2\"\n", " commit id: \"06b2f6b\"\n", "```" ] }, { "cell_type": "markdown", "id": "19", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "gitGraph\n", " commit id: \"0452fcf\"\n", " commit id: \"1c9efc5\"\n", " branch develop\n", " checkout develop\n", " commit id: \"e1074ab\"\n", " commit id: \"07fd5c9\"\n", " checkout main\n", " merge develop\n", " commit id: \"e76de3a\" tag: \"v1.2\"\n", " commit id: \"06b2f6b\"\n", "```" ] }, { "cell_type": "markdown", "id": "20", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme quatre quadrants\n", "\n", "````\n", "```mermaid\n", "quadrantChart\n", " title Reach and engagement of campaigns\n", " x-axis Low Reach --> High Reach\n", " y-axis Low Engagement --> High Engagement\n", " quadrant-1 We should expand\n", " quadrant-2 Need to promote\n", " quadrant-3 Re-evaluate\n", " quadrant-4 May be improved\n", " Campaign A: [0.3, 0.6]\n", " Campaign B: [0.45, 0.23]\n", " Campaign C: [0.57, 0.69]\n", " Campaign D: [0.78, 0.34]\n", " Campaign E: [0.40, 0.34]\n", " Campaign F: [0.35, 0.78]\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "21", "metadata": { "editable": true, "slideshow": { "slide_type": "subslide" }, "tags": [ "remove-cell" ] }, "source": [ "```mermaid\n", "%%| fig-responsive: true\n", "quadrantChart\n", " title Reach and engagement of campaigns\n", " x-axis Low Reach --> High Reach\n", " y-axis Low Engagement --> High Engagement\n", " quadrant-1 We should expand\n", " quadrant-2 Need to promote\n", " quadrant-3 Re-evaluate\n", " quadrant-4 May be improved\n", " Campaign A: [0.3, 0.6]\n", " Campaign B: [0.45, 0.23]\n", " Campaign C: [0.57, 0.69]\n", " Campaign D: [0.78, 0.34]\n", " Campaign E: [0.40, 0.34]\n", " Campaign F: [0.35, 0.78]\n", "```" ] }, { "cell_type": "markdown", "id": "22", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "quadrantChart\n", " title Reach and engagement of campaigns\n", " x-axis Low Reach --> High Reach\n", " y-axis Low Engagement --> High Engagement\n", " quadrant-1 We should expand\n", " quadrant-2 Need to promote\n", " quadrant-3 Re-evaluate\n", " quadrant-4 May be improved\n", " Campaign A: [0.3, 0.6]\n", " Campaign B: [0.45, 0.23]\n", " Campaign C: [0.57, 0.69]\n", " Campaign D: [0.78, 0.34]\n", " Campaign E: [0.40, 0.34]\n", " Campaign F: [0.35, 0.78]\n", "```" ] }, { "cell_type": "markdown", "id": "23", "metadata": { "editable": true, "slideshow": { "slide_type": "slide" }, "tags": [] }, "source": [ "## Diagramme de Gantt\n", "\n", "````\n", "```mermaid\n", "gantt\n", "dateFormat YYYY-MM-DD\n", "excludes weekdays 2014-01-10\n", "\n", "Completed task :done, des1, 2014-01-06,2014-01-08\n", "Active task :active, des2, 2014-01-09, 3d\n", "Future task : des3, after des2, 5d\n", "Future task2 : des4, after des3, 5d\n", "```\n", "````" ] }, { "cell_type": "markdown", "id": "24", "metadata": { "editable": true, "slideshow": { "slide_type": "" }, "tags": [ "remove-cell" ] }, "source": [ "```mermaid\n", "%%| fig-responsive: true\n", "gantt\n", "dateFormat YYYY-MM-DD\n", "excludes weekdays 2014-01-10\n", "\n", "Completed task :done, des1, 2014-01-06,2014-01-08\n", "Active task :active, des2, 2014-01-09, 3d\n", "Future task : des3, after des2, 5d\n", "Future task2 : des4, after des3, 5d\n", "```" ] }, { "cell_type": "markdown", "id": "25", "metadata": { "editable": true, "slideshow": { "slide_type": "skip" }, "tags": [] }, "source": [ "```{mermaid}\n", "%%| fig-responsive: true\n", "gantt\n", "dateFormat YYYY-MM-DD\n", "excludes weekdays 2014-01-10\n", "\n", "Completed task :done, des1, 2014-01-06,2014-01-08\n", "Active task :active, des2, 2014-01-09, 3d\n", "Future task : des3, after des2, 5d\n", "Future task2 : des4, after des3, 5d\n", "```" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.9" } }, "nbformat": 4, "nbformat_minor": 5 }