Back to "htmx के साथ Mermaid जोड़ रहा है"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

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

<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) यह पृष्ठ अद्यतन किए जाने के बाद मेरसिड चित्र को पुनः प्रदान करेगा

This is a preview from the server running through my markdig pipeline

HTMX Markdown

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

Friday, 02 August 2024

परिचय

मेरमिड एक सरल चित्रण प्रारूप है, जो पाठ लेता है-आधारित इनपुट और SVG प्रारूप में चित्र उत्पन्न करता है। जलपरी साइट है यहाँ और बहुत अधिक जानकारी है जो मैं यहाँ प्रदान कर सकता हूँ से

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

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

यह आपको अपने मार्क डाउन फ़ाइलों में सीधे मरमीड चित्र शामिल करने की अनुमति देता है।

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

जलपरी चित्रों के उदाहरण

मरमीड एक शक्तिशाली उपकरण है जो आपको सरल पाठ के उपयोग से चित्रों का एक विस्तृत दायरा बनाने देता है यहाँ कुछ उदाहरण हैं जो आप के साथ बनाए जा सकते है रेखाचित्र प्रकार

पीए चार्ट्स

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

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

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!

गान्ट चार्ट

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 के साथ आरंभ करना

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

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

</script>

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

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