Mermaid डायग्राम

अपने Markdown में जटिल विचारों को स्पष्ट विज़ुअल डायग्राम में बदलें। Moraya 9 Mermaid डायग्राम प्रकारों का समर्थन करता है — रियल-टाइम पूर्वावलोकन, इष्टतम प्रदर्शन के लिए आलसी-लोडेड रेंडरिंग, और स्वचालित लाइट/डार्क थीम अनुकूलन के साथ।

समर्थित डायग्राम प्रकार

1. फ्लोचार्ट

प्रक्रियाओं, निर्णय वृक्षों और वर्कफ़्लो को दिशात्मक ग्राफ़ से मॉडल करें।

graph TD
    Start([ब्रूइंग शुरू]) --> CheckCup{कप मिला?}
    CheckCup -- No --> Alert[कृपया कप रखें]
    Alert --> CheckCup
    CheckCup -- Yes --> Choose[पेय चुनें]

    Choose --> Type{पेय प्रकार}
    Type -- एस्प्रेसो --> Brew[उच्च दबाव निष्कर्षण]
    Type -- लट्टे/कैपुचीनो --> Milk[दूध गरम करें और फेंटें]

    Milk --> Brew
    Brew --> Quality{दबाव सामान्य?}
    Quality -- असामान्य --> Error[रुकें और चेतावनी]
    Quality -- सामान्य --> Pour[कप में डालें]

    Pour --> Finish([ब्रूइंग पूर्ण])

2. अनुक्रम डायग्राम

समय के साथ सिस्टम, सेवाओं और एक्टर्स के बीच की इंटरैक्शन को विज़ुअलाइज़ करें।

sequenceDiagram
    autonumber
    participant App as मोबाइल ऐप
    participant Cloud as क्लाउड सर्वर
    participant Lock as स्मार्ट लॉक

    App->>Cloud: अनलॉक अनुरोध भेजें (एन्क्रिप्टेड टोकन)
    Note over Cloud: टोकन वैधता सत्यापित करें

    alt सत्यापन सफल
        Cloud->>Lock: अनलॉक कमांड भेजें (MQTT)
        Lock->>Lock: मोटर घूमता है
        Lock-->>Cloud: स्थिति: अनलॉक
        Cloud-->>App: सूचना: दरवाज़ा खुला
    else टोकन समाप्त
        Cloud-->>App: त्रुटि: सत्र समाप्त
    end

3. गैंट चार्ट

समयरेखाओं, मील के पत्थरों और परियोजना कार्यक्रमों की योजना बनाएं।

gantt
    title 2026 मई छुट्टी सड़क यात्रा योजना
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d

    section तैयारी
    मार्ग नियोजन           :done,    p1, 2026-04-20, 3d
    वाहन रखरखाव           :active,  p2, 2026-04-23, 2d
    आउटडोर उपकरण खरीदारी  :         p3, after p2, 3d

    section सड़क यात्रा
    चेंगदू - कांगडिंग      :milestone, m1, 2026-05-01, 0d
    झेदुओ पर्वत फोटोग्राफी :         t1, 2026-05-01, 1d
    शिनदूक्यो भ्रमण        :         t2, after t1, 2d
    दाओचेंग यादिंग ट्रैकिंग :crit,    t3, 2026-05-04, 3d

4. स्टेट डायग्राम

स्टेट मशीन और जीवनचक्र संक्रमणों का मानचित्रण करें।

stateDiagram-v2
    [*] --> Draft: ड्राफ्ट बनाएं
    Draft --> Pending: समीक्षा के लिए भेजें
    Pending --> Draft: अस्वीकृत
    Pending --> Published: स्वीकृत
    Published --> Hidden: ऑफ़लाइन करें
    Hidden --> Published: पुनः प्रकाशित
    Published --> Deleted: हटाएं
    Hidden --> Deleted: हटाएं
    Deleted --> [*]

5. क्लास डायग्राम

ऑब्जेक्ट-ओरिएंटेड संरचनाओं और संबंधों को डिज़ाइन करें।

