Schrek.fr

Attention cette article date depuis plus d'un an (585 jours).
Article qui n’a plus lieu d’être, Mermaid est inclu dans Hugo

On va integrer mermaid dans Hugo.

Mermaid permet de générer des jolies diagrammes à partir de texte.

Kroki est une alternative.

Le code

On va creer dans notre dossier des shortcodes /themes/VOTRETHEME/layouts/shortcodes un fichier mermaid.html

<div class="mermaid">
    {{ .Inner | safeHTML }}
</div>
{{ if le (.Page.Scratch.Get "mermaidInserted") 0 }}
{{ .Page.Scratch.Add "mermaidInserted" 1 }}
{{ $mermaid := resources.Get "js/mermaid.min.js" | minify | fingerprint }}
<script type="application/javascript" src="{{ $mermaid.Permalink }}" defer></script>
<script type="module">
    mermaid.initialize({});
</script>
{{ end }}

mermaid.min.js

On recupere le fichier mermaid.min.js pour le placer dans le dossier /themes/VOTRETHEME/assets/js

$ wget https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

Le Shortcode

{{< mermaid >}}
sequenceDiagram
    Louise->>Robert: Salut
    Robert-->>Louis: Bien!
    Louis-)Robert: A plus tard!
{{< / mermaid >}}

Tests

vous pouvez tester vos code ici

Exemples

sequenceDiagram Louise->>Robert: Salut Robert-->>Louis: Bien! Louis-)Robert: A plus tard!
pie title Hugo c'est cool? "Oui" : 25 "Oui en jaune" : 75

Liens

https://satoru.dev/2020/08/using-mermaid-in-hugo/

https://robb.sh/posts/how-to-use-mermaid-diagrams-in-hugo/

https://mermaid.js.org/intro/

Métadonnées

Posté le: 05.06.2023
Édité le: 07.01.2025
Nombre de mots: 157
Temps de lecture: 1 minutes
Cet article fait partie de la série: Hugo