Aller au contenu

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'extension SuperFences de PyMdown.

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    ```mermaid
    graph 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;
    ```
!!! tip
Pour se faciliter les choses, il est conseillé d'utiliser l'éditeur en ligne pour préparer son diagramme.

Rendu

graph 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;

Dernière mise à jour: 28 août 2020
Contributions à cette page : Julien Moura

Commentaires