# मेरलिंग मेकर डायग्राम को पैन/ZE तथा निर्यात के साथ निर्यात

<!--category-- Mermaid, Javascript, SVG, DaisyUI, Tailwind -->
<datetime class="hidden">2025-11-07T11:15</datetime>

# परिचय

> **प्रामाणीकरण पैकेज उपलब्ध है:** यह कार्यान्वयन अब उपलब्ध है [@ action: button](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements) - एक उत्पादन - तैयार NmP पैकेज देखें. [प्रकाशन मेकरीक को एनएमपी पैकेज के रूप में सलाह दी जाती है](/blog/publishingmermaidenhancementsnpm) आपके परियोजना में इसका इस्तेमाल कैसे करें इस बारे में जानकारी के लिए.

मैरिकरी चित्र बनाने के लिए एक शानदार औजार है, लेकिन डिफ़ॉल्ट रेंडरिंग जटिल आरेखों के लिए सीमित किया जा सकता है. उपयोक्ता आसानी से जानकारी, बड़े डायग्राम के चारों ओर जा सकता है या उन्हें दस्तावेज़ के लिए निर्यात नहीं कर सकता. इस लेख में, मैं आपको दिखाता हूँ कि कैसे Merviviv/ locivioxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

यह कार्यान्वयन तैयार किया जा रहा है, अंधेरे मोड में स्विच करता है, और बादलीय रॉकलोना हस्तक्षेप में बाधा डाल रहा है.

## यह कैसा दिखता है

तो हम क्या के लिए जा रहे हैं यह है। पृष्ठ (और पॉप आउट) में एक अच्छा प्रदर्शन है कि Gibaba के जैसे है लेकिन *बेहतर*. मतलब डायग्राम नहीं लेते लेकिन अभी भी पढ़ने के लिए uuuuuuu रहे हैं।

![mermaid_pan_zoom.png](mermaid_pan_zoom.png)

[TOC]

# समस्या

बॉक्स से बाहर, मेर विकर डायग्राम की कई सीमाएँ हैं:

1. **स्थिर आकार** - बड़ा आरेख या तो फिट करने के लिए काट रहे हैं या drrod
2. **कोई इंटरटेनेंस नहीं** - विवरण या चारों ओर ले जाने के लिए जूम नहीं कर सकते
3. **कोई निर्यात नहीं** - उपयोक्ता बाहरी उपयोग के लिए डायग्राम सहेज नहीं सकते
4. **कमज़ोर मोबाइल अनुभव** - छोटा स्क्रीन जटिल डायग्राम इस्तेमाल किया जा रहा है
5. **प्रसंग स्विच मुद्दों** - आरेख हमेशा सही नहीं है जब प्रकाश और अंधेरे मोड के बीच स्विच किया जा रहा हो

# हल

मैंने एक व्यापक वृद्धि प्रणाली लागू की है जो आगे बढ़ती है:

- **अंतर्क्रियात्मक टाइट/ आसानी** स्क्विड-सोम लाइब्रेरी का प्रयोग कर रहा है
- **फ्लोटिंग कंट्रोल बटन** जूम/ आउट, रीसेट, मोबाइल टॉगल, और निर्यात के लिए
- **पूर्ण स्क्रीन हल्काबाक्स** बेहतर देखने के लिए विधि
- **पीएनजी तथा एसवीजी निर्यात** कार्यशील
- **लोड पर स्वचलित- लोड** सो सम्पूर्ण आरेख डिफ़ॉल्ट रूप में दिखाई देता है
- **पूरा चौड़ाई प्रदर्शन** नक़ली आकार अवरोधों को मिटाया जा रहा है

## ओवरव्यू

समाधान में तीन मुख्य अवयव हैं:

```mermaid
graph TB
    A[mermaid_theme_switch.js] -->|Initializes| B[Mermaid Diagrams]
    B -->|Renders SVG| C[mermaid_enhancements.js]
    C -->|Adds| D[Control Buttons]
    C -->|Initializes| E[svg-pan-zoom]
    D -->|Triggers| F[Pan/Zoom Actions]
    D -->|Triggers| G[Export Functions]
    D -->|Triggers| H[Fullscreen Lightbox]
```

