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'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.

Tip

Pour se faciliter les choses, il est conseillé d'utiliser l'éditeur en ligne pour préparer son diagramme.

Exemple 1#

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

```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!];

  1. étape où un contributeur propose d'intégrer ses modifications dans le socle principal du projet. Voir la documentation de GitHub

Commentaires


Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA