# Merenneito.js Deep Sukellus: Miten se oikeasti toimii ja miten laajentaa sitä

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

# Johdanto

> HUOMAUTUS: Tämä on osa kokeilujani tekoälyllä / tapa käyttää 1000 dollaria Calude Code Web -arvosanoja. Olen syöttänyt tälle BUNCH-lehden, ymmärrykseni, kysymyksiä, joita jouduin tekemään tämän artikkelin. Se on hauska ja täyttää aukon, jota en ole nähnyt paikattavan missään muualla.

> **Tämä viesti perustuu aiempiin artikkeleihin:** Jos et ole jo ehtinyt, katso [Lisää merenneito.js kanssa htmx](/blog/mermaidandhtmx), [Teemojen vaihtaminen merenneidolle](/blog/switchingthemesformermaid), ja [Merenneitokaavioiden parantaminen Pan/Zoomin ja Exportin avulla](/blog/enhancingmermaiddiagramswithpanzoomandexport)Tämä syväsukellus selittää toteutusten taustalla olevat sisätilat.

Mermaid.js on aidosti nerokas. Kirjoita yksinkertaista tekstiä, hanki kauniita kaavioita. Älä enää hapuile Vision tai Draw.io:n kanssa, menetä lähdetiedostoja tai säilytä erillisiä kuvatiedostoja. Kaikki elää markdownissa, versioiden hallinnassa koodisi rinnalla.

Mutta halusin tietää *miten* Se oikeasti toimii konepellin alla.

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

Ja mikä tärkeintä, miten siihen voi kytkeä lisäominaisuuksia, kuten pan/zoom, teemanvaihto ja vientitoiminto, jonka rakensin tälle sivustolle (nyt saatavilla nimellä [@mostlylucid/mermaid-enhancements](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements))?

Merenneidon lähdekoodin penkomisen ja todellisten laajennusten rakentamisen jälkeen tässä kaikki, mitä opin siitä, miten merenneito toimii sisäisesti ja miten sitä voidaan laajentaa kunnolla.

[TOC]

# Mikä Merenneito Js on?

Merenneito muuttaa tekstin määritelmät kaavioiksi.

**Vanha tapa:**

1. Avaa kaaviotyökalu
2. Luo kaavio
3. Vie PNG:nä
4. Sisällytä dokumentteihin
5. Tarvitsetko päivityksen? Etsi lähdetiedosto, muokkaa, vie uudelleen, korvaa kuva...

**Merenneidon tapa:**

1. Kirjoita kaavio tekstiksi
2. Tehty

Se on vain teksti, joka toimii markdownissa.

## Kaaviotyypit

Merenneito tukee naurettavaa määrää kaaviotyyppejä:

```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...]
```