# कार्यान्वयन

## डिपेंडेंसीज़ संस्थापित किया जा रहा है

पहले, वांछित nएम पैकेज संस्थापित करें:

```bash
npm install svg-pan-zoom html-to-image
```

ये लाइब्रेरी:

- `svg-pan-zoom` - एसवीजी तत्वों के लिए अंतर्क्रियात्मक टाइट और जूम कार्यशीलता
- `html-to-image` - एसवीजी/PEGY कार्य निर्यात करें

## कोर संवर्द्धन मोड्यूल

मुख्य सुधार मॉड्यूल (अनुप्रयोगक)`mermaid_enhancements.js`) सभी अंतर्क्रियात्मक विशेषताएँ संभालता है.

### नियंत्रण बटन बनाया जा रहा है

प्रत्येक डायग्राम को फ्लोटिंग कंट्रोल फलक बनाता है सभी क्रियाओं के लिए बटनों के साथ:

```javascript
function createControlButtons(container, diagramId) {
    // Check if controls already exist
    if (container.querySelector('.mermaid-controls')) {
        return;
    }

    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 View', action: 'reset' },
        { icon: 'bx-move', title: 'Pan', action: 'pan' },
        { icon: 'bx-image', title: 'Export as PNG', action: 'exportPng' },
        { icon: 'bx-code-alt', title: 'Export as SVG', action: 'exportSvg' }
    ];

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

    container.appendChild(controlsDiv);
}
```

### पैन/ जूम प्रारंभ किया जा रहा है

बहुमुखी लाइब्रेरी बढ़िया, कार्यात्मक संपर्क प्रदान करता है:

```javascript
function initPanZoom(svgElement, diagramId) {
    // Clean up existing instance if present
    if (panZoomInstances.has(diagramId)) {
        try {
            panZoomInstances.get(diagramId).destroy();
        } catch (e) {
            console.warn('Failed to destroy existing pan-zoom instance:', e);
        }
        panZoomInstances.delete(diagramId);
    }

    try {
        const panZoomInstance = svgPanZoom(svgElement, {
            zoomEnabled: true,
            controlIconsEnabled: false, // We use custom controls
            fit: true,
            center: true,
            minZoom: 0.1,
            maxZoom: 10,
            zoomScaleSensitivity: 0.3,
            dblClickZoomEnabled: true,
            mouseWheelZoomEnabled: true,
            preventMouseEventsDefault: true,
            contain: false
        });

        panZoomInstances.set(diagramId, panZoomInstance);
        return panZoomInstance;
    } catch (error) {
        console.error('Failed to initialize pan-zoom:', error);
        return null;
    }
}
```

### फंक्शन सिंक निर्यात करें

निर्यात तंत्र डायग्राम गुण बनाए रखता है तथा दोनों पीएनजी तथा एसवीजी फ़ॉर्मेटों को संभालता है:

```javascript
async function exportDiagram(container, format, diagramId) {
    try {
        const svgElement = container.querySelector('svg');
        if (!svgElement) {
            window.showToast && window.showToast('No diagram found to export', 3000, 'error');
            return;
        }

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

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

        // Parse viewBox to get dimensions
        const [, , vbWidth, vbHeight] = viewBox.split(' ').map(Number);

        // Set explicit dimensions based on viewBox for proper export
        clonedSvg.setAttribute('width', vbWidth);
        clonedSvg.setAttribute('height', vbHeight);

        // Remove inline styles but keep viewBox
        clonedSvg.removeAttribute('style');
        clonedSvg.style.backgroundColor = 'transparent';
        clonedSvg.style.maxWidth = 'none';

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

        let dataUrl;
        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
        const filename = `mermaid-diagram-${timestamp}`;

        if (format === 'png') {
            dataUrl = await toPng(clonedSvg, {
                backgroundColor: 'white',
                pixelRatio: 2 // Higher quality
            });
            downloadFile(dataUrl, `${filename}.png`);
        } else {
            dataUrl = await toSvg(clonedSvg, {
                backgroundColor: 'transparent'
            });
            downloadFile(dataUrl, `${filename}.svg`);
        }

        // Clean up
        document.body.removeChild(tempDiv);

        window.showToast && window.showToast(`Diagram exported as ${format.toUpperCase()}`, 3000, 'success');
    } catch (error) {
        console.error('Failed to export diagram:', error);
        window.showToast && window.showToast('Failed to export diagram', 3000, 'error');
    }
}
```

