Des graphiques avec Kroki

Le plugin mkdocs-kroki permet d'intégrer des images de diagrammes générés à partir d'une description textuelle grace au service open source, libre de gratuit de Kroki...

Installation

Dans Visual Studio Code (VSC), ouvrir un nouveau Terminal (menu Terminal > New Terminal) pour saisir :

pip install mkdocs-kroki-plugin

Dans le dossier du projet, modifier les fichiers suivants tels que :

mkdocs.ymlci.yml

plugins:
  - search
  - mkdocs-jupyter:
      include_source: True
  - kroki

name: ci
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-python@v2
        with:
          python-version: 3.x      
      - run: pip install --upgrade pip
      - run: pip install mkdocs-material
      - run: pip install mkdocs-jupyter
      - run: pip install mkdocs-kroki-plugin
      # C'est ici qu'il faut ajouter si besoin
      # les instructions pour installer avec pip
      # les autres plugins MkDocs ou extensions MarkDown
      # souhaités pour le déploiement du site...

      - run: mkdocs gh-deploy --force

Au prochain redémarrage avec la commande mkdocs serve en local et au prochain déploiement distant sur GitHub le plugin mkdocs-kroki sera actif.

Hello world :

Dans n'importe quel fichier source.md on peut alors, par exemple, saisir un code GraphViz pour intégrer un diagramme tel que :

MarkDown saisi :MarkDown généré :Rendu :

```kroki-graphviz
digraph G {Demat ->"d'an holl"}
```

![Kroki](https://kroki.io/graphviz/svg/eNpTUFBQSMlML0osyFBwV6h2Sc1NLFHQtVNKUU_MU8jIz8lRquUCKlEAAO_AC0w=?)

Remarques :

• On peut obtenir l'URL de l'image à intégrer dans un code Markdown directement depuis le site de Kroki :

• Le plugin mkdocs-kroki offre l'avantage d'intégrer le code source pour facilement le retoucher par la suite et ainsi apporter d'éventuelles modifications à l'image générée...

Exemples

Plusieurs types de diagramme sont supportés et de nombreux exemples sont présentés à cette adresse : https://kroki.io/examples.html...

Chronogramme avec WaveDrom :

MarkDown saisi :MarkDown généré :Rendu :

```kroki-wavedrom
{ signal: [
  { name: "A", wave: "0.|1." },
  { name: "B", wave: "01|.0" },
  { name: "OU exclusif", wave: "01|01" },
]}
```

![Kroki](https://kroki.io/wavedrom/svg/eNpTUICAaoXizPS8xBwrhWguBTioVshLzE21UlByVNJRKE8sAzEN9GoM9ZQUanWwqXNCUmdYo2eAS51_qEJqRXJOaXFmGooOA0MUHbG1cCYA80Umtw==?)

Carte mentale avec PlantUML :

MarkDown saisi :MarkDown généré :Rendu

```kroki-plantuml
@startmindmap
skinparam monochrome true
+ ADN - Tutoriel site web
-- Créer, déployer puis maintenir son site
--- Dans un navigateur
--- Sur PC avec Visual Studio Code
--- Sur iPad en ligne de commande
++ Coder pour générer ses pages web
+++ MarkDown Mkdocs-Material, le contenu
+++ YAML, la configuration
+++ LaTeX, les sciences
+++ Python, les macros
-- Ressources
++ Annexes
@endmindmap
```

![Kroki](https://kroki.io/plantuml/svg/eNplkUFuwjAQRfc9xd9D7gCCJalQi6p2OU2mwSIeRzM2lCPlHLlYHahQ0nphyfPfH_3xAPezskgavZPaU_f0W4SdnHSk5OGDhOqowTOiJn4QC6y3zyhwSDGo4xbmIuPCnw-iKLDRoWddoh76rg1XVnTJGTw5iSxOYUFuxompwJbEkARCZ9dQ5KQz-TUp9hvQmSu8OUvU4jWm2gVsQs3_ULenGixoXSOMmlEF70km5GJxc-ZwIfPN0MvQa34aGzpq8j0da5HxkvS0DRdBeapDZUWZU6qjdol27D8Ol2aGj3W5yyKN4pdrklJ0QWbIjg78PjYwWOVYKraZvr_GY5A74KnSYNOffmGznH5uwlqEvyelFec1_1n1D8LOlno=?)

Ne s'affiche pas dans un onglet ! ???

---

Toujours en construction...

---