Введение

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

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

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

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

Це дозволяє додати діаграми Сирени прямо у ваші відміткові файли,, які будуть перетворені на SVG зображення, коли файл буде конвертований в HTMLM SK1

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-файлу, використовуючи цей синтаксис:

<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

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

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

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

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

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

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

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

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

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

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...Подивіться на цю сторінку, щоб побачити більшу картинку, яку ви можете створити з Сирою тут

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
"></script>

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

<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 ) він відтворить правильноM SK1
2. Якщо ви використовуєте htmx, як у нашому попередній урок він поверне - діаграму Сиренки після того, як сторінка буде обновлена (htmxM SK2afterswap event).