**कुंजी निर्यात विचार:**

1. **दृश्य- बक्सा सुरक्षित करें (v)** - पूरे आरेख को हटाने के लिए गंभीर, सिर्फ दृश्य भाग नहीं
2. **आयामों की गणना करें** - निरंतर निर्यात के लिए दृश्य से चौड़ाई/ ऊँचाई सेट करें
3. **रूपांतरण मिटाएँ** - स्क्रीनबाइट बदलना इतना निर्यात पूर्ण आरेख को दिखाता है
4. **पृष्ठभूमि नियंत्रण** - पीएनजी के लिए सफेद पृष्ठभूमि, एसवीजी के लिए पारदर्शी
5. **उच्च विभेदन** - उपयोग `pixelRatio: 2` चाप पीएनजी निर्यात के लिए

### फुलस्क्रीन हल्काबाक्स

प्रकाश बक्से एक विशिष्ट अनुभव प्रदान करता है:

```javascript
function openFullscreenLightbox(container, diagramId) {
    const svgElement = container.querySelector('svg');
    if (!svgElement) return;

    // Create lightbox overlay
    const lightbox = document.createElement('div');
    lightbox.className = 'mermaid-lightbox';
    lightbox.innerHTML = `
        <div class="mermaid-lightbox-content">
            <button class="mermaid-lightbox-close bx bx-x" aria-label="Close"></button>
            <div class="mermaid-lightbox-diagram-wrapper">
                <div class="mermaid-lightbox-diagram"></div>
            </div>
        </div>
    `;

    // Clone and prepare SVG
    const clonedSvg = svgElement.cloneNode(true);
    clonedSvg.removeAttribute('width');
    clonedSvg.removeAttribute('height');
    clonedSvg.style.width = '100%';
    clonedSvg.style.height = '100%';

    const diagramContainer = lightbox.querySelector('.mermaid-lightbox-diagram');
    diagramContainer.appendChild(clonedSvg);

    // Add controls to lightbox
    const wrapper = lightbox.querySelector('.mermaid-lightbox-diagram-wrapper');
    const lightboxDiagramId = `${diagramId}-lightbox`;
    createControlButtons(wrapper, lightboxDiagramId);

    document.body.appendChild(lightbox);

    // Initialize pan-zoom after layout completes
    setTimeout(() => {
        const panZoom = initPanZoom(clonedSvg, lightboxDiagramId);
        if (panZoom) {
            panZoom.resize();
            panZoom.fit();
            panZoom.center();
        }
    }, 100);

    // Close handlers
    const closeLightbox = () => {
        if (panZoomInstances.has(lightboxDiagramId)) {
            try {
                panZoomInstances.get(lightboxDiagramId).destroy();
            } catch (e) {
                console.warn('Failed to destroy lightbox pan-zoom:', e);
            }
            panZoomInstances.delete(lightboxDiagramId);
        }
        lightbox.remove();
    };

    lightbox.querySelector('.mermaid-lightbox-close').addEventListener('click', closeLightbox);
    lightbox.addEventListener('click', (e) => {
        if (e.target === lightbox) closeLightbox();
    });

    // ESC key to close
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            closeLightbox();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
}
```

### मुख्य संवर्द्धन फंक्शन

इस रिश्‍ते को सबके साथ जोड़ा जाता है और मेकर के बाद कहा जाता है:

```javascript
export function enhanceMermaidDiagrams() {
    const diagrams = document.querySelectorAll('.mermaid[data-processed="true"]');

    diagrams.forEach(diagram => {
        const svgElement = diagram.querySelector('svg');
        if (!svgElement) return;

        // CRITICAL: Remove inline max-width constraint that Mermaid adds
        svgElement.style.maxWidth = 'none';

        // Wrap diagram with controls
        const diagramId = wrapDiagramWithControls(diagram);

        // Initialize pan/zoom and auto-fit
        const panZoom = initPanZoom(svgElement, diagramId);
        if (panZoom) {
            // Fit diagram to container by default
            setTimeout(() => {
                panZoom.resize();
                panZoom.fit();
                panZoom.center();
            }, 100);
        }
    });

    // Set up event delegation for control buttons (only once)
    if (!document.body.hasAttribute('data-mermaid-controls-initialized')) {
        document.body.addEventListener('click', handleControlClick);
        document.body.setAttribute('data-mermaid-controls-initialized', 'true');
    }
}
```

