Mencoba mermaid.js

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.

Apa itu mermaid.js

Mengaktifkan mermaid.js di hugo

Menggunakan mermaid.js

Referensi