Slidev

Configurar Mermaid

Entorno: client
Esta función de configuración sólo se ejecutará en el lado del cliente. Asegúrate de la compatibilidad del navegador al importar los paquetes.

Crea ./setup/mermaid.ts con el siguiente contenido:

import { defineMermaidSetup } from '@slidev/types'

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

Con la configuración, puede proporcionar una configuración personalizada por defecto para Mermaid. Consulta las definiciones de tipo y su documentación para obtener más detalles.

Estilos/tema personalizados

En caso de que quieras crear tus temas o estilos personalizados para Mermaid, puedes hacerlo definiendo themeVariables como en el siguiente ejemplo:

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'base',
    themeVariables: {
      // Variables del tema
      noteBkgColor: "#181d29",
      noteTextColor: "#F3EFF5cc",
      noteBorderColor: "#404551",

      // Variables de las secuencias del diagrama
      actorBkg: "#0E131F",
      actorBorder: "#44FFD2",
      actorTextColor: "#F3EFF5",
      actorLineColor: "#F3EFF5",
      signalColor: "#F3EFF5",
      signalTextColor: "#F3EFF5",
    }
  }
})

Puedes encontrar todas las variables del tema en la página de Mermaid.