المقدمة

Mermaid هو نموذج رسم بياني بسيط يأخذ المدخلات التي تعتمد على النص- وينتج الرسوم البيانية في صيغة SVG. إنه أداة عظيمة لصنع خرائط التدفقM SK2 رسوم مخططات التسلسل , رسوم GanttMSC4 وهلم جراMNK5 في هذا الدروس الدراسيMST6 سنستكشف كيف نستخدم Mermaid مع htmx لخلق الرسوم المتحركة المتفاعلة التي تتحديث ديناميكياً دون إعادة شحن الصفحات موقع حورية البحر هو هنا و لديه معلومات أكثر بكثير مما يمكن أن أقدمه هنا.

ماركدون و حورية البحر

يمكن أن تكون رسومات حورية البحر مضمنة في ملفاتك الخاصة باستخدام الصيغة التالية:

# My Markdown Title
```mermaid
graph LR
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
```

هذا يسمح لك بدمج رسومات حورية البحر مباشرة في فايلك الملاحظة, التي ستظهر كصور SVG عندما يتم تحويلها إلى HTML.

graph LR
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E

يمكنك أيضاً إضافة رسومات حورية البحر إلى فايل HTML عادية باستخدام الصيغة التالية:

<pre class="mermaid">
    graph TD
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
</pre>

أمثلة لرسمات حورية البحر

سمكة البحر هي أداة قوية تسمح لك ببناء مجموعة واسعة من الرسوم البيانية باستخدام النص البسيط هنا بعض الأمثلة على أنواع الخرائط التي يمكن أن تصنعها مع Mermaid

-خرائط Pie:

pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10

-خرائط التدفق: الرسوم البيانية يمكن أن تحدد المسار , eM SK1g. LR (left to rightMSC4 RL | (right to left |), TB ♫(top to bottom |

flowchart LR
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

-رسومات السلسلة:

sequenceDiagram 
    participant A
    participant B
    A->>B: Hi B, how are you?
    B-->>A: Fine, thanks!

-خرائط Gant:

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-08-01, 30d
    Another task     :after a1  , 20d

-مخططات علاقات الكيان

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

-مخططات السفر المستخدمة:

journey
    title My working day
    section Go to work
        Make tea: 5: Me
        Go upstairs: 15: Me
        Do work: 60: Me
    section Go home
        Go downstairs: 15: Me
        Sit down: 5: Me

etc...انظروا إلى هذه الصفحة لالمزيد من المخططات MYRIAD التي يمكن أن تصنعها مع Mermaid هنا

بداية مع حورية البحر htmx

أولاً تحتاج إلى دمج مكتبة حورية البحر في ملف HTML الخاص بك. يمكنك فعل ذلك عن طريق إضافة الرمز النصي التالي إلى दस्तावेजك:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
"></script>

التالي في _Layout.cshtml file you need to add the following script tag to initialize Mermaid (you normally do this at the bottom of the file)

<script>
    document.addEventListener('DOMContentLoaded', function () {
        mermaid.initialize({ startOnLoad: true });
    });
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        mermaid.run();
        
    });

</script>

هذا يفعل شيئين

1. إنها تبدؤ بحر البحر عند ផ្ទុក الصفحة ; لذا إذا كنت تتصفح صفحة مباشرة مع رسم بحر البحر (e.gM SK3 /blog/mermaidandhtmx ) سوف ينتج بشكل صحيح.
2. إذا كنت تستخدم htmx كما في الدرس السابق سوف يعيد - رسم البحر بعد تحديث الصفحة ( و "htmx" و: حدث "afterswap"