mermaid.js ausprobieren

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

Was ist mermaid.js

mermaid.js ist eine JavaScript-Bibliothek, mit der Sie komplexe Diagramme wie Flussdiagramme, Diagramme und Gantt-Diagramme grafisch darstellen können, indem Sie eine textbasierte Original-Syntax (Mermaid-Syntax) schreiben. Es wird auch in verschiedenen Diensten wie GitHub, Qiita und Notion übernommen. Dieses Mal werden wir versuchen, mermaid.js in hugo zu verwenden.

mermaid.js in hugo aktivieren

Die Schritte sind wie folgt:

Fügen Sie Folgendes in layouts/partials/extend_footer.html hinzu.

 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 wird nur geladen, wenn mermaid: true in der if-Anweisung festgelegt ist. Diese Bibliothek ist etwa 3 MB groß und überraschend groß.

Erstellen Sie assets/js/load-mermaid.js. Dieser Prozess wird zum Initialisieren und dynamischen Neuzeichnen verwendet, wenn das Thema geändert wird.

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

Der Basiscode dafür wurde aus Folgendem referenziert:

Reinitialize with new theme #1945

Ändern Sie den Prozess beim Ändern von Themen in 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');
 }
 }
}

Erstellen Sie layouts/shortcodes/mermaid.html

1
2
3


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

Mit den obigen Schritten ist die Vorbereitung zur Verwendung von mermaid.js abgeschlossen.

mermaid.js ausprobieren

Fügen Sie Folgendes zur Artikeldefinition hinzu

1

marmaid: true

Fügen Sie Folgendes zum Artikeltext hinzu

Flussdiagramm

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Start] -->|Bedingung 1| B(Bedingung 2)
 B --> C{Bedingung 3}
 C -->|Bedingung 4| D[Ende]
{{</mermaid>}}

Ausgabeergebnis

graph TD A[Start] -->|Bedingung 1| B(Bedingung 2) B --> C{Bedingung 3} C -->|Bedingung 4| D[Ende]

Gantt-Diagramm

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


{{<mermaid align="center">}}
gantt
 section Project
 Anforderungsdefinition :done, a, 2024-05-25, 5d
 Basisdesign :done, b, after a, 5d
 Detailliertes Design :done, c, after b, 5d
 Herstellung :active, d, after c, 10d
 Komponententest :crit, e, after d, 5d
 Integrationstest : f, after e, 5d
 Systemtest : g, after f, 5d
 Veröffentlichung :milestone, h, after g, 1d
{{</mermaid>}}

Ausgabeergebnis

gantt section Project Anforderungsdefinition :done, a, 2024-05-25, 5d Basisdesign :done, b, after a, 5d Detailliertes Design :done, c, after b, 5d Herstellung :active, d, after c, 10d Komponententest :crit, e, after d, 5d Integrationstest : f, after e, 5d Systemtest : g, after f, 5d Veröffentlichung :milestone, h, after g, 1d

Sequenzdiagramm

 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: ID/PW eingeben
 view->>controller: Authentifizierungsanforderung
 controller->>model: Authentifizierungsanforderung
 model->>database: Authentifizierungsanforderung
 database-->>model: Authentifizierungsergebnis zurückgeben
 model-->>controller: Authentifizierungsergebnis zurückgeben
 controller-->>view: Authentifizierungsergebnis zurückgeben
 view-->>user: Authentifizierungsergebnis anzeigen
{{</mermaid>}}

Ausgabeergebnis

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: ID/PW eingeben view->>controller: Ajax-Abfrage controller->>model: Authentifizierungsanforderung model->>database: SQL-Ausgabe database-->>model: SQL-Ergebnis zurückgeben model-->>controller: Anforderungsergebnis zurückgeben controller-->>view: Ajax-Abfrageergebnis zurückgeben view-->>user: Authentifizierungsergebnis anzeigen

Das ist alles.

Mermaid.js on kenji.blog

mermaid.js ausprobieren

Was ist mermaid.js

mermaid.js in hugo aktivieren

mermaid.js ausprobieren

Referenzen