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 och har mycket mer information än jag kan ge er här

Markdown och sjöjungfru

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

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

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 .

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:

<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

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

-Flowcharts: Flowcharter kan definiera riktning.

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

-Ljudschemer

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

-Gantt-kartar

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

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

-Benutzerfärdsdiagramer

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

<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 ) den kommer att göra korrekta ifrån sig
2. Om du använder htmx som i vår tidigare instruktion den kommer att återskapa "-" -diagrammet efter att sidan har blivit uppdaterad.