# Att lägga till sjöjungfru.js med htmx

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

## Inleiding

Mermaid är ett enkelt diagrammeringsformat som tar inmatning av text, med hjälp av - och genererar diagram i SVG format.
Mermaidens hemsida är [här](https://mermaid.js.org/) och har mycket mer information än jag kan ge er här

[TOC]

## Markdown och sjöjungfru

Mermaid-diagram kan inkluderas i dina markerdown-filer genom att använda syntaxen som följer:

<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>
Detta låter dig att inbegripa sjöjungfrudiagramer direkt i dina markerdown-filer, som blir avskrivna som SVG-bilder när filet konverteras till HTML .

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

Du kan också lägga till sjöjungfrudiagram till vanliga html-filer genom att använda syntaxen som följer:

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

### exempel på sjöjungfrudiagram

Mermaid är ett kraftfullt verktyg som låter dig bygga en mängd diagram med hjälp av enkel text
Här är några exempel på vilka typer av diagram du kan skapa med Mermaid:

-Papperdiagramm

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

-Flowcharts:
Flowcharter kan definiera riktning.

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

-Ljudschemer

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

-Gantt-kartar

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

-Entity relation diagram

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

-Benutzerfärdsdiagramer

```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...Se den här sidan för mer av diagrammet som du kan skapa med Mermaid [här](https://mermaid.js.org/syntax/examples.html)

## Att börja med sjöjungfru och htmx

Först måste du inbegripa Mermaid biblioteket i din HTML-Datei. Du kan göra detta genom att lägga till den här skriptets tag i ditt dokument

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

Nästa i din _Layout.cshtml-Datei du behöver lägga till följande skript-tag för att initialisera Mermaid | ( | så gör du det vanligtvis längst ner i filen

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

</script>
```

Detta gör två saker

1. Den initialiserar Seejungfrun när sidan laddas, så om du navigerar direkt till en sida med ett Seejungfraudiagramm (e.gM SK3 [/blog/mermaidandhtmx](/blog/mermaidandhtmx) ) den kommer att göra korrekta ifrån sig
2. Om du använder htmx som i vår [tidigare instruktion](/blog/htmxwithaspnetcore) den kommer att återskapa "-" -diagrammet efter att sidan har blivit uppdaterad.