تجربة mermaid.js

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

ما هو mermaid.js

mermaid.js هي مكتبة JavaScript تتيح لك كتابة بنية مخصصة تعتمد على النص (صيغة Mermaid) لعرض المخططات المعقدة رسومياً مثل المخططات الانسيابية والرسوم البيانية ومخططات جانت. يتم استخدامها أيضاً في خدمات مختلفة مثل GitHub و Qiita و Notion. في هذه المرة، سنحاول تمكين استخدام mermaid.js في hugo.

تمكين استخدام mermaid.js في hugo

الخطوات كالتالي:

أضف التالي إلى 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 فقط إذا كان mermaid: true في عبارة if. هذه المكتبة كبيرة نوعاً ما، حوالي 3 ميغابايت.

قم بإنشاء assets/js/load-mermaid.js. يتم استخدام هذه العملية للتهيئة وإعادة الرسم عند تبديل السمة ديناميكياً.

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

تمت الإشارة إلى الكود الأصلي هنا:

Reinitialize with new theme #1945

قم بتعديل عملية تبديل السمة في 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');
 }
 }
}

قم بإنشاء layouts/shortcodes/mermaid.html

1
2
3


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

الآن أصبح mermaid.js جاهزاً للاستخدام.

استخدام mermaid.js

أضف التالي إلى تعريف المقالة

1

marmaid: true

أضف التالي إلى نص المقالة

المخطط الانسيابي

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[البداية] -->|الشرط 1| B(الشرط 2)
 B --> C{الشرط 3}
 C -->|الشرط 4| D[النهاية]
{{</mermaid>}}

النتيجة

graph TD A[البداية] -->|الشرط 1| B(الشرط 2) B --> C{الشرط 3} C -->|الشرط 4| D[النهاية]

مخطط جانت

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


{{<mermaid align="center">}}
gantt
 section Project
 تحديد المتطلبات :done, a, 2024-05-25, 5d
 التصميم الأساسي :done, b, after a, 5d
 التصميم التفصيلي :done, c, after b, 5d
 التصنيع :active, d, after c, 10d
 اختبار الوحدة :crit, e, after d, 5d
 اختبار التكامل : f, after e, 5d
 الاختبار الشامل : g, after f, 5d
 الإصدار :milestone, h, after g, 1d
{{</mermaid>}}

النتيجة

gantt section Project تحديد المتطلبات :done, a, 2024-05-25, 5d التصميم الأساسي :done, b, after a, 5d التصميم التفصيلي :done, c, after b, 5d التصنيع :active, d, after c, 10d اختبار الوحدة :crit, e, after d, 5d اختبار التكامل : f, after e, 5d الاختبار الشامل : g, after f, 5d الإصدار :milestone, h, after g, 1d

مخطط التسلسل

 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: إدخال المعرف/كلمة المرور
 view->>controller: طلب المصادقة
 controller->>model: طلب المصادقة
 model->>database: طلب المصادقة
 database-->>model: إرجاع نتيجة المصادقة
 model-->>controller: إرجاع نتيجة المصادقة
 controller-->>view: إرجاع نتيجة المصادقة
 view-->>user: عرض نتيجة المصادقة
{{</mermaid>}}

النتيجة

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: إدخال المعرف/كلمة المرور view->>controller: استعلام ajax controller->>model: طلب المصادقة model->>database: إصدار SQL database-->>model: إرجاع نتيجة SQL model-->>controller: إرجاع نتيجة طلب المصادقة controller-->>view: إرجاع نتيجة استعلام ajax view-->>user: عرض نتيجة المصادقة

هذا كل شيء.

Mermaid.js on kenji.blog

تجربة mermaid.js

ما هو mermaid.js

تمكين استخدام mermaid.js في hugo

استخدام mermaid.js

المراجع