Introduction

Mermaid est un format de diagramme simple qui prend des données basées sur le texte- et génère des diagrammes dans le format SVGMSC1 Il s'agit d'un excellent outil pour créer des cartes de débits, diagrammes de séquenceM SK3 chartes Gantt , et plus encoreMNK5 Dans ce tutorialMST6 nous étudierons comment utiliser Mermaid avec htmx pour créer les diagrammes interactifs qui se mettent à jour dynamiquement sans recharger la page. Le site Mermaid est ici et a beaucoup plus d’information que je ne peux vous fournir ici.

Markdown et Mermaid

Les diagrammes Mermaid peuvent être inclus dans vos fichiers de marquage en utilisant la syntaxe suivante:

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

Cela vous permet d’inclure directement les diagrammes Mermaid dans vos fichiers de marquage, qui seront rendus en images SVG lorsque le fichier est converti en HTML.

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

Vous pouvez aussi ajouter des diagrammes de mermaid aux fichiers html normaux en utilisant la syntaxe suivante:

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

Exemples de diagrammes de mermaid

Mermaid est un outil puissant qui vous permet de construire un large éventail de diagrammes à l’aide d’un texte simple-syntaxe basée. Voici quelques exemples des types de diagrammes que vous pouvez créer avec Mermaid:

-Charts de piècesM SK1

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

-FlowchartsM SK1 Les diagrammes de débit peuvent indiquer la direction : , eM SK1g. LR (de gauche à droiteMSC4 RL

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

-Diagrammes de séquenceM SK1

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

-Chartes de GantM SK1

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

-Diagrammes de relations entre entitésM SK1

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

-Diagrammes de voyage des utilisateursM 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...Voir cette page pour plus de MYRIAD des diagrammes que vous pouvez créer avec Mermaid ici

Pour commencer avec Mermaid et htmx

Tout d’abord, vous devez inclure la bibliothèque Mermaid dans votre fichier HTML. Vous pouvez le faire en ajoutant l’étiquette de script suivante à votre document:

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

Suivant dans votre _Layout.cshtml fichier vous devez ajouter l'étiquette de script suivante pour initialiser Mermaid (vous le faites normalement au bas du fichier

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

</script>

Cela fait deux choses.

1. Il initialise Mermaid lorsque la page est chargée; de sorte que si vous naviguez directement vers une page avec un diagramme Mermaid M SK1e .g. /blog/mermaidandhtmx ) il rédigera correctement.
2. Si vous utilisez htmx comme dans notre tutorial antérieur il remettra de nouveau le diagramme Mermaid après que la page a été mise à jour (le htmxM SK2afterswap event).