Mermaid の設定

環境: client

このセットアップ関数は、クライアント環境でのみ実行されます。パッケージをインポートする際はブラウザの互換性に注意してください。

./setup/mermaid.ts を作成して、以下の内容を入力します:

setup/mermaid.ts

import { defineMermaidSetup } from '@slidev/types'

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

戻り値は Mermaid のカスタム設定である必要があります。Mermaid のドキュメント または型定義で完全な設定リストを参照してください。

カスタムテーマ / スタイル

カスタム Mermaid テーマまたはスタイルを作成する場合は、次の例のように themeVariables を定義することでこれを行うことができます:

import { defineMermaidSetup } from '@slidev/types'

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

      // Sequence diagram variables
      actorBkg: '#0E131F',
      actorBorder: '#44FFD2',
      actorTextColor: '#F3EFF5',
      actorLineColor: '#F3EFF5',
      signalColor: '#F3EFF5',
      signalTextColor: '#F3EFF5',
    }
  }
})

すべてのテーマ変数は Mermaid テーマ設定 のページで見つけることができます。