# Mermaiden lisääminen.js htmx

<!--category-- HTMX, Markdown -->
<datetime class="hidden">2024-08-02T20:00</datetime>

## Esitys

Mermaid on yksinkertainen diagrammimuoto, jossa otetaan tekstiin perustuvat入力et ja luodaan diagrammat SVG-muodossa. Se on erinomainen työkalu flowcharttien laatimiseen, sekvensointidiagrammien laatimiseksi , Gantt-diagrammien laatiminenM SK4 ja muutaMSC5 Tässä oppauksessaMST6 tarkastelemme sitä, miten Mermaid htmx:n avulla voidaan luoda vuorovaikutteisia diagrammia, jotka ajantasaistetaan dynaamisesti ilman sivujen uudelleenlaadinnan välttämättömyyttä.
Mermaid -sivusto on [täällä](https://mermaid.js.org/) ja sillä on paljon enemmän tietoa kuin voin antaa täällä.

[TOC]

## Markdown ja mermaid

Mermaid-diagrammat voidaan sisällyttää merkitsemisohjelmiin käyttämällä seuraavaa syntaxia:

<pre>
# My Markdown Title
```mermaid
graph LR
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
```
</pre>
Tämä mahdollistaa mermaid-diagrammien sisällyttämisen suoraan merkitsemisohjelmiin.

```mermaid
graph LR
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
```

Voit myös lisätä mermaid-diagrameja tavanomaisiin html-tiedostoihin käyttämällä seuraavaa syntaxia:

```html
<pre class="mermaid">
    graph TD
    A[Start] --> B[Look for movie]
    B --> C{Found?}
    C -->|Yes| D[Watch it]
    C -->|No| E[Look for another movie]
    D --> E
</pre>
```

### Esimerkkejä mermaid-diagrameista

Mermaid on tehokas väline, jonka avulla pystytte rakentamaan monia diagrammia yksinkertaisen tekstin avulla.
Tässä on joitakin esimerkkejä sellaisten suunnitelmien tyypeistä, jotka voidaan luoda Mermaidin kanssa:

-Pie-taulukotM SK1

```mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```

-KantataulutM SK1
Suuntataulut voivat määrittää suunnan, eM SK1g. LR MSC3 vasemmalta oikeaanMSL4 RL (vasemmalta vasemmalleMST6 TB SSK7 yläpuolella alhaaltaMSV8 BT ( alhaaltaan yläpuolelle

```mermaid
flowchart LR
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```

-Sequenssidiagrammat

```mermaid
sequenceDiagram 
    participant A
    participant B
    A->>B: Hi B, how are you?
    B-->>A: Fine, thanks!
```

-Gantt-taulukot

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-08-01, 30d
    Another task     :after a1  , 20d
```

-Yrittäjyyssuhteiden esittelydiagrammat

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

-Usenten matkustusdiagrammat

```mermaid
journey
    title My working day
    section Go to work
        Make tea: 5: Me
        Go upstairs: 15: Me
        Do work: 60: Me
    section Go home
        Go downstairs: 15: Me
        Sit down: 5: Me
```

jne...Katsoa tätä sivua, jotta saatte lisää Diagrammien MYRIADiä, joita voitte luoda Mermaid-ohjelmalla [täällä](https://mermaid.js.org/syntax/examples.html)

## Mermaidin ja htmx:n käyttöönotto

Ensinnäkin Mermaid-kirjasto on sisällytettävä HTML-tietokantaan.. Voitte tehdä tämän lisäämällä asiakirjaan seuraavat skripttimerkit:

```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js
"></script>
```

Seuraavana omassa _Laatiminen.cshtml-tietokanta, johon on lisättävä seuraava skripttimerki Mermaidin initialisointia varten.

```html
<script>
    document.addEventListener('DOMContentLoaded', function () {
        mermaid.initialize({ startOnLoad: true });
    });
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        mermaid.run();
        
    });

</script>
```

Tämä tekee kaksi asiaa;

1. Siihen sisällytetään Mermaid, kun sivu laaditaan; joten jos etenee suoraan sivuun Mermaid-diagrammin kanssa (e.gM SK3 [/blog/mermaidandhtmx](/blog/mermaidandhtmx) ) se antaa oikean kuvan
2. Jos olette käyttänyt htmx-koodia [edellinen opetus](/blog/htmxwithaspnetcore) se antaa uudelleen-Mermaid-diagrammin sen jälkeen, kun sivu on päivitetty M SK1htmx :afterswap event).