classDiagram
    class Character {
        +String name
        +int level
        +move()
        +attack()
    }
    class Warrior {
        +int stamina
        +shieldBash()
    }
    class Mage {
        +int mana
        +fireBall()
    }
    class Weapon {
        +int damage
        +upgrade()
    }

    Character <|-- Warrior : वंशानुक्रम
    Character <|-- Mage : वंशानुक्रम
    Character "1" *-- "1" Weapon : उपकरण संयोजन

6. ER डायग्राम

डेटाबेस एंटिटी और उनके संबंधों को मॉडल करें।

erDiagram
    MEMBER ||--o{ ORDER : "भुगतान करता है"
    COACH ||--o{ COURSE : "पढ़ाता है"
    MEMBER }|--|{ COURSE : "बुक करता है"

    MEMBER {
        int member_id PK
        string name
        string phone
    }
    COURSE {
        int course_id PK
        string title
        datetime start_time
    }
    ORDER {
        int order_id PK
        float amount
    }

7. पाई चार्ट

अनुपातिक डेटा को एक नज़र में प्रदर्शित करें।

pie title शीर्ष एंटरप्राइज़ प्रोग्रामिंग भाषाएँ 2026
    "Java" : 30
    "Go" : 25
    "Python" : 20
    "Rust" : 15
    "TypeScript" : 10

8. माइंड मैप

विचारों और ज्ञान को पदानुक्रमिक रूप से व्यवस्थित करें।

mindmap
  root((व्यक्तिगत ज्ञान आधार))
    इनपुट
      पुस्तक नोट्स
      पॉडकास्ट अंश
      वेब क्लिपिंग
    आंतरिकीकरण
      ज़ेटेलकास्टन विधि
      द्विदिशात्मक लिंक
      दैनिक समीक्षा
    आउटपुट
      तकनीकी ब्लॉग
      ओपन सोर्स प्रोजेक्ट
      ज्ञान पाठ्यक्रम

9. यूज़र जर्नी

विभिन्न चरणों में उपयोगकर्ता अनुभवों और भावनात्मक स्थितियों का मानचित्रण करें।

journey
    title शून्य से Python सीखना
    section अन्वेषण
      परिचय वीडियो देखें: 5: उत्साहित
      डेव वातावरण सेट करें: 2: निराश
    section सीखना
      पहला Hello World लिखें: 5: गौरव
      लूप और फंक्शन समझें: 4: संतुष्ट
      डीबगिंग त्रुटियाँ आएं: 1: निराशा
    section अनुप्रयोग
      पहला वेब स्क्रैपर बनाएं: 5: उत्साह
      प्रमाणपत्र अर्जित करें: 5: संतुष्ट

संपादन/पूर्वावलोकन दोहरा मोड

Moraya में प्रत्येक Mermaid कोड ब्लॉक दो इंटरैक्शन मोड प्रदान करता है:

• पूर्वावलोकन मोड —— डायग्राम पर क्लिक करके रेंडर किया गया आउटपुट देखें, ज़ूम और पैन के साथ
• संपादन मोड —— पेंसिल आइकन पर क्लिक करके सीधे Mermaid सोर्स कोड संपादित करें

अपने दस्तावेज़ को छोड़े बिना दोनों मोड के बीच तुरंत स्विच करें।

थीम अनुकूलन

Mermaid डायग्राम स्वचालित रूप से आपकी वर्तमान थीम के अनुसार अनुकूलित होते हैं — लाइट मोड के लिए हल्की पृष्ठभूमि, डार्क मोड के लिए गहरी पृष्ठभूमि। किसी मैनुअल कॉन्फ़िगरेशन की आवश्यकता नहीं है।

आलसी-लोडेड रेंडरिंग

Mermaid मांग पर लोड होता है — केवल तभी जब आपके दस्तावेज़ में Mermaid कोड ब्लॉक हो। यह Moraya के तत्काल स्टार्टअप और न्यूनतम मेमोरी उपयोग को सुनिश्चित करता है।