**गंभीर सुधारः** मेरशी एक इनलाइन लागू होती है `style="max-width: 1020px"` एसवीजी तत्वों के लिए, जो पूर्ण चौड़ाई प्रदर्शन को रोकता है. इसे मिटाना उचित प्रतिक्रिया दिखानेवाले बर्ताव के लिए आवश्यक है.

## प्रसंग संयोजन

प्रसंग स्विचर यह सुनिश्चित करता है कि डायग्राम फिर से पढ़ने का सही समय होता है जब प्रकाश तथा अंधेरे मोड के बीच स्विच होता है:

```javascript
import { enhanceMermaidDiagrams } from './mermaid_enhancements';

const loadMermaid = async (theme) => {
    if (!window.mermaid) return;
    try {
        window.mermaid.initialize({
            startOnLoad: false,
            theme,
            themeVariables: {
                background: 'transparent'
            }
        });
        await window.mermaid.run({
            querySelector: elementSelector,
        });

        // Enhance diagrams after rendering completes
        // Use requestAnimationFrame for better timing
        await new Promise(resolve => {
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    enhanceMermaidDiagrams();
                    resolve();
                });
            });
        });
    } catch (err) {
        console.error('Mermaid render error:', err);
    }
};
```

उपयोग में `requestAnimationFrame` दो बार सुनिश्चित करता है कि ब्राउज़र ने एसवीजी पेंटिंग पूरा कर लिया है इससे पहले कि हम इसे बढ़ाने की कोशिश करें.

## बादलीय चट्टाना लोडर सुसंगतता

बादल के रॉकट लोडर जावास्क्रिप्ट चलाने में देरी कर सकता है, आरंभ शुरू. यहाँ गोली गैस के समाधान है:

```javascript
// Wait for all dependencies to load with exponential backoff
function waitForDependencies(maxAttempts = 50) {
    return new Promise((resolve) => {
        let attempts = 0;

        const checkDependencies = () => {
            attempts++;

            const depsReady =
                typeof window.hljs !== 'undefined' &&
                typeof window.mermaid !== 'undefined' &&
                typeof window.Alpine !== 'undefined' &&
                typeof window.htmx !== 'undefined';

            if (depsReady) {
                console.log('All dependencies loaded after', attempts, 'attempts');

                // Start Alpine.js now that it's loaded
                if (window.Alpine && !window.Alpine.version) {
                    try {
                        window.Alpine.start();
                        console.log('Alpine.js started');
                    } catch (err) {
                        console.error('Failed to start Alpine:', err);
                    }
                }

                resolve();
            } else if (attempts >= maxAttempts) {
                console.warn('Timeout waiting for dependencies');
                resolve(); // Continue anyway
            } else {
                // Retry with exponential backoff
                const delay = Math.min(50 * Math.pow(1.2, attempts), 500);
                setTimeout(checkDependencies, delay);
            }
        };

        checkDependencies();
    });
}

// Robust initialization
async function safeInitialize() {
    try {
        await waitForDependencies();

        if (document.readyState === 'loading') {
            await new Promise(resolve => {
                document.addEventListener('DOMContentLoaded', resolve, { once: true });
            });
        }

        await initializePage();
    } catch (err) {
        console.error('Failed to initialize page:', err);
        // Retry once after delay
        setTimeout(() => {
            initializePage().catch(e => console.error('Retry failed:', e));
        }, 1000);
    }
}

safeInitialize();
```

साथ ही यह सुनिश्चित करें कि आपके मुख्य स्क्रिप्ट में है `data-cfasync="false"` इसे रॉकनेट लोडर से अलग करने के लिए गुण:

```html
<script src="~/js/dist/main.js" type="module" asp-append-version="true" data-cfasync="false"></script>
```

## झिलाड/डियू के साथ स्टाइल

