Ρυθμίστε Mermaid

Περιβάλλον: client

Αυτή η λειτουργία ρύθμισης θα εκτελεστεί μόνο σε client side. Βεβαιωθείτε ότι το πρόγραμμα περιήγησης είναι συμβατό όταν κάνετε εισαγωγή πακέτων.

Δημιουργήστε ./setup/mermaid.ts με το εξής περιεχόμενο:

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'forest',
  }
})

Με το setup, μπορείτε να δώσετε μια προσαρμοσμένη προεπιλεγμένη ρύθμιση για το Mermaid. Ανατρέξτε στους ορισμούς των τύπων και στις οδηγίες χρήσης τους για περισσότερες λεπτομέρειες.

Προσαρμοσμένο θέμα/στυλ

Σε περίπτωση που θέλετε να δημιουργήσετε τα δικά σας προσαρμοσμένα θέματα ή στυλ για το Mermaid, μπορείτε να το κάνετε αυτό ορίζοντας το themeVariables όπως στο παρακάτω παράδειγμα:

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'base',
    themeVariables: {
      // Γενικές μεταβλητές του θέματος
      noteBkgColor: '#181d29',
      noteTextColor: '#F3EFF5cc',
      noteBorderColor: '#404551',

      // Μεταβλητές διαγράμματος ακολουθίας
      actorBkg: '#0E131F',
      actorBorder: '#44FFD2',
      actorTextColor: '#F3EFF5',
      actorLineColor: '#F3EFF5',
      signalColor: '#F3EFF5',
      signalTextColor: '#F3EFF5',
    }
  }
})

Μπορείτε να βρείτε όλες τις μεταβλητές θέματος στη σελίδα Mermaid Theme Configuration.