Εισαγωγή

Mermaid είναι ένα απλό μορφότυπο διάγραμμα που παίρνει κείμενο- με βάση την εισαγωγή και παράγει διαγράμματα σε SVG μορφή.Είναι ένα εξαιρετικό εργαλείο για τη δημιουργία γραμμάτων ροήςM SK2διαγράμματα ακολουθίαςM Sk3Διαγράμματα Gantt, και περισσότεραMK5Σε αυτό το εγχειρίδιοΜSK6 θα εξερευνήσουμε πώς να χρησιμοποιήσετε Mermait με htmx για να δημιουργήσετε διαδραστικά γράμματα τα οποία ενημερώνουν δυναμικά χωρίς σελίδα επαναφορτίζειMST7 Η τοποθεσία της Μαραθώνης είναι ΕΔΩ και έχει πολύ περισσότερες πληροφορίες από ό, τι μπορώ να προσφέρω εδώ.

Markdown και Mermaid

Τα διαγράμματα Mermaid μπορούν να συμπεριληφθούν στα αρχεία καταγραφής με τη χρήση του παρακάτω συντάγματος:

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

Αυτό σας επιτρέπει να συμπεριλάβετε τα διαγράμματα Mermaid απευθείας στα αρχεία απομάκρυνσης ειδικά, που θα παραδοθούν ως εικόνες SVG όταν το αρχείο μετατρέπεται σε 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

Μπορείτε επίσης να προσθέσετε διαγράμματα σκουπιδιών στα κανονικά αρχεία 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>

Παραδείγματα διαγράμματος Mermaid

Το Mermaid είναι ένα ισχυρό εργαλείο που σας επιτρέπει να δημιουργήσετε μια ευρεία ποικιλία διαγραμμάτων χρησιμοποιώντας απλό κείμενο- με βάση τη σύνταξη. Εδώ είναι μερικά παραδείγματα των τύπων διαγραμμάτων που μπορείτε να δημιουργήσετε με Mermaid:

-Pie χάρτεςΜSK1

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

-FlowchartsΜSK1 Οι πίνακες ροής μπορούν να προσδιορίσουν την κατεύθυνση, e.ΜSK2 LR ( αριστερά προς τα δεξιά ΜSK4 RL Μ SK5 άμεσο προς τα πίσω ΜΚ6 TB (πτωμα προς τα κάτω ΜΣΚ8 BT (πτώμα προς το επάνω

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

-Διαγράμματα ακολουθίαςΜSK1

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

-Γράμματα GanttΜSK1

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

-Διαγράμματα σχέσεων εντότηταςΜSK1

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

-Διαγράμματα ταξιδιού των χρηστώνΜ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

κλπ...Βλέπε αυτή τη σελίδα για περισσότερα από τα διαγράμματα MYRIAD που μπορείτε να δημιουργήσετε με Mermaid ΕΔΩ

Ξεκινώντας με Mermaid και htmx

Πρώτα πρέπει να συμπεριλάβετε τη βιβλιοθήκη Mermaid στο αρχείο HTML σας. Μπορείτε να το κάνετε προσθέτοντας την ακόλουθη ετικέτα σενάριο στο έγγραφο σαςΜSK1

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

Επόμενο Στο δικό σου _Σχεδιασμός.cshtml αρχείο που χρειάζεται να προσθέσετε το ακόλουθο σενάριο για να ξεκινήσει Mermaid ΜSK1you συνήθως κάνετε αυτό στο κάτω μέρος του αρχείου)

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

</script>

Αυτό κάνει δύο πράγματα να ικανοποιήσει;

1. Αρχίζει το Mermaid όταν η σελίδα φορτίζει;, οπότε αν πλοηγηθείτε απευθείας σε μια σελίδα με ένα διάγραμμα του Mermaida (ΜSK2 /blogΜSK1mermaidandhtmx ) ελπίζει ότι θα κάνει σωστά ελπίζουμε. ελπίζουν
2. Εάν χρησιμοποιείτε το htmx όπως στο δικό μας Προηγούμενο Tutorial θα ενημερώσει ξανά το - για την αναβάθμιση του διαγράμματος Mermaid μετά την ενημέρωση της σελίδας ( για την εκδήλωση htmx