Essayer mermaid.js

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.

Qu’est-ce que mermaid.js

Activer mermaid.js dans hugo

Essayer mermaid.js

Références