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-graphviz
digraph G {Demat ->"d'an holl"}
```

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-wavedrom
{ signal: [
  { name: "A", wave: "0.|1." },
  { name: "B", wave: "01|.0" },
  { name: "OU exclusif", wave: "01|01" },
]}
```

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-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
```

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

---

Toujours en construction...

---