सीएसएस जाल यूटिलिटी का उपयोग करता है और मरम्मत के लिए मनपसंद उपयोग करता है:

```css
/* Mermaid diagram wrapper */
.mermaid-wrapper {
    @apply relative rounded-lg overflow-hidden w-full;
    margin: 1rem 0;
}

.mermaid-wrapper .mermaid {
    @apply m-0 w-full;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mermaid-wrapper .mermaid svg {
    width: 100% !important;
    height: auto !important;
    min-height: 450px;
}

/* Control buttons */
.mermaid-controls {
    @apply absolute top-2 right-2 flex gap-1 z-10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark .mermaid-controls {
    background: rgba(31, 41, 55, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mermaid-control-btn {
    @apply p-2 rounded cursor-pointer transition-all duration-200;
    background: transparent;
    border: none;
    color: #4b5563;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.mermaid-control-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    transform: scale(1.1);
}

.dark .mermaid-control-btn {
    color: #9ca3af;
}

.dark .mermaid-control-btn:hover {
    background: rgba(55, 65, 81, 0.8);
    color: #60a5fa;
}

/* Lightbox */
.mermaid-lightbox {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.dark .mermaid-lightbox {
    background: rgba(0, 0, 0, 0.95);
}

.mermaid-lightbox-content {
    @apply relative w-11/12 h-5/6 bg-white rounded-lg shadow-2xl;
    max-width: 1400px;
}

.dark .mermaid-lightbox-content {
    @apply bg-gray-800;
}

.mermaid-lightbox-close {
    @apply absolute top-4 right-4 z-10 p-2 rounded-full cursor-pointer transition-all;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 2rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mermaid-lightbox-close:hover {
    background: rgba(220, 38, 38, 0.8);
    transform: scale(1.1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
```

# जाँच व डिबगिंग

यहाँ कैसे सब कुछ काम की जांच करें:

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

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

```
All dependencies loaded after 1 attempts
Alpine.js started
Highlight.js copy plugin registered
Highlight.js initialized on page load
Mermaid initialized on page load
Document is ready - all initializations complete
HTMX event listener registered successfully
```

## एटीएमएक्स गतिशील विषयवस्तु

HMAX स्वेप के बाद, आप देखना चाहिए:

```
HTMX afterSettle triggered for: contentcontainer
Highlight.js applied after HTMX swap
Mermaid initialized
Mermaid applied after HTMX swap
HTMX afterSettle complete for: contentcontainer
```

## जाँच की जा रही है

