परिचय

मेरमिड एक सरल चित्रण प्रारूप है, जो पाठ लेता है-आधारित इनपुट और 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

आप भी सामान्य 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>

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

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

पीए चार्ट्स

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>

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

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

</script>

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

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