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

Rendu 1#

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;

Exemple 2#

1
2
3
4
5
6
7
8
```mermaid
graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];
```

Rendu 2#

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

Dernière mise à jour: 13 octobre 2021
Créé: 26 août 2020
Contributions à cette page : Julien Moura

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


Commentaires

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