Mermaid.js डायग्रामों की संपूर्ण गाइड

Mermaid.js क्या है?

Mermaid.js क्यों उपयोग करें?

• वर्ज़न कंट्रोल: डायग्राम टेक्स्ट फ़ाइलें हैं, इसलिए उन्हें आपके कोड के साथ Git में ट्रैक किया जा सकता है
• त्वरित अपडेट: पूरे डायग्राम फिर से बनाने की बजाय कुछ पंक्तियाँ बदलें
• संगति: Mermaid लेआउट और स्टाइलिंग को स्वतः संभालता है, जिससे सुसंगत डायग्राम बनते हैं
• डिज़ाइन टूल्स की जरूरत नहीं: Visio, Lucidchart या अन्य महंगे टूल्स की आवश्यकता नहीं
• कोड के रूप में दस्तावेज़ीकरण: डायग्रामों को अपने दस्तावेज़ों के उसी रिपॉज़िटरी में रखें
• क्रॉस‑प्लैटफॉर्म: ब्राउज़र और Node.js में चलता है और कई प्लेटफ़ॉर्म के साथ एकीकृत होता है
• मुफ़्त और ओपन‑सोर्स: कोई लाइसेंस लागत नहीं, सक्रिय समुदाय
• कई प्रकार के डायग्राम: फ्लोचार्ट, सीक्वेंस, क्लास डायग्राम आदि का समर्थन

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

Mermaid विभिन्न दस्तावेज़ीकरण जरूरतों के लिए कई प्रकार के डायग्राम सपोर्ट करता है:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Alternative]
    C --> E[End]
    D --> E

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request data
    API->>DB: Query
    DB-->>API: Results
    API-->>User: Response

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: Start
    Loading --> Success: Complete
    Loading --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        int id
        string name
        string email
    }

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Design :a1, 2024-01-01, 30d
    Development :a2, after a1, 45d

pie title Distribution
    "Category A" : 42
    "Category B" : 30
    "Category C" : 28

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop

Mermaid के साथ शुरुआत

सर्वोत्तम अभ्यास

• डायग्राम को एक ही अवधारणा या वर्कफ़्लो पर केंद्रित रखें
• ऐसे अर्थपूर्ण लेबल उपयोग करें जो वास्तविक व्यवसायिक तर्क को दर्शाएँ
• जटिल डायग्रामों को छोटे, परस्पर जुड़े डायग्रामों में विभाजित करें
• जटिल हिस्सों को समझाने के लिए %% के साथ टिप्पणियाँ जोड़ें
• अपने डायग्रामों में समान नामकरण परंपराएँ रखें
• अंतिम करने से पहले लक्ष्य वातावरण में डायग्रामों का परीक्षण करें
• आवश्यक होने पर लेआउट नियंत्रित करने के लिए दिशा संकेत (TD, LR) शामिल करें
• फ्लोचार्ट में संबंधित नोड्स को समूहित करने के लिए subgraph का उपयोग करें
• पठनीयता बनाए रखने के लिए स्टाइलिंग विकल्पों का संयमित उपयोग करें
• अपने डायग्राम स्रोत फ़ाइलों को अपने कोड के साथ संस्करण नियंत्रण में रखें

सामान्य उपयोग‑केस

अतिरिक्त संसाधन

• आधिकारिक Mermaid दस्तावेज़ीकरण
• Mermaid GitHub रिपॉज़िटरी
• Mermaid सिंटैक्स संदर्भ