Essayer mermaid.js

Sat, 25 May 2024 02:18:09 +0900

Qu’est-ce que mermaid.js

mermaid.js est une bibliothèque JavaScript qui vous permet d’afficher graphiquement des diagrammes complexes tels que des organigrammes, des diagrammes et des diagrammes de Gantt en écrivant une syntaxe originale basée sur du texte (syntaxe Mermaid). Il est également adopté dans divers services tels que GitHub, Qiita et Notion. Cette fois, nous allons essayer d’utiliser mermaid.js dans hugo.

Activer mermaid.js dans hugo

Les étapes sont les suivantes :

Ajoutez ce qui suit dans layouts/partials/extend_footer.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ if or .Params.mermaid .Site.Params.mermaid }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
{{- $loadmermaid := resources.Get "js/load-mermaid.js" }}
<script src="{{ $loadmermaid.RelPermalink }}"></script>
<script>
 window.initMermaid();
 if (isDarkTheme()) {
 setPrefTheme('dark');
 } else {
 setPrefTheme('light');
 }
</script>
{{ end }}

※ mermaid.min.js n’est chargé que lorsque mermaid: true est défini dans la condition if. Cette bibliothèque pèse environ 3 Mo et est étonnamment volumineuse.

Créez assets/js/load-mermaid.js. Ce processus est utilisé pour initialiser et redessiner dynamiquement lorsque le thème est modifié.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


(function(window){
'use strict'

 const elementCode = '.mermaid'
 const loadMermaid = function(theme) {
 window.mermaid.initialize({theme})
 window.mermaid.init({theme}, document.querySelectorAll(elementCode))
 }
 const saveOriginalData = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 element.setAttribute('data-original-code', element.innerHTML)
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }
 const resetProcessed = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 if(element.getAttribute('data-original-code') != null){
 element.removeAttribute('data-processed')
 element.innerHTML = element.getAttribute('data-original-code')
 }
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }

 const init = ()=>{
 saveOriginalData()
 .catch( console.error )
 document.body.addEventListener('dark-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('dark'))
 .catch(console.error)
 })
 document.body.addEventListener('light-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('default'))
 .catch(console.error)
 })
 }
 window.initMermaid = init
})(window);

Le code de base pour cela a été référencé à partir de ce qui suit :

Reinitialize with new theme #1945

Modifiez le processus lors du changement de thèmes dans header.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function switchTheme(theme) {
 switch (theme) {
 case 'light':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('light-theme-set'));
{{ end }}
 document.body.classList.remove('dark');
 break;
 case 'dark':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 break;
 // auto
 default:
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 }
 }
}

Créez layouts/shortcodes/mermaid.html

1
2
3


<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
 {{ safeHTML .Inner }}
</div>

Avec les étapes ci-dessus, la préparation pour utiliser mermaid.js est terminée.

Essayer mermaid.js

Ajoutez ce qui suit à la définition de l’article

1

marmaid: true

Ajoutez ce qui suit au corps de l’article

Organigramme

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Début] -->|Condition 1| B(Condition 2)
 B --> C{Condition 3}
 C -->|Condition 4| D[Fin]
{{</mermaid>}}

Résultat de la sortie

graph TD A[Début] -->|Condition 1| B(Condition 2) B --> C{Condition 3} C -->|Condition 4| D[Fin]

Diagramme de Gantt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{<mermaid align="center">}}
gantt
 section Project
 Définition des exigences :done, a, 2024-05-25, 5d
 Conception de base :done, b, after a, 5d
 Conception détaillée :done, c, after b, 5d
 Fabrication :active, d, after c, 10d
 Test unitaire :crit, e, after d, 5d
 Test d'intégration : f, after e, 5d
 Test système : g, after f, 5d
 Version :milestone, h, after g, 1d
{{</mermaid>}}

Résultat de la sortie

gantt section Project Définition des exigences :done, a, 2024-05-25, 5d Conception de base :done, b, after a, 5d Conception détaillée :done, c, after b, 5d Fabrication :active, d, after c, 10d Test unitaire :crit, e, after d, 5d Test d'intégration : f, after e, 5d Test système : g, after f, 5d Version :milestone, h, after g, 1d

Diagramme de séquence

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{<mermaid align="center">}}
sequenceDiagram
 participant user
 participant view
 participant controller
 participant model
 participant database
 user->>view: Entrer ID/PW
 view->>controller: Demande d'authentification
 controller->>model: Demande d'authentification
 model->>database: Demande d'authentification
 database-->>model: Renvoyer le résultat de l'authentification
 model-->>controller: Renvoyer le résultat de l'authentification
 controller-->>view: Renvoyer le résultat de l'authentification
 view-->>user: Afficher le résultat de l'authentification
{{</mermaid>}}

Résultat de la sortie

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Entrer ID/PW view->>controller: requête ajax controller->>model: Demande d'authentification model->>database: Émission de SQL database-->>model: Renvoyer le résultat SQL model-->>controller: Renvoyer le résultat de la demande controller-->>view: Renvoyer le résultat de la requête ajax view-->>user: Afficher le résultat de l'authentification

C’est tout.

Mermaid.js on kenji.blog

Essayer mermaid.js

Qu’est-ce que mermaid.js

Activer mermaid.js dans hugo

Essayer mermaid.js

Références