# मरमीड.js Deep Dive: यह वास्तव में काम करता है और कैसे इसे विस्तारित करें

<!--category-- Mermaid, JavaScript, SVG, Diagrams -->
<datetime class="hidden">2025-11-09T16:00</datetime>

# परिचय

> नोट: यह मेरे प्रयोगों का हिस्सा है AI के साथ / खर्च करने के लिए एक तरीका है।

> **यह पोस्ट पिछले लेखों पर आधारित है** अगर आप पहले से नहीं कर रहे हैं [htmx के साथ Mermaid जोड़ रहा है](/blog/mermaidandhtmx), [जलपरी के लिए प्रसंग स्विच कर रहा है](/blog/switchingthemesformermaid), और [Pan/Zoom और निर्यात के साथ जलपरी रेखाचित्रों को बढ़ाना](/blog/enhancingmermaiddiagramswithpanzoomandexport). यह गहरी खोज उन क्रियान्वयन के पीछे आंतरिक कारणों को स्पष्ट करता है

Mermaid.js सचमुच शानदार हैMSC1 सरल पाठ लिखें, सुंदर चित्र प्राप्त करेंM SK3 विजिओ के साथ कूदना या चित्र बनाना अब नहीं होगा।

लेकिन मैं जानना चाहता था *कैसे* यह वास्तव मेंhood के नीचे काम करता है

```mermaid
graph LR
    A[Text] --> B[Magic?]
    B --> C[Beautiful Diagram]
```

एक वास्तविक SVG बन जाएँ। [@मोस्टल्युसिड](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements))?

Mermaid के द्वारा बहुत खोजने के बाद-' का स्रोत कोड और असली एक्सटेंशनों को बनाना।

[TOC]

# जलपरी क्या है

जलपरी पाठ परिभाषाओं को चित्रों में बदलता है

**पुराने तरीके से**

1. डायग्रामिंग उपकरण खोलें
2. चित्र बनाएँ
3. पीएनजी के रूप में निर्यात करें
4. डॉक में सम्मिलित करें
5. अद्यतन करने की आवश्यकता? स्रोत फ़ाइल ढूंढें, संपादित करेंM SK2 पुनः करें - निर्यात करें

**The Mermaid way**

1. पाठ में चित्र लिखें
2. किया गया

इसे अद्यतन करें? सिर्फ पाठ को संपादित करें।

## चित्र प्रकार

जलपरी चित्र प्रकार की एक हास्यास्पद संख्या का समर्थन करता है

```mermaid
graph LR
    A[Flowcharts] --> B[Sequence Diagrams]
    B --> C[Class Diagrams]
    C --> D[State Diagrams]
    D --> E[ER Diagrams]
    E --> F[Gantt Charts]
    F --> G[Pie Charts]
    G --> H[Git Graphs]
    H --> I[User Journeys]
    I --> J[And many more...]
```

देखें [मेरमीड डॉक](https://mermaid.js.org/intro/) पूरा सूची के लिए.

# कैसे मरमीड वास्तव में काम करता है

यहाँ क्या होता है जब मरमीड एक चित्र बनाता है

```mermaid
graph TD
    A[Text Definition] --> B[Lexer/Tokenizer]
    B --> C[Parser]
    C --> D[AST Built]
    D --> E[Diagram Type Detected]
    E --> F[Type-Specific Renderer]
    F --> G[SVG Generated]
    G --> H[Inserted into DOM]
    H --> I[Your Enhancements Run]

    style A stroke:#059669,stroke-width:3px,color:#10b981
    style D stroke:#2563eb,stroke-width:3px,color:#3b82f6
    style G stroke:#7c3aed,stroke-width:3px,color:#8b5cf6
    style I stroke:#d97706,stroke-width:3px,color:#f59e0b
```

हर चरण को तोड़ दें

## चरण 1: पाठ परिभाषा

सब कुछ पाठ से आरंभ होता है

```javascript
// Flowchart
const diagram = `
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug time]
`;
```

## चरण 2: शब्दकोश विश्लेषण

