# htmx के साथ Mermaid जोड़ रहा है

<!--category-- HTMX, Markdown -->
<datetime class="hidden">2024-08-02T20:00</datetime>

## परिचय

मेरमिड एक सरल चित्रण प्रारूप है, जो पाठ लेता है-आधारित इनपुट और SVG प्रारूप में चित्र उत्पन्न करता है।
जलपरी साइट है [यहाँ](https://mermaid.js.org/) और बहुत अधिक जानकारी है जो मैं यहाँ प्रदान कर सकता हूँ से

[TOC]

## मार्कडाउन और मरमीड

मरमीड चित्र निम्नलिखित वाक्य संरचना का उपयोग करके अपने मार्क डाउन फ़ाइलों में शामिल किया जा सकता है

<pre>
# 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
```
</pre>
यह आपको अपने मार्क डाउन फ़ाइलों में सीधे मरमीड चित्र शामिल करने की अनुमति देता है।

```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
```

आप भी सामान्य html फ़ाइलों में मरमीड चित्र जोड़ सकते हैं निम्नलिखित वाक्य संरचना का उपयोग करके

```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 title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```

फ्लोcharts
प्रवाह चार्ट दिशा निर्दिष्ट कर सकते हैं

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

अनुक्रम रेखाचित्र

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

गान्ट चार्ट

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

-समूह सम्बन्ध रेखाचित्र

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

उपयोगकर्ता यात्रा रेखाचित्र

```mermaid
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 के साथ बना सकते हैं [यहाँ](https://mermaid.js.org/syntax/examples.html)

## जलपरी और htmx के साथ आरंभ करना

सबसे पहले आप अपने एचटीएमएल फ़ाइल में मरमीड लाइब्रेरी को शामिल करने की जरूरत है

```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js
"></script>
```

आपके अगले में _सजावट.cshtml फ़ाइल आप Mermaid आरंभ करने के लिए निम्नलिखित स्क्रिप्ट टैग जोड़ने की जरूरत है

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

</script>
```

यह दो बातें करता है

1. यह जलपरी को प्रारंभ करता है जब पृष्ठ लोड होता है; तो यदि आप सीधे जलपरी चित्र के साथ एक पृष्ठ पर नेविगेट करें [/blog/mermaidandhtmx](/blog/mermaidandhtmx) यह सही रेंडर करेगा
2. अगर आप htmx का उपयोग हमारे [पिछला अभ्यास](/blog/htmxwithaspnetcore) यह पृष्ठ अद्यतन किए जाने के बाद मेरसिड चित्र को पुनः प्रदान करेगा