Mencoba mermaid.js

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

Apa itu mermaid.js

mermaid.js adalah pustaka JavaScript yang memungkinkan Anda menulis sintaks khusus berbasis teks (Sintaks Mermaid) untuk menampilkan diagram kompleks secara grafis, seperti diagram alur, grafik, dan diagram Gantt. Ini juga digunakan di berbagai layanan seperti GitHub, Qiita, dan Notion. Kali ini, kita akan mencoba mengaktifkan penggunaan mermaid.js di hugo.

Mengaktifkan mermaid.js di hugo

Langkah-langkahnya adalah sebagai berikut:

Tambahkan yang berikut ini ke 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 hanya dimuat jika mermaid: true pada pernyataan if. Pustaka ini cukup besar, sekitar 3MB.

Buat assets/js/load-mermaid.js. Proses ini digunakan untuk inisialisasi dan menggambar ulang saat tema dialihkan secara dinamis.

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

Kode asli didasarkan pada yang berikut ini:

Reinitialize with new theme #1945

Ubah proses pengalihan tema di 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');
 }
 }
}

Buat layouts/shortcodes/mermaid.html

1
2
3


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

Sekarang mermaid.js siap digunakan.

Menggunakan mermaid.js

Tambahkan yang berikut ini ke definisi artikel

1

marmaid: true

Tambahkan yang berikut ini ke isi artikel

Diagram Alur

1
2
3
4
5
6


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

Hasil

graph TD A[Mulai] -->|Kondisi 1| B(Kondisi 2) B --> C{Kondisi 3} C -->|Kondisi 4| D[Selesai]

Diagram Gantt

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


{{<mermaid align="center">}}
gantt
 section Project
 Definisi Persyaratan :done, a, 2024-05-25, 5d
 Desain Dasar :done, b, after a, 5d
 Desain Detail :done, c, after b, 5d
 Pembuatan :active, d, after c, 10d
 Pengujian Unit :crit, e, after d, 5d
 Pengujian Integrasi : f, after e, 5d
 Pengujian Sistem : g, after f, 5d
 Rilis :milestone, h, after g, 1d
{{</mermaid>}}

Hasil

gantt section Project Definisi Persyaratan :done, a, 2024-05-25, 5d Desain Dasar :done, b, after a, 5d Desain Detail :done, c, after b, 5d Pembuatan :active, d, after c, 10d Pengujian Unit :crit, e, after d, 5d Pengujian Integrasi : f, after e, 5d Pengujian Sistem : g, after f, 5d Rilis :milestone, h, after g, 1d

Diagram Urutan

 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: Masukkan ID/PW
 view->>controller: Permintaan Autentikasi
 controller->>model: Permintaan Autentikasi
 model->>database: Permintaan Autentikasi
 database-->>model: Kembalikan Hasil
 model-->>controller: Kembalikan Hasil
 controller-->>view: Kembalikan Hasil
 view-->>user: Tampilkan Hasil
{{</mermaid>}}

Hasil

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Masukkan ID/PW view->>controller: Kueri ajax controller->>model: Permintaan Autentikasi model->>database: Terbitkan SQL database-->>model: Kembalikan Hasil SQL model-->>controller: Kembalikan Hasil Permintaan Autentikasi controller-->>view: Kembalikan Hasil Kueri ajax view-->>user: Tampilkan Hasil Autentikasi

Itu saja.

Mermaid.js on kenji.blog

Mencoba mermaid.js

Apa itu mermaid.js

Mengaktifkan mermaid.js di hugo

Menggunakan mermaid.js

Referensi