लेक्सर पाठ को टोकन में तोड़ता है

```
A[Start] --> B{Decision}
```

जैसे टोकन बनता है:

```javascript
[
    { type: 'NODE_ID', value: 'A' },
    { type: 'NODE_TEXT', value: 'Start' },
    { type: 'ARROW', value: '-->' },
    { type: 'NODE_ID', value: 'B' },
    { type: 'NODE_TEXT', value: 'Decision' },
    { type: 'NODE_SHAPE', value: 'diamond' }  // from { }
]
```

## चरण 3: पार्सिंग और एसटी जेनरेशन

विश्लेषक टोकन को खपत करता है और एक संक्षेप वाक्य संरचना वृक्ष बनाता है

```javascript
// Simplified AST structure
{
    type: 'flowchart',
    direction: 'TD',
    nodes: [
        { id: 'A', text: 'Start', shape: 'rect' },
        { id: 'B', text: 'Decision', shape: 'diamond' }
    ],
    edges: [
        { from: 'A', to: 'B', type: 'arrow' }
    ]
}
```

मरमीड प्रत्येक रेखाचित्र प्रकार के लिए भिन्न पदवर्णक का उपयोग करता है. ये प्रायः व्याकरण फ़ाइलों के प्रयोग से उत्पन्न किए जाते हैं [ज्योन](https://github.com/zaach/jison) जावास्क्रिप्ट के लिए बिजन

## चरण 4: चित्र पता लगाना

पहली पंक्ति से चित्र प्रकार की खोज करता है

```javascript
// Simplified detection logic
if (text.match(/^\s*graph/)) return 'flowchart';
if (text.match(/^\s*sequenceDiagram/)) return 'sequence';
if (text.match(/^\s*classDiagram/)) return 'class';
// ... etc
```

## चरण 5: प्रकार

प्रत्येक चित्र प्रकार का अपना रेंडरर है

फ्लोcharts के लिए, मरमीड का उपयोग करता है [डगरCity name (optional, probably does not need a translation)](https://github.com/dagrejs/dagre) ग्राफ सजावट के लिए लाइब्रेरी

```javascript
// Simplified flowchart renderer
export const draw = function (text, id, version, diagObj) {
    const graph = diagObj.db;  // The AST
    const svg = d3.select(`#${id}`);

    // Render nodes
    graph.getVertices().forEach(vertex => {
        drawNode(svg, vertex);
    });

    // Render edges
    graph.getEdges().forEach(edge => {
        drawEdge(svg, edge);
    });

    // Apply layout algorithm
    dagre.layout(graph);
};
```

## चरण 6: SVG जनन

रेंडरर SVG मार्कअप उत्पन्न करता है

```xml
<svg xmlns="http://www.w3.org/2000/svg">
    <g class="node">
        <rect x="0" y="0" width="100" height="50"/>
        <text x="50" y="25">Start</text>
    </g>
    <g class="edge">
        <path d="M 100 25 L 200 25" stroke="#333"/>
    </g>
</svg>
```

## चरण 7: DOM प्रविष्टि

जलपरी सभी पाता है `.mermaid` तत्वों और उन्हें रेंडरेड SVG के साथ बदलता है

```javascript
// From mermaid.ts
export const init = async function (config, nodes) {
    const nodesToProcess = nodes || document.querySelectorAll('.mermaid');

    for (const node of nodesToProcess) {
        const id = `mermaid-${Date.now()}-${Math.random()}`;
        const txt = node.textContent;

        const { svg } = await render(id, txt);
        node.innerHTML = svg;
    }
};
```

## चरण 8:Post-Processing (Where You Come In

मरमीड SVG लाईने के बाद आप इसे बढ़ा सकते हैं

- Pan/zoom कार्यक्षमता
- नियंत्रण बटन
- निर्यात क्षमताएँ
- प्रसंग स्विचिंग

इसके बारे में अधिक जानकारी नीचे

# विस्तार बिंदुएँ

अब हम जानते हैं कि मरमीड कैसे काम करता है

## 1. विन्यास

सबसे बुनियादी एक्सटेंशन कॉन्फ़िगरेशन है

```javascript
import mermaid from 'mermaid';

mermaid.initialize({
    startOnLoad: true,
    theme: 'dark',
    securityLevel: 'loose',
    flowchart: {
        curve: 'basis',
        padding: 15
    }
});
```

## विषयवस्तु अनुकूलन

मैं इस में व्यापक रूप से शामिल किया [जलपरी के लिए प्रसंग स्विच कर रहा है](/blog/switchingthemesformermaid)0 लेकिन यहाँ' मुख्य कार्यान्वयन है:

### प्रसंग स्विचिंग के साथ समस्या

जलपरी को विषयवस्तु के साथ आरंभ करने की जरूरत है। *DOM में भंडारित नहीं करता*.

### समाधान

रेंडरिंग से पहले मूल सामग्री भंडारित करें, फिर विषयवस्तुओं को स्विच करने के दौरान रेंडर करें और पुनः रिसेट करें

```javascript
// From my theme-switcher implementation
const originalData = new Map();

// Save original content before first render
const saveOriginalData = async () => {
    const elements = document.querySelectorAll('.mermaid');
    elements.forEach(element => {
        const id = element.id || `mermaid-${Date.now()}`;
        element.id = id;

        // Store the original diagram source
        if (!originalData.has(id)) {
            originalData.set(id, element.textContent?.trim());
        }
    });
};

// When theme changes, restore and re-render
const loadMermaid = async (theme) => {
    mermaid.initialize({
        startOnLoad: false,
        theme: theme
    });

    const elements = document.querySelectorAll('.mermaid');
    for (const element of elements) {
        const source = originalData.get(element.id);
        if (source) {
            element.innerHTML = '';  // Clear
            element.removeAttribute('data-processed');

            const { svg } = await mermaid.render(
                `mermaid-svg-${element.id}`,
                source
            );
            element.innerHTML = svg;
        }
    }
};
```

**बहुविध विषयवस्तु खोज विधि** साइटों में विषयवस्तु अलग-अलग हैं

```javascript
function detectTheme() {
    // Check various sources
    if (typeof window.__themeState !== 'undefined') {
        return window.__themeState;
    }
    if (localStorage.theme) {
        return localStorage.theme;
    }
    if (document.documentElement.classList.contains('dark')) {
        return 'dark';
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return 'dark';
    }
    return 'light';
}
```

देखें [पूरा विषयवस्तु स्विचर कोड](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/src/js/memmaid_theme_switch.js) विवरण के लिए.

## 3. Post

यह है जहाँ वास्तविक जादू होता है

मैं इस में व्यापक रूप से शामिल किया [Pan/Zoom और निर्यात के साथ जलपरी रेखाचित्रों को बढ़ाना](/blog/enhancingmermaiddiagramswithpanzoomandexport)तो मैं यहाँ मुख्य तकनीकों को उभारता हूँ

### चित्र लिख रहा है

नियंत्रण के लिए एक wrapper कन्टेनर बनाएँ

```javascript
function wrapDiagram(element) {
    if (element.closest('.mermaid-wrapper')) {
        return element.closest('.mermaid-wrapper');
    }

    const wrapper = document.createElement('div');
    wrapper.className = 'mermaid-wrapper';
    wrapper.id = `wrapper-${element.id}`;

    element.parentNode.insertBefore(wrapper, element);
    wrapper.appendChild(element);

    return wrapper;
}
```

### जोड़ें Pan/Zoom

उपयोग [svg-pan-zoom](https://github.com/bumbu/svg-pan-zoom):

```javascript
import svgPanZoom from 'svg-pan-zoom';

const panZoomInstances = new Map();

function initPanZoom(svgElement, diagramId) {
    // Clean up existing instance
    if (panZoomInstances.has(diagramId)) {
        panZoomInstances.get(diagramId).destroy();
        panZoomInstances.delete(diagramId);
    }

    const instance = svgPanZoom(svgElement, {
        zoomEnabled: true,
        controlIconsEnabled: false,
        fit: true,
        center: true,
        minZoom: 0.1,
        maxZoom: 10
    });

    panZoomInstances.set(diagramId, instance);
    return instance;
}
```

### नियंत्रण बटन

फ्लोटिंग नियंत्रण पटल बनाएँ

```javascript
function createControlButtons(container, diagramId) {
    const controlsDiv = document.createElement('div');
    controlsDiv.className = 'mermaid-controls';

    const buttons = [
        { icon: 'bx-fullscreen', title: 'Fullscreen', action: 'fullscreen' },
        { icon: 'bx-zoom-in', title: 'Zoom In', action: 'zoomIn' },
        { icon: 'bx-zoom-out', title: 'Zoom Out', action: 'zoomOut' },
        { icon: 'bx-reset', title: 'Reset', action: 'reset' },
        { icon: 'bx-move', title: 'Pan', action: 'pan' },
        { icon: 'bx-image', title: 'Export PNG', action: 'exportPng' },
        { icon: 'bx-code-alt', title: 'Export SVG', action: 'exportSvg' }
    ];

    buttons.forEach(btn => {
        const button = document.createElement('button');
        button.className = `mermaid-control-btn bx ${btn.icon}`;
        button.setAttribute('data-action', btn.action);
        button.setAttribute('data-diagram-id', diagramId);
        controlsDiv.appendChild(button);
    });

    container.appendChild(controlsDiv);
}
```

### घटना प्रत्यायोजन

सभी बटनों में श्रोताओं को संलग्न नहीं करें

```javascript
document.addEventListener('click', (e) => {
    const target = e.target;
    if (!target.classList.contains('mermaid-control-btn')) return;

    const action = target.getAttribute('data-action');
    const diagramId = target.getAttribute('data-diagram-id');
    const panZoom = panZoomInstances.get(diagramId);

    switch (action) {
        case 'zoomIn': panZoom?.zoomIn(); break;
        case 'zoomOut': panZoom?.zoomOut(); break;
        case 'reset': panZoom?.reset(); break;
        // ... etc
    }
});
```

### कार्यात्मकता निर्यात करें

**चुनौती** SVG तत्वों में गतिशील साइजिंग है।

1. एसवीजी को क्लोन करें
2. आयामों को सुरक्षित रखें
3. रूपांतरण हटाएँ
4. पीएनजी या एसवीजी में बदलें

उपयोग [html-to-image](https://github.com/bubkoo/html-to-image):

```javascript
import { toPng, toSvg } from 'html-to-image';

async function exportDiagram(container, format, diagramId) {
    const svgElement = container.querySelector('svg');
    if (!svgElement) return;

    // Clone to avoid modifying original
    const clonedSvg = svgElement.cloneNode(true);

    // Get or calculate viewBox
    let viewBox = clonedSvg.getAttribute('viewBox');
    if (!viewBox) {
        const bbox = svgElement.getBBox();
        viewBox = `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`;
        clonedSvg.setAttribute('viewBox', viewBox);
    }

    // Set explicit dimensions
    const [, , width, height] = viewBox.split(' ').map(Number);
    clonedSvg.setAttribute('width', width);
    clonedSvg.setAttribute('height', height);

    // Remove pan-zoom transforms
    clonedSvg.removeAttribute('style');

    // Create off-screen container
    const temp = document.createElement('div');
    temp.style.position = 'absolute';
    temp.style.left = '-9999px';
    temp.appendChild(clonedSvg);
    document.body.appendChild(temp);

    // Export
    const dataUrl = format === 'png'
        ? await toPng(clonedSvg, { pixelRatio: 2 })
        : await toSvg(clonedSvg);

    downloadFile(dataUrl, `diagram-${Date.now()}.${format}`);

    // Cleanup
    document.body.removeChild(temp);
}
```

**महत्वपूर्ण विवरण:**

- **दृश्यबाकस सुरक्षित रखें** - संपूर्ण चित्र को पकड़ता है
- **off-स्क्रीन रेंडरिंग** - प्रदर्शित चित्र को प्रभावित करने से बचें
- **पिक्सेलराatio** सूक्ष्म पीएनजी निर्यात के लिए - उच्च

देखें [पूरा निर्यात कोड](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/src/js/mermaid_enhancements.js#L148) अधिक जानकारी के लिए

# पूर्ण संवर्धन पैकेज

मैं इन सभी वृद्धि के रूप में पैकेज किया [@मोस्टल्युसिड](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements). देखें [एमएनपीएम पैकेज के रूप में मरमीड विस्तार प्रकाशित करना](/blog/publishingmermaidenhancementsnpm) अधिक जानकारी के लिए

यहाँ यह सब एक साथ कैसे फिट करता है

```mermaid
graph TB
    A[User Initializes] --> B[init Function]
    B --> C[initMermaid]
    B --> D[enhanceMermaidDiagrams]

    C --> E[Theme Detection]
    C --> F[Event Listeners]
    C --> G[Mermaid Rendering]

    E --> E1[Global State]
    E --> E2[LocalStorage]
    E --> E3[DOM Class]
    E --> E4[OS Preference]

    F --> F1[Custom Events]
    F --> F2[Media Query]

    G --> H[Apply Enhancements]
    D --> H

    H --> I[Wrap Diagrams]
    H --> J[Init Pan/Zoom]
    H --> K[Add Controls]

    I --> L[Interactive Diagram]
    J --> L
    K --> L

    L --> M[User Interactions]
    M --> M1[Zoom In/Out]
    M --> M2[Pan]
    M --> M3[Fullscreen]
    M --> M4[Export PNG/SVG]

    style A stroke:#059669,stroke-width:3px,color:#10b981
    style L stroke:#2563eb,stroke-width:3px,color:#3b82f6
    style M stroke:#7c3aed,stroke-width:3px,color:#8b5cf6
```

## उपयोग

```bash
npm install @mostlylucid/mermaid-enhancements
```

```typescript
import { init } from '@mostlylucid/mermaid-enhancements';
import '@mostlylucid/mermaid-enhancements/styles.css';

await init();
```

कि यह है ' your Mermaid diagrams now have

- ✅ इंटरैक्टिव पैन
- ✅ पूर्ण स्क्रीन प्रकाश बक्सा
- ✅ PNG
- ✅ स्वचालित प्रसंग स्विचिंग
- ✅ प्रतिक्रियात्मक डिजाइन

# एचटीएमएक्स के साथ एकीकरण

जैसा कि मैं में शामिल किया है [htmx के साथ Mermaid जोड़ रहा है](/blog/mermaidandhtmx)आप को पुनः HTMX अंतर्वस्तु स्क्वाप के बाद मरमीड आरंभ करने की जरूरत है

```javascript
// On page load
document.addEventListener('DOMContentLoaded', function () {
    mermaid.initialize({ startOnLoad: true });
});

// After HTMX swaps content
document.body.addEventListener('htmx:afterSwap', function(evt) {
    mermaid.run();
});
```

संवर्धन पैकेज के साथ

```javascript
import { init, enhanceMermaidDiagrams } from '@mostlylucid/mermaid-enhancements';

// Initial load
await init();

// After HTMX swap
document.body.addEventListener('htmx:afterSwap', async function() {
    await init();  // Re-init Mermaid with current theme
    enhanceMermaidDiagrams();  // Re-apply enhancements
});
```

# मैं सीखा गया सर्वोत्तम अभ्यास

यह सामान बनाने के बाद और विचित्र किनारे केसों को डिबग करने के बाद

## 1. हमेशा मौलिक सामग्री भंडारित करें

मरमीड नहीं करता है' रेंडरिंग के बाद मूल चित्र स्रोत को सुरक्षित नहीं रखता।

```javascript
const originalData = new Map();

// Before first render
element.setAttribute('data-original-code', element.textContent);
originalData.set(element.id, element.textContent);

// When re-rendering
element.innerHTML = originalData.get(element.id);
```

## 2. क्लीन अप इंस्टैंस्स

मेमोरी लीक वास्तविक हैं. नए बनाने से पहले इंस्टैंस नष्ट करें

```javascript
if (panZoomInstances.has(id)) {
    try {
        panZoomInstances.get(id).destroy();
    } catch (e) {
        console.warn('Failed to destroy:', e);
    }
    panZoomInstances.delete(id);
}
```

## 3. घटना प्रत्यायोजन प्रयोग करें

अलग-अलग बटनों में श्रोताओं को संलग्न नहीं करें

```javascript
// ❌ Don't do this
buttons.forEach(btn => {
    btn.addEventListener('click', handler);
});

// ✅ Do this
document.addEventListener('click', (e) => {
    if (e.target.matches('.mermaid-control-btn')) {
        handleClick(e.target);
    }
});
```

## 4. हाथ बादल फ्लेयर रॉकेट लोडर

रॉकेट लोडर जावास्क्रिप्ट निष्पादन को देरी देता है. निर्भरताओं के लिए प्रतीक्षा करता है

```javascript
function waitForDependencies(maxAttempts = 50) {
    return new Promise((resolve) => {
        let attempts = 0;

        const check = () => {
            if (window.mermaid && window.htmx && window.Alpine) {
                resolve();
            } else if (attempts >= maxAttempts) {
                resolve();  // Give up
            } else {
                attempts++;
                setTimeout(check, Math.min(50 * Math.pow(1.2, attempts), 500));
            }
        };

        check();
    });
}
```

और अपने मुख्य स्क्रिप्ट को रकेट लोडर से बाहर निकालें

```html
<script src="main.js" data-cfasync="false"></script>
```

## 5. समय निर्धारण सब कुछ है

उपयोग करें `requestAnimationFrame` मनपसंद से बेहतर समय के लिए `setTimeout`:

```javascript
// After Mermaid renders
await mermaid.run();

// Wait for paint before enhancing
await new Promise(resolve => {
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            enhanceMermaidDiagrams();
            resolve();
        });
    });
});
```

## 6. रक्षात्मक एसवीजी प्रबंधन

SVG विचित्र हो सकता है

```javascript
const svgElement = container.querySelector('svg');
if (!svgElement) {
    console.warn('No SVG found');
    return;
}