Katso [Merenneidon dokumentit](https://mermaid.js.org/intro/) koko listaa varten.

# Miten merenneito oikeasti toimii: putkisto

Näin käy, kun merenneito tekee kaavion:

```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
```

Murretaan jokainen askel.

## Vaihe 1: Tekstin määritelmä

Kaikki alkaa tekstistä. Merenneidon DSL:ään (aluekohtainen kieli) kirjoitetaan kaavioita:

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

## Vaihe 2: Lexical Analysis

Lexer jakaa tekstin poletteihin. Esimerkiksi tämä rivi:

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

Tulee kuponkeja, kuten:

```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 { }
]
```

## Vaihe 3: Jäsennys ja AST-sukupolvi

Jäsentäjä kuluttaa kuponkeja ja rakentaa Abstract Syntax Treen (AST):

```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' }
    ]
}
```

Merenneito käyttää eri jäsennyksiä jokaiselle kaaviotyypille. Ne syntyvät usein kielioppitiedostoista, joissa käytetään [Jison](https://github.com/zaach/jison) (kuten Yacc/Bison for JavaScript).

## Vaihe 4: Kaavioiden osoittaminen

Merenneito havaitsee kaaviotyypin ensimmäiseltä riviltä:

```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
```

## Vaihe 5: Tyyppikohtainen renderointi

Jokaisessa kaaviotyypissä on oma renderaattorinsa. Renderaattori ottaa AST-järjestelmän ja tuottaa SVG-elementtejä.

Merenneito käyttää vuokaavioissa [Dagre](https://github.com/dagrejs/dagre) Muille se käyttää mukautettuja algoritmeja tai kirjastoja, kuten Cytoscapea.

```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);
};
```

## Vaihe 6: SVG-sukupolvi

Renderaattori tuottaa SVG-leiman:

```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>
```

## Vaihe 7: DOM:n sijoittaminen

Merenneito löytää kaiken `.mermaid` elementit ja korvaa ne renderoidulla SVG:llä:

```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;
    }
};
```

## Vaihe 8: Jälkiprosessointi (missä tulet mukaan)

Kun merenneito on laittanut SVG:n, voit parantaa sitä. Tässä kaikki lisälaitteeni koukuttavat:

- Pan/zoom-toiminto
- Ohjauspainikkeet
- Vientivalmiudet
- Aiheen vaihtaminen

Lisää aiheesta alla.

# Merenneiton laajennus: Laajennuspisteet

Nyt kun tiedämme, miten merenneito toimii, tutkitaan, miten sitä laajennetaan.

## 1. Asetukset

Peruslaajennus on konfiguraatio:

```javascript
import mermaid from 'mermaid';

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

## 2. Teemamuokkaus

Käsittelin tätä laajasti [Teemojen vaihtaminen merenneidolle](/blog/switchingthemesformermaid), mutta tässä on tärkein toteutus:

### Teeman vaihtamisen ongelma

Merenneito pitää alustaa teemalla, etkä voi muuttaa sitä sen jälkeen. Mutta jos haluat renderoida kaavioita uudella teemalla, tarvitset alkuperäisen kaavion lähteen, joka merenneito *ei varastoidu DOM:iin*.

### Ratkaisu

Tallenna alkuperäinen sisältö ennen renderointia, palauta ja renderöi teemoja vaihdettaessa:

```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;
        }
    }
};
```

**Useita teemantunnistusmenetelmiä** (kohteet käsittelevät teemoja eri tavalla):

```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';
}
```

Katso [koko teemavaihtajan koodi](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/src/js/memmaid_theme_switch.js) Tarkempia tietoja.

## 3. Uusinnan jälkeiset parannukset

Täällä todellinen taikuus tapahtuu. Merenneidon renderoinnin jälkeen voit lisätä vuorovaikutteisia ominaisuuksia.

Käsittelin tätä laajasti [Merenneitokaavioiden parantaminen Pan/Zoomin ja Exportin avulla](/blog/enhancingmermaiddiagramswithpanzoomandexport)Korostan tässä avaintekniikoita.

### Kääritään kaavioita

Luo kääresäiliö hallintalaitteille:

```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;
}
```

### Lisätään Pan/Zoom

Käyttäminen [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;
}
```

### Ohjauspainikkeet

Luo kelluva ohjauspaneeli:

```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);
}
```

### Tapahtumavaltuuskunta (Performance!)

Älä liitä kuuntelijoita jokaiseen painikkeeseen. Käytä tapahtuman delegointia:

```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
    }
});
```

### Vie Toiminnallisuus

**Haaste:** SVG-elementeissä on dynaamista kokoa, pan/zoom-muunnoksia ja perittyjä tyylejä. Viedäksesi oikein, sinun täytyy:

1. Kloonaaa SVG:tä
2. Säilöntämitat
3. Poista muunnelmat
4. Muunna PNG:ksi tai SVG:ksi

Käyttäminen [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);
}
```

**Kriittiset tiedot:**

- **Säilytä näkymälaatikko** - Kaappaa koko kaavion, ei vain näkyvän osan
- **Näytön ulkopuolinen renderointi** - Vältä vaikuttamasta näytettyyn kaavioon
- **Pikselisuhde: 2** - Korkea-DPI PNG:n terävälle viennille

Katso [koko vientikoodi](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/src/js/mermaid_enhancements.js#L148) Tarkempia tietoja.

# Täydellinen tehostamispaketti

Pakkasin kaikki nämä parannukset [@mostlylucid/mermaid-enhancements](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements). Katso [Merenneidon parannusten julkaiseminen npm-pakettina](/blog/publishingmermaidenhancementsnpm) täydelliset tiedot.

Näin kaikki sopii yhteen:

```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
```

## Käyttö

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

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

await init();
```

Merenneitokaavioissasi on nyt:

- Vuorovaikutteinen pan/zoom
- â € € € € koko näytön valolaatikko
- PNG/SVG-vienti
- â € € € € € € € € € € € € € 
- â € â € € € + vastuullinen suunnittelu

# Integrointi HTMX:n kanssa

Kuten peitin [Lisää merenneito.js kanssa htmx](/blog/mermaidandhtmx), Merenneito pitää käynnistää uudelleen HTMX-sisältöjen swapien jälkeen:

```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();
});
```

Parannuspaketti:

```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
});
```

# Parhaita toimintatapoja, joita opin

Rakennettuaan nämä jutut ja vianjäljiteltyään oudot laatikot, tämä toimii näin:

## 1. Säilytä aina alkuperäinen sisältö

Merenneito ei säilytä alkuperäistä kaaviolähdettä renderoinnin jälkeen. Sinun on tallennettava se itse:

```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. Siivoustoimikunnat

Muistivuodot ovat todellisia. Tuhoa tapaukset ennen uusien luomista:

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

## 3. Käytä tapahtumavaltuuskuntaa

Älä liitä kuuntelijoita yksittäisiin painikkeisiin:

```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. Kahva Cloudflare Rocket Loader

Rocket Loader viivästyttää JavaScript-toteutusta. Odota riippuvuuksia:

```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();
    });
}
```

Ja jätä pääkirjoituksesi pois Rocket Loaderista:

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

## 5. Ajoitus on kaikki kaikessa

Käyttö `requestAnimationFrame` paremman ajoituksen kuin mielivaltaisen `setTimeout`:

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

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

## 6. Puolustava SVG-käsittely

SVG:t voivat olla outoja.

```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}`;
}
```

# Vianetsintävinkit

## Lohduta tuotosta

Oikealla alustamisella näet:

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

## Testataan tarkistuslistaa

Parannusten toteuttamisen jälkeen:

- [ ] Kaaviot renderöivät sivulatauksen
- [ ] Pan/zoom-ohjainten työ
- [ ] Kokoruutu avautuu/ sulkeutuu (X, klikkaa ulkopuolelta, ESC)
- [ ] PNG-viennin kokonaiskaavio
- [ ] SVG:n vienti säilyttää vektorit
- [ ] Toimii HTMX-sisältöjen vaihdon jälkeen
- [ ] Aiheen vaihtaminen renderoi oikein
- [ ] Liikkuva reagoiva
- [ ] Tumman tilan muotoilu
- [ ] Näppäimistön saavutettavuus

## Yhteiset kysymykset

**Kaavio ei renderöi:**

- Tarkista selainkonsoli virheiden varalta
- Varmista, että merenneito on lastattu (`window.mermaid`)
- Tarkista kaavion syntaksi

**Pan/zoom ei toimi:**

- Varmenna svg-pan-zoom alustamalla
- Tarkista ristiriitainen CSS (`pointer-events: none`)
- Tarkasta esimerkiksi kartta

**Vie vain nurkkaan:**

- Puuttuu näkymälaatikon säilyttäminen
- Muunnos ei poistettu
- Tarkista kloonauslogiikka

**Teema ei muutu:**

- Alkuperäisiä tietoja ei tallennettu
- `data-processed` ei nollausta
- Tapahtuman kuuntelijat eivät ilmoittautuneet

# Suorituskykyä koskevia huomioita

## Laiska alustaminen

Älä lataa parannuksia ennen kuin se on tarpeen:

```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 });
```

## Intersection Observer

Renderointikaaviot vain näkyvillä:

```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);
});
```

## Debuuce Renderers

Muutoksesta tai teemamuutoksesta:

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

# Johtopäätöksenä

Merenneito.js on fantastinen ulos laatikosta, mutta sen sisäisen toiminnan ymmärtäminen antaa mahdollisuuden rakentaa todella hienoja parannuksia. Tärkeimmät oivallukset:

1. **Renderointiputki**: Text → Lexer → Parser → AST → Renderer → SVG
2. **Laajennuspisteet**: Konfigi, teemat, renderoinnin jälkeiset parannukset
3. **Tallenna alkuperäiset tiedot**Merenneito ei tee sitä puolestasi.
4. **Puhdista resursseja**: Muistivuodot ovat todellisia
5. **Tapahtumavaltuuskunta**: Parempi suorituskyky
6. **Useita teemojen lähteitä**: Sivustot käsittelevät teemoja eri tavalla
7. **Aikataulut**: Käyttö `requestAnimationFrame`

Kaikki käyttämäni tekniikat käytetään tämän sivuston tuotannossa ja paketoidaan [@mostlylucid/mermaid-enhancements](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements). Täydellinen lähde on saatavilla osoitteessa [Lähinnä lusid-verkkoa/lähinlylusid-merineitoa](https://github.com/scottgal/mostlylucidweb/tree/main/mostlylucid-mermaid).

## Aiheeseen liittyviä viestejä

- [Lisää merenneito.js kanssa htmx](/blog/mermaidandhtmx)
- [Teemojen vaihtaminen merenneidolle](/blog/switchingthemesformermaid)
- [Merenneitokaavioiden parantaminen Pan/Zoomin ja Exportin avulla](/blog/enhancingmermaiddiagramswithpanzoomandexport)
- [Merenneidon parannusten julkaiseminen npm-pakettina](/blog/publishingmermaidenhancementsnpm)

## Resurssit

- [Merenneito.js Dokumentaatio](https://mermaid.js.org/)
- [Merineito GitHub](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)
- [Merenneidon lisäpaketti](https://www.npmjs.com/package/@mostlylucid/mermaid-enhancements)

Kokeile yllä olevien kaavioiden ohjaimia!