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.

Referensi

Cara Menerapkan Mosaik pada Bagian Tertentu dari Gambar di paint.net

Tue, 11 Apr 2023 16:33:10 +0900

Artikel ini akan menunjukkan cara menerapkan mosaik pada bagian tertentu dari gambar menggunakan paint.net.

Saat mengunggah gambar ke internet, Anda mungkin ingin menyembunyikan bagian tertentu dengan mosaik. Dengan menggunakan paint.net, Anda dapat mengedit gambar dengan sangat cepat.

Langkah-langkah

1. Buka gambar yang ingin Anda beri mosaik di paint.net

2. Gunakan alat seleksi untuk memilih bagian yang ingin diberi mosaik (bisa memilih lebih dari satu area)

Ukuran sel menentukan tingkat kekasaran mosaik. Semakin tinggi angkanya, semakin tinggi tingkat penyembunyiannya.
[Perkecil] Pilih Bilinear (Multisampling)
[Perbesar] Pilih Nearest Neighbor

Klik OK untuk menutup dialog.

4. Setelah mosaik diterapkan pada gambar, simpan gambarnya.

Selesai.

Cara menambahkan batas pada gambar menggunakan paint.net

Tue, 11 Apr 2023 14:31:59 +0900

Saya akan menunjukkan cara menambahkan batas pada gambar menggunakan paint.net.

Langkah-langkah

1. Buka gambar yang ingin Anda tambahkan batas di paint.net

2. Atur warna sekunder (ini akan menjadi warna batas)

Jika palet warna tidak ditampilkan, tekan tombol F8 di keyboard Anda.

Untuk mengaturnya ke hitam, klik .

Tingkatkan lebar dan tinggi masing-masing sebesar 2 piksel. Peningkatan 2 piksel berarti batas akan menjadi 1 piksel. Jika Anda ingin batas menjadi 5 piksel, tingkatkan lebar dan tinggi masing-masing sebesar 10 piksel.

Pilih jangkar “Tengah”, lalu klik OK.

4. Batas akan ditambahkan ke gambar, jadi simpan gambar tersebut.

Selesai.

AI Dan Teknologi on kenji.blog

Mencoba mermaid.js

Apa itu mermaid.js

Mengaktifkan mermaid.js di hugo

Menggunakan mermaid.js

Referensi

Cara Menerapkan Mosaik pada Bagian Tertentu dari Gambar di paint.net

Langkah-langkah

1. Buka gambar yang ingin Anda beri mosaik di paint.net

2. Gunakan alat seleksi untuk memilih bagian yang ingin diberi mosaik (bisa memilih lebih dari satu area)

3. Pilih menu: Efek (Effects) > Distorsi (Distort) > Mosaik (Pixelate)

4. Setelah mosaik diterapkan pada gambar, simpan gambarnya.

Cara menambahkan batas pada gambar menggunakan paint.net

Langkah-langkah

1. Buka gambar yang ingin Anda tambahkan batas di paint.net

2. Atur warna sekunder (ini akan menjadi warna batas)

3. Menu > Gambar > Pilih Ubah Ukuran Kanvas

4. Batas akan ditambahkan ke gambar, jadi simpan gambar tersebut.