// Clone before modifying
const cloned = svgElement.cloneNode(true);

// Ensure viewBox exists
let viewBox = cloned.getAttribute('viewBox');
if (!viewBox) {
    const bbox = svgElement.getBBox();
    viewBox = `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`;
}
```

# त्रुटिमोचन टिप

## कंसोल आउटपुट

सही आरंभीकरण के साथ आपको यह देखना चाहिए

```
Saving original data
Loading mermaid with theme: dark
Mermaid initialized
Enhanced 3 diagrams
```

## जाँच सूची जांच कर रहा है

संवर्धनों को लागू करने के बाद

- [ ] चित्र पृष्ठ लोड पर रेंडर करें
- [ ]Pan/zoom नियंत्रण कार्य
- [ पूर्ण स्क्रीन खोलता है
- [ ] पीएनजी निर्यात पूर्ण चित्र ग्रहण करता है
- [ ] एसवीजी निर्यात सदिशों को सुरक्षित करता है
- [ ] एचटीएमएस सामग्री स्वाप के बाद कार्य करता है
- [ ] विषयवस्तु स्विच करने के लिए पुनः
- [ ] मोबाइल प्रतिक्रियाशील
- [ ] अँधेरी मोड शैली
- [ ] कुंजीपट अभिगम

## सामान्य मुद्दे

**चित्र रेंडरिंग नहीं है:**

- त्रुटि के लिए ब्राउज़र कंसोल जाँचें
- भरे हुए जलपरी को सत्यापित करें (`window.mermaid`)
- चित्र सिंटेक्स जाँचें

**पं/जोम काम नहीं कर रहा है**

- सत्यापित करें svg-pan-zoom आरंभ किया गया
- परस्पर विरोधी CSS के लिए जाँचें (`pointer-events: none`)
- इंस्टैंस मानचित्र निरीक्षण करें

**निर्यात केवल कोने को पकड़ता है**

- अनुपस्थित दृश्यबाक्स संरक्षण
- स्थानांतरण नहीं हटाया गया
- क्लोनिंग तर्क जाँचें

**प्रसंग नहीं बदल रहा है:**

- मूल डाटा सहेजा नहीं गया
- `data-processed` रिसेट नहीं
- घटना श्रोता पंजीकृत नहीं हैं

# निष्पादन विचार

## लचीला प्रारंभीकरण

आवश्यकता तक लोड वृद्धि नहीं करें'

```javascript
let enhancementsLoaded = false;

