Esitys

Mermaid on yksinkertainen diagrammimuoto, jossa otetaan tekstiin perustuvat入力et ja luodaan diagrammat SVG-muodossa. Se on erinomainen työkalu flowcharttien laatimiseen, sekvensointidiagrammien laatimiseksi , Gantt-diagrammien laatiminenM SK4 ja muutaMSC5 Tässä oppauksessaMST6 tarkastelemme sitä, miten Mermaid htmx:n avulla voidaan luoda vuorovaikutteisia diagrammia, jotka ajantasaistetaan dynaamisesti ilman sivujen uudelleenlaadinnan välttämättömyyttä. Mermaid -sivusto on täällä ja sillä on paljon enemmän tietoa kuin voin antaa täällä.

Markdown ja mermaid

Mermaid-diagrammat voidaan sisällyttää merkitsemisohjelmiin käyttämällä seuraavaa syntaxia:

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

Tämä mahdollistaa mermaid-diagrammien sisällyttämisen suoraan merkitsemisohjelmiin.

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

Voit myös lisätä mermaid-diagrameja tavanomaisiin html-tiedostoihin käyttämällä seuraavaa syntaxia:

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

Esimerkkejä mermaid-diagrameista

Mermaid on tehokas väline, jonka avulla pystytte rakentamaan monia diagrammia yksinkertaisen tekstin avulla. Tässä on joitakin esimerkkejä sellaisten suunnitelmien tyypeistä, jotka voidaan luoda Mermaidin kanssa:

-Pie-taulukotM SK1

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

-KantataulutM SK1 Suuntataulut voivat määrittää suunnan, eM SK1g. LR MSC3 vasemmalta oikeaanMSL4 RL (vasemmalta vasemmalleMST6 TB SSK7 yläpuolella alhaaltaMSV8 BT ( alhaaltaan yläpuolelle

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

-Sequenssidiagrammat

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

-Gantt-taulukot

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

-Yrittäjyyssuhteiden esittelydiagrammat

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

-Usenten matkustusdiagrammat

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

jne...Katsoa tätä sivua, jotta saatte lisää Diagrammien MYRIADiä, joita voitte luoda Mermaid-ohjelmalla täällä

Mermaidin ja htmx:n käyttöönotto

Ensinnäkin Mermaid-kirjasto on sisällytettävä HTML-tietokantaan.. Voitte tehdä tämän lisäämällä asiakirjaan seuraavat skripttimerkit:

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

Seuraavana omassa _Laatiminen.cshtml-tietokanta, johon on lisättävä seuraava skripttimerki Mermaidin initialisointia varten.

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

</script>

Tämä tekee kaksi asiaa;

1. Siihen sisällytetään Mermaid, kun sivu laaditaan; joten jos etenee suoraan sivuun Mermaid-diagrammin kanssa (e.gM SK3 /blog/mermaidandhtmx ) se antaa oikean kuvan
2. Jos olette käyttänyt htmx-koodia edellinen opetus se antaa uudelleen-Mermaid-diagrammin sen jälkeen, kun sivu on päivitetty M SK1htmx :afterswap event).