Insérer des diagrammes#

Le site intègre la bibliothèque MermaidJS qui permet de générer des diagrammes en utilisant une extension de la syntaxe Markdown.

On utilise l'intégration dans le thème Material for Mkdocs.

Syntaxe#

Cela consiste en créant une balise de code pointant sur le langage mermaid, dans laquelle on insère notre syntaxe MermaidJS.

Exemple 1#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

```mermaid
flowchart TD;
    Z[master]-->A[Création d'une branche]-->B(Pull Request);
    C[Contributeur 1]-->B;
    D[Contributrice 2]-->B;
    E[Contributeur n]-->B;
    B-->F[Merge dans la branche principale];
    F-->G[Conversion en HTML];
    G-->H[Déploiement sur GitHub Pages];
    H-->Twitter;
    H-->LinkedIn;
```

Rendu 1#

flowchart TD;
    Z[master]-->A[Création d'une branche]-->B(Pull Request);
    C[Contributeur 1]-->B;
    D[Contributrice 2]-->B;
    E[Contributeur n]-->B;
    B-->F[Merge dans la branche principale];
    F-->G[Conversion en HTML];
    G-->H[Déploiement sur GitHub Pages];
    H-->Twitter;
    H-->LinkedIn;

Exemple 2#

1
2
3
4
5
6
7
8

```mermaid
flowchart LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];
```

Rendu 2#

flowchart LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Commentaires