# Додання русалка.js з htmx

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

## Введение

Mermaid - це простий формат діаграми, який бере текстові дані- і генерує діаграму в форматі SVGMSC1 Це чудовий інструмент для створення графів потокуM SK2 послідовностей diagrams, Gantt-карти , і ще більшеМSK5 В цьому відео ми познайомимося з тим, як використовувати Mermaid за допомогою htmx для створення інтерактивних діаграм, які динамічно обновляються без перезавантаження сторінок.
Сайт Сирена - [тут](https://mermaid.js.org/) і має набагато більше інформації, ніж я можу надати тут.

[TOC]

## Маркдаун та Сирена

Діаграми Сирени можуть бути включені в ваші файли, використовуючи синтаксису:

<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>
Це дозволяє додати діаграми Сирени прямо у ваші відміткові файли,, які будуть перетворені на SVG зображення, коли файл буде конвертований в HTMLM SK1

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

Ви також можете додати діаграми дівчини до звичайного HTML-файлу, використовуючи цей синтаксис:

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

### Ось приклади діаграми Сирени

Сирена - це потужний інструмент, який дозволяє створювати широкий діаграмовий діапазон, використовуючи простий текст
Ось деякі приклади типів діаграм, які ви можете створити з Mermaid:

-Півні діаграмиM SK1

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

-ФлоучартиM SK1
Флоwchart може визначити напрямок: МСК0 eМSK1 g МSK2 LR ( ліворуч до правого ), RL

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

-Ріграми послідовностіM SK1

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

-Гантт-чартиM SK1

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

-Ріграми стосунків між EntіямиM SK1

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

-Диаграми польоту користувачаM SK1

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

etc...Подивіться на цю сторінку, щоб побачити більшу картинку, яку ви можете створити з Сирою [тут](https://mermaid.js.org/syntax/examples.html)

## Почнемо з Сирена і htmx

По-перше, вам потрібно включити бібліотеку Мерmaid в ваш HTML файл. Ви можете зробити це, додаючи до вашого документа наступний скриптовий ярлик:

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

Наступний у вашому _Установлення.cshtml файл вам потрібно додати наступний скриптовий ярлик для inicialізації Сирена ( ви, як правило, робите це внизу файлу

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

</script>
```

Це робить дві речі.

1. Він запускає Сироту, коли сторінка завантажується; тож, якщо ви прямісінько навігаєте до сторінки з діаграмою Сироти (e.gM SK3 [/blog/mermaidandhtmx](/blog/mermaidandhtmx) ) він відтворить правильноM SK1
2. Якщо ви використовуєте htmx, як у нашому [попередній урок](/blog/htmxwithaspnetcore) він поверне - діаграму Сиренки після того, як сторінка буде обновлена (htmxM SK2afterswap event).