async function loadEnhancements() {
    if (enhancementsLoaded) return;

    const { enhanceMermaidDiagrams } = await import('./enhancements.js');
    enhanceMermaidDiagrams();
    enhancementsLoaded = true;
}

// Load on first interaction
document.addEventListener('click', (e) => {
    if (e.target.closest('.mermaid')) {
        loadEnhancements();
    }
}, { once: true });
```

## प्रतिच्छेदन प्रेक्षक

आरेखों को तभी रेन्डर करें जब दृश्यात्मक हो

```javascript
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            renderDiagram(entry.target);
            observer.unobserve(entry.target);
        }
    });
}, { rootMargin: '100px' });

document.querySelectorAll('.mermaid').forEach(el => {
    observer.observe(el);
});
```

## रिज़र्वेंडरों को ऋण देना

आकार बदलने या विषयवस्तु परिवर्तन पर

```javascript
let timeout;
window.addEventListener('resize', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        panZoomInstances.forEach(instance => {
            instance.resize();
            instance.fit();
        });
    }, 250);
});
```

# अंत में

मेरमीड.js बॉक्स से बाहर शानदार है, लेकिन यह कैसे यह आंतरिक रूप से काम करता है समझने के लिए आपको कुछ वास्तव में cool वृद्धियाँ बना देता है

1. **रेंडरिंग पाइपलाइन**पाठ → लेक्सर
2. **एक्सटेंशन बिन्दु**: कॉन्फ़िग, विषयवस्तुएंM SK2 पोस्ट
3. **मूल डाटा भंडारित करें**: मरमीड नहीं करता है
4. **संसाधनों को साफ करें**: स्मृति लीक वास्तविक हैं
5. **घटना प्रत्यायोजन**: बेहतर निष्पादन
6. **बहुविध विषयवस्तु स्रोत**: साइटों में विषयवस्तु अलग-अलग हैं
7. **समय निर्धारण महत्वपूर्ण है**उपयोग `requestAnimationFrame`

सभी तकनीकें I' , जो यहाँ शामिल हैं इस साइट पर उत्पादन में उपयोग किया जाता है और पैकेज में [@मोस्टल्युसिड](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements). संपूर्ण स्रोत पर उपलब्ध है [अधिकांशlucidweb/mostlylucid-mermaid](https://github.com/scottgal/mostlylucidweb/tree/main/mostlylucid-mermaid).

## संबंधित पोस्ट्स

- [htmx के साथ Mermaid जोड़ रहा है](/blog/mermaidandhtmx)
- [जलपरी के लिए प्रसंग स्विच कर रहा है](/blog/switchingthemesformermaid)
- [Pan/Zoom और निर्यात के साथ जलपरी रेखाचित्रों को बढ़ाना](/blog/enhancingmermaiddiagramswithpanzoomandexport)
- [एमएनपीएम पैकेज के रूप में मरमीड विस्तार प्रकाशित करना](/blog/publishingmermaidenhancementsnpm)

## संसाधन

- [मरमीड.js दस्तावेज़ीकरण](https://mermaid.js.org/)
- [मरमीड जीटहब](https://github.com/mermaid-js/mermaid)
- [svg-pan-zoom](https://github.com/bumbu/svg-pan-zoom)
- [html-to-image](https://github.com/bubkoo/html-to-image)
- [मेरी जलपरी वृद्धि पैकेज](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements)

ऊपर के चित्रों पर नियंत्रण का प्रयास करें