設定

在 nuxt.config.ts 中使用 contentMermaid 鍵設定套件選項：

export default defineNuxtConfig({
  contentMermaid: {
    loader: { lazy: true },
    theme: { light: 'default', dark: 'dark' },
  },
})

一般設定

選項	類型	預設值	用途
`enabled`	`boolean`	`true`	在 Nuxt 啟動時啟用模組與 Markdown 轉換。
`debug`	`boolean`	`false`	啟用更詳細的套件診斷資訊。

enabled 是建置時的模組選項。請將它放在 contentMermaid 下，而不是公開執行階段設定中。

選項	類型	預設值	用途
`loader.lazy`	`boolean` 或選項物件	enabled	等到圖表進入視窗後才載入。設定為 `false` 可立即載入。
`loader.lazy.threshold`	`number`	套件未提供值	設定 `IntersectionObserver` 的可見性門檻。
`loader.init`	純資料 Mermaid 設定	套件預設值	將初始化選項傳給 Mermaid。

頁面與圖表的覆寫方式請參考撰寫圖表。

選項	類型	預設值	用途
`theme.light`	Mermaid 主題名稱	`default`	淺色模式使用的主題。
`theme.dark`	Mermaid 主題名稱	`dark`	深色模式使用的主題。

安裝 @nuxtjs/color-mode 後，渲染器會跟隨目前的色彩模式。也可以使用 useMermaidTheme() 控制目前使用的模式。

請使用 Nuxt 應用程式中元件的註冊名稱。如果無法解析自訂渲染器名稱，套件會退回使用內建渲染器。

設定 expand: false 可停用展開，設定 expand: true 可使用所有預設值，也可以提供選項物件：

選項	類型	預設值	用途
`expand.enabled`	`boolean`	`true`	啟用展開互動。
`expand.margin`	`number`	`0`	在展開後的圖表周圍保留指定像素數的邊距。
`expand.invokeOpenOn.diagramClick`	`boolean`	`true`	點擊圖表時開啟覆蓋層。
`expand.invokeCloseOn.esc`	`boolean`	`true`	按下 Escape 時關閉。
`expand.invokeCloseOn.wheel`	`boolean`	`true`	滾輪操作時關閉。
`expand.invokeCloseOn.swipe`	`boolean`	`true`	滑動時關閉。
`expand.invokeCloseOn.overlayClick`	`boolean`	`true`	點擊覆蓋層背景時關閉。
`expand.invokeCloseOn.closeButtonClick`	`boolean`	`true`	顯示並啟用關閉按鈕。

選項	類型	預設值	用途
`toolbar.title`	`string`	`mermaid`	設定工具列標題的預設值。
`toolbar.fontSize`	`string` 或 `number`	`14px`	設定工具列字型大小。
`toolbar.fullscreenToolbarScale`	`number`	`1.25`	在全螢幕模式中縮放工具列文字與圖示。
`toolbar.buttons.copy`	`boolean`	`true`	顯示複製來源碼按鈕。
`toolbar.buttons.fullscreen`	`boolean`	`true`	顯示全螢幕按鈕。
`toolbar.buttons.expand`	`boolean`	`true`	顯示展開按鈕。

loader.init、頁面設定與元件直接設定都會將值傳給 Mermaid，但此套件不會重新定義 Mermaid 的選項結構或行為。關於原生主題、圖表選項、安全性設定與指令，請使用官方的 Mermaid 設定文件。