Inleiding

Mermaid is een eenvoudige diagrammingsformat dat tekst invoert en diagrammen genereert in SVG-format. De Zeemeermin-site is Hier. en heeft veel meer informatie dan ik hier kan geven.

Markdown en Zeemeermin

Mermaid-diagrammen kunnen in je markerdown-files opgenomen worden door de volgende syntax te gebruiken:

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

Dit laat je Mermaid-diagrammen direct in je markerdown-files inbegripen, die als SVG-beelden weergegeven worden wanneer de file naar HTML wordt omgevormd.

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

Je kan ook mermaid-diagrammen toevoegen aan normale html-files door de volgende syntax te gebruiken:

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

Voorbeelden van Zeemeermin diagrammen

Mermaid is een krachtige tool waarmee je een groot aantal diagrammen kunt maken met behulp van eenvoudige tekst. Hier zijn enkele voorbeelden van de soorten diagrammen die je kunt maken met Mermaid:

-Piecharts:

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

-Flowcharts: Wisseldiagrammen kunnen de richting bepalen, e.gM SK2 LR (links naar rechtsMska4 RL Mske5rechts naar linksM Ska6 TB mska7boven naar benedenMsek8 BT mmska9bottom to topMsko10

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

-Sequentiediagrammen:

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

-Ganttgrafieken:

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

-Entiteitsrelatiesdiagrammen:

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

-Gebruikerreisdiagrammen:

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...Kijk naar deze pagina voor meer van de MYRIAD van diagrammen die je kunt maken met Mermaid Hier.

Begin met Mermaid en htmx

Eerst moet je de Mermaid-bibliotheek in je HTML-lêer insluiten. Je kan dit doen door het volgende script-tag toe te voegen aan je document.

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

Volgende in je _Uitleg.cshtml-lêer je moet de volgende script-tag toevoegen om Mermaid te inisialiseren (doe dit normaal aan de onderkant van de lêer)

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

</script>

Dit doet twee dingen.

1. Het inisialiseert Mermaid wanneer de pagina laadt;, dus als je rechtstreeks naar een pagina navigeert met een Mermaid-diagram M SK1e.gMSC3 /blog/mermaidandhtmx ) het zal correct weergeven.
2. Als je htmx gebruikt zoals in onze Vorige les Het geeft weer het Mermaid-diagram nadat de pagina geupdated is.