互動

內建渲染器提供複製原始碼、瀏覽器全螢幕、展開覆蓋層與縮放／平移控制項。
已成功解析的自訂渲染器會將它們全部取代，因此本頁只適用內建渲染器。

選擇可見的工具列控制項

工具列會顯示在每張內建圖表上方。預設會啟用標題與控制項：

export default defineNuxtConfig({
  contentMermaid: {
    toolbar: {
      title: 'Architecture',
      fontSize: '14px',
      fullscreenToolbarScale: 1.25,
      buttons: {
        copy: true,
        fullscreen: true,
        expand: true,
      },
    },
  },
})

copy 會複製 Mermaid 原始碼。
嘗試後，按鈕標題與可存取標籤會暫時顯示 Copied 或 Copy failed；渲染器會先使用 Clipboard API，接著嘗試瀏覽器的舊式複製備援方式。
只有瀏覽器支援 Fullscreen API 時才顯示 fullscreen。expand 會開啟頁內覆蓋層。

將按鈕設為 false 可隱藏它。隱藏 expand 按鈕不會停用點擊圖表來開啟覆蓋層；請用 expand.invokeOpenOn.diagramClick 個別控制。

設定開啟與關閉

預設會啟用 expand。其關閉控制項可分別設定：

export default defineNuxtConfig({
  contentMermaid: {
    expand: {
      margin: 24,
      invokeOpenOn: {
        diagramClick: true,
      },
      invokeCloseOn: {
        esc: true,
        wheel: true,
        swipe: true,
        overlayClick: true,
        closeButtonClick: true,
      },
    },
  },
})

margin 會在展開的 SVG 周圍保留像素空間。設定 expand: false 可完全停用此功能。
布林預設組態與物件修補的差異請參閱 設定。

完整的展開選項路徑、預設值與效果，請參閱 展開設定。

瀏覽器全螢幕控制項依瀏覽器的一般全螢幕行為離開，不使用展開覆蓋層的關閉規則。

縮放與平移大型圖表

全螢幕與展開覆蓋層會顯示縮小、放大、百分比與重設控制項。兩種檢視都使用相同對應：

在展開覆蓋層中，於圖表上未使用修飾鍵的滾輪不會縮放；它會顯示一次性提示，提示使用 Ctrl 或 ⌘ 加上捲動。
在覆蓋層背景上滾輪會遵循已設定的關閉行為。捏合是圖表操作，不會視為滑動關閉手勢。

維持控制項可理解且可存取

內建控制項使用原生按鈕與可存取標籤，包括 Copy、Enter/Exit fullscreen、Expand/Collapse diagram、Zoom In/Out、Reset Zoom 與 Minimize diagram。鍵盤使用者可以操作控制項，並在圖表展開或全螢幕時使用縮放快捷鍵。

停用某個關閉路徑時，請提供另一個可觸及的關閉路徑。特別是同時關閉 esc、overlayClick 與 closeButtonClick 時，使用者可能沒有明顯方式離開展開檢視。取代內建渲染器時，請在自訂元件重新實作對等的標籤、鍵盤存取、焦點行為與觸控操作方式。