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#

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

Contributions à cette page : Julien Moura

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


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.