- [ [] आरंभिक पृष्ठ लोड पर डायग्राम रेंडर करता है
- [ मोड/जोम नियंत्रण कार्य
- [ फुलस्क्रीन हल्का- बक्सा खोलता है और बन्द करता है (X बटन, बाहर क्लिक करें scC कुंजी)
- [ पीएनजी निर्यात पूर्ण आरेख कैप्चर करता है (सिर्फ कोने नहीं)
- [ ] एसवीजी निर्यात सदिशों की रक्षा करता है
- [ HMMMAX सामग्री स्वेप के बाद कार्य करता है
- [ प्रसंग बदला जा रहा है
- [ ] मोबाइल प्रतिक्रियाएँ ( नियंत्रण दृष्टिगोचर, डायग्राम स्केल)
- [ ] गहरा मोड जोर लागू होता है सही प्रकार से लागू होता है
- [ कुंजीपटल एक्सेसिबिलिटी ( नियंत्रण से नियंत्रण करने के लिए)

# परफ़ॉर्मेंस पर ध्यान दें

1. **zy आरंभ** - केवल ऐसे आरेखों को विकसित करें जो पृष्ठ पर मौजूद हैं
2. **उदाहरण साफ** - जब डायग्राम हटा दिए जाते हैं तो टाइट- रंगीन उदाहरणों को नष्ट कर दें
3. **घटना निश्चित करें (_D)** - एकल क्लिक करने पर सभी नियंत्रण बटनों को संभालता है
4. **एनीमेशन निवेदन** - मनमाना सेट मूल्य से बेहतर समय
5. **गलत निर्यात** - तेज़-आग निर्यात क्लिक से रोका जा सकता है

# ब्राउज़र संगतता

जाँच तथा पर काम करने पर:

- क्रोमोस/ एज 90+
- फ़ायरफ़ॉक्स 88+
- सफरी 14+
- मोबाइल ब्राउज़र (यूओएस वेब साइट्री, क्रोमा मोबाइल)

**आईई11 समर्थित नहीं है** आधुनिक जावास्क्रिप्ट विशेषताओं के कारण (अप्रयोग, तीर कार्य, अतुल्यकालिक/awwim, आग्रह करें)

# कंटेनमेंट

यह विस्तार केंद्र स्थिर मेकर्टर डायग्राम को इंटरनेशनल, निर्यातयोग्य दृश्यों में परिवर्तित करता है. कार्यान्वयन को तैयार किया जा रहा है, किनारों के मामलों में भारी, और एक उत्कृष्ट उपयोगकर्ता अनुभव प्रदान करता है.

कुंजी भागरः

- मरिनी की इनलाइन मिटाएँ `max-width` पूर्ण चौड़ाई डायग्राम के लिए प्रतिबन्ध
- संपूर्ण डायग्राम कैप्चर करने के लिए निर्यात करते समय दृश्य- बक्सा सुरक्षित रखें
- मनमानी देरी के बजाय समय के लिए निवेदन का प्रयोग करें
- बंद करें (R)
- प्रकाशबाक्स के लिए बहुत से बन्द तरीके दें ( बटन, बाहर क्लिक करें, ईएससी)
- अनेक डायग्रामों के साथ प्रदर्शन के लिए घटना- संकेतों का प्रयोग करें

## एनएमएम पैकेज इस्तेमाल किया जा रहा है

कोड की नक़ल करने के बजाय, आप अब इस कार्य को npm पैकेज के रूप में संस्थापित कर सकते हैं:

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

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

await init();
```

देखें [प्रकाशन मेकरीक को एनएमपी पैकेज के रूप में सलाह दी जाती है](/blog/publishingmermaidenhancementsnpm) पूर्ण दस्तावेज़ों के लिए, फ्रेमवर्क द्वारा उदाहरण तथा विस्तृत कॉन्फ़िगरेशन विकल्प.

पूर्ण स्रोत कोड इस ब्लॉग के भंडार में भी उपलब्ध है `Mostlylucid/src/js/mermaid_enhancements.js` और एक खुले स्रोतmsg status पैकेज के रूप में [अधिकतर अल्पपारदर्शिता/ सबसे ज्यादा जर्दी](https://github.com/scottgal/mostlylucidweb/tree/main/mostlylucid-mermaid).

## उदाहरण आरेख

यहाँ एक जटिल उदाहरण है इस ब्लॉग की सामग्री प्रणाली की बनावट दिखाने के लिए:

```mermaid
graph TB
    subgraph Client["Client Browser"]
        A[User Request] -->|HTMX| B[Blog Controller]
        B -->|Cache Miss| C[Blog Service]
        C -->|File Mode| D[Markdown Service]
        C -->|DB Mode| E[EF Core Context]
        D -->|Parse| F[Markdig Pipeline]
        F -->|Render| G[HTML + Mermaid]
        E -->|Query| H[PostgreSQL]
        H -->|Full-Text Search| I[GIN Index]
        G -->|Enhance| J[mermaid_enhancements.js]
        J -->|Initialize| K[svg-pan-zoom]
        J -->|Add| L[Control Buttons]
        L -->|Export| M[html-to-image]
    end

    subgraph Background["Background Services"]
        N[File Watcher] -->|Change Detected| O[Saves to DB]
        O -->|Trigger| P[Translation Service]
        P -->|Batch| Q[EasyNMT API]
        Q -->|12 Languages| R[Translated Files]
    end 

    style A stroke:#22c55e,stroke-width:3px,color:#4ade80
    style G stroke:#3b82f6,stroke-width:3px,color:#60a5fa
    style J stroke:#f59e0b,stroke-width:3px,color:#f59e0b
    style K stroke:#ec4899,stroke-width:3px,color:#ec4899
    style M stroke:#8b5cf6,stroke-width:3px,color:#8b5cf6
```

ऊपर आरेख पर नियंत्रण को क्लिक करने की कोशिश करें!