@barzhsieh/nuxt-content-mermaid 2.1.2 → 2.2.0

package/README.md

@@ -1,5 +1,7 @@
 [English](./README.md) | [中文](./README.zh-TW.md)
 
+[![nuxt-content-social-card](https://raw.githubusercontent.com/andy820621/nuxt-content-mermaid/main/src/assets/nuxt-content-mermaid.webp)](https://www.npmjs.com/package/@barzhsieh/nuxt-content-mermaid)
+
 # nuxt-content-mermaid
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -103,6 +105,30 @@ export default defineNuxtConfig({
       spinner: undefined,
       error: undefined,
     },
+    toolbar: {
+      title: "mermaid",
+      fontSize: "14px",
+      fullscreenToolbarScale: 1.25,
+      buttons: {
+        copy: true,
+        fullscreen: true,
+        expand: true,
+      },
+    },
+    expand: {
+      enabled: true,
+      margin: 0,
+      invokeOpenOn: {
+        diagramClick: true,
+      },
+      invokeCloseOn: {
+        esc: true,
+        wheel: true,
+        swipe: true,
+        overlayClick: true,
+        closeButtonClick: true,
+      },
+    },
   },
 });
 ```
@@ -140,8 +166,95 @@ Color mode integration is automatic when `@nuxtjs/color-mode` is installed; manu
 | `components.spinner`      | `string` | `undefined` | Optional: global loading spinner component name.                         |
 | `components.error`        | `string` | `undefined` | Optional: global error component name when Mermaid rendering fails.      |
 
+**toolbar**
+
+| Option                     | Type               | Default | Description                                 |
+| :------------------------- | :----------------- | :------ | :------------------------------------------ |
+| `toolbar.title`            | `string`           | `'mermaid'` | Default toolbar title for Mermaid blocks.   |
+| `toolbar.fontSize`         | `string \| number` | `'14px'`    | Default toolbar font size.                  |
+| `toolbar.fullscreenToolbarScale` | `number`     | `1.25`      | Scale factor for toolbar font/icon size in fullscreen. |
+| `toolbar.buttons.copy`     | `boolean`          | `true`  | Show copy-source button in the toolbar.     |
+| `toolbar.buttons.fullscreen` | `boolean`        | `true`  | Show fullscreen button in the toolbar.      |
+| `toolbar.buttons.expand`     | `boolean`          | `true`  | Show expand button in the toolbar.            |
+
+**expand**
+
+Control SVG expand interactions. You can also set `expand: false` to disable it, or `expand: true` to use defaults.
+
+| Option                     | Type      | Default | Description                                                                |
+| :------------------------- | :-------- | :------ | :------------------------------------------------------------------------- |
+| `expand.enabled`                    | `boolean` | `true` | Enable or disable expand features entirely.                   |
+| `expand.margin`                     | `number`  | `0`    | Margin (px) around the expanded SVG within the viewport. |
+| `expand.invokeOpenOn.diagramClick`  | `boolean` | `true` | Allow clicking the SVG to open expand overlay.                        |
+| `expand.invokeCloseOn.esc`          | `boolean` | `true` | Allow Escape key to close.                                  |
+| `expand.invokeCloseOn.wheel`        | `boolean` | `true` | Allow mouse wheel to close.                                 |
+| `expand.invokeCloseOn.swipe`        | `boolean` | `true` | Allow swipe gesture to close.                               |
+| `expand.invokeCloseOn.overlayClick` | `boolean` | `true` | Allow clicking the overlay background to close.             |
+| `expand.invokeCloseOn.closeButtonClick`| `boolean`| `true` | Show the overlay close button.                              |
+
+**Pan & Zoom (Expand Overlay / Fullscreen)**
+
+When fullscreen or expand mode is active, users can pan and zoom the diagram:
+
+| Interaction | Desktop | Mobile |
+|:---|:---|:---|
+| **Pan** | `Space` + Drag | 1-finger Drag |
+| **Zoom** | `Ctrl/⌘` + Scroll | 2-finger Pinch |
+| **Keyboard** | `+`/`-` to zoom, Arrow keys to pan, `0` to reset | — |
+
+A zoom toolbar appears with +/−/Reset buttons and a percentage display.
+
+Use `toolbar.fullscreenToolbarScale` to scale the fullscreen toolbar and zoom controls.
+
+
 > **Note**: All options can be overridden at runtime via `runtimeConfig.public.contentMermaid` (`runtimeConfig.public.mermaidContent` remains supported but deprecated).
 
+## Styling (CSS Variables)
+
+This module ships global CSS variables (from `runtime/styles.css`) so the Mermaid wrapper and expand overlay share the same palette. You can override them in your app:
+
+```css
+:root {
+  --ncm-code-bg: #f3f4f6;
+  --ncm-code-bg-hover: #e5e7eb;
+  --ncm-border: #e5e7eb;
+  --ncm-text: #111827;
+  --ncm-text-muted: #4b5563;
+  --ncm-text-xmuted: #6b7280;
+  --ncm-overlay-bg: rgba(255, 255, 255, 0.98);
+}
+
+html[data-theme="dark"],
+.dark {
+  --ncm-code-bg: #111827;
+  --ncm-code-bg-hover: #1f2937;
+  --ncm-border: #1f2937;
+  --ncm-text: #f9fafb;
+  --ncm-text-muted: #9ca3af;
+  --ncm-text-xmuted: #6b7280;
+  --ncm-overlay-bg: rgba(17, 24, 39, 0.98);
+}
+```
+
+Variables:
+- `--ncm-code-bg`: Mermaid block background.
+- `--ncm-code-bg-hover`: Hover background for toolbar buttons.
+- `--ncm-border-color`: Border color for the block and toolbar.
+- `--ncm-border-width`: Border thickness.
+- `--ncm-border-style`: Border style.
+- `--ncm-border`: Composite shorthand (width, style, color) for borders.
+- `--ncm-border-bottom`: Border style applied to the toolbar bottom.
+- `--ncm-text`: Primary text color.
+- `--ncm-text-muted`: Title and secondary text.
+- `--ncm-text-xmuted`: Toolbar icon and subtle UI text.
+- `--ncm-overlay-bg`: Expand overlay background (defaults to `--ncm-code-bg`).
+- `--ncm-expand-target-bg`: Background color shown behind the expanded SVG when `expand.margin` leaves breathing room.
+- `--ncm-overlay-opacity`: Overlay transparency (thinned when `expand.margin` creates breathing room).
+- `--ncm-overlay-backdrop`: `backdrop-filter` applied to the overlay when it becomes visible.
+- `--ncm-hint-bg`: Zoom hint toast background (default: `rgba(0,0,0,0.75)`).
+- `--ncm-hint-text`: Zoom hint toast text color (default: `#fff`).
+- `--ncm-hint-radius`: Zoom hint toast border radius (default: `8px`).
+
 ## Advanced Usage
 
 ### Debug mode
@@ -229,9 +342,57 @@ The actual priority order when settings take effect is as follows:
 2. **Frontmatter `config`** — merged on top of the module's `loader.init`.
 3. **Module-level `contentMermaid.loader.init`** — Project default settings.
 
+### Mermaid Inline Attributes & YAML Frontmatter
+
+You can control Mermaid blocks in three ways: inline attrs, Mermaid YAML frontmatter, and `%%{init}%%` directives.
+
+#### Inline attrs (fence info)
+
+Use inline attrs on the `mermaid` fence to pass props to the wrapper component or set Mermaid YAML fields (including `toolbar` options like title/fontSize and `toolbar.buttons.*`).
+
+````markdown
+```mermaid {title="Diagram A" toolbar='{"title":"My Diagram","fontSize":"14px"}' config='{"theme":"dark"}'}
+graph TD
+  A --> B
+```
+````
+
+#### Mermaid YAML frontmatter (inside the block)
+
+Place Mermaid’s own YAML frontmatter at the top of the code block to affect SVG rendering (e.g. title, displayMode, config), and you can also provide `toolbar` values for the wrapper component (including `toolbar.buttons.copy: true`).
+
+````markdown
+```mermaid
+---
+title: Sample Flowchart
+displayMode: compact
+config:
+  theme: dark
+toolbar:
+  title: "Sample Diagram"
+  buttons:
+    copy: true
+---
+graph TD
+  A --> B
+```
+````
+
+#### `%%{init}%%` directive (inside the block)
+
+Use Mermaid directives to set render options directly in the diagram definition.
+
+````markdown
+```mermaid
+%%{init: { 'theme': 'forest', 'flowchart': { 'curve': 'step' } }}%%
+graph TD
+  A --> B
+```
+````
+
 ### Custom Rendering Component
 
-If you want full control over rendering (for example to add a border, zoom controls, or other UI), you can provide a custom component via `components.renderer`.
+If you want full control over rendering (for example to add a border, expand controls, or other UI), you can provide a custom component via `components.renderer`.
 
 1. Specify the component name in `nuxt.config.ts`:
 

package/README.zh-TW.md

@@ -1,4 +1,6 @@
-[English](./README.md) | [中文](./README.zh-TW.md)
+[中文](./README.zh-TW.md) | [English](./README.md) 
+
+[![nuxt-content-social-card](https://raw.githubusercontent.com/andy820621/nuxt-content-mermaid/main/src/assets/nuxt-content-mermaid.webp)](https://www.npmjs.com/package/@barzhsieh/nuxt-content-mermaid)
 
 # nuxt-content-mermaid
 
@@ -103,6 +105,30 @@ export default defineNuxtConfig({
       spinner: undefined,
       error: undefined,
     },
+    toolbar: {
+      title: "mermaid",
+      fontSize: "14px",
+      fullscreenToolbarScale: 1.25,
+      buttons: {
+        copy: true,
+        fullscreen: true,
+        expand: true,
+      },
+    },
+    expand: {
+      enabled: true,
+      margin: 0,
+      invokeOpenOn: {
+        diagramClick: true,
+      },
+      invokeCloseOn: {
+        esc: true,
+        wheel: true,
+        swipe: true,
+        overlayClick: true,
+        closeButtonClick: true,
+      },
+    },
   },
 });
 ```
@@ -140,8 +166,96 @@ export default defineNuxtConfig({
 | `components.spinner`     | `string` | `undefined` | 指定全域的 Loading 元件名稱。                          |
 | `components.error`       | `string` | `undefined` | 指定全域的錯誤顯示元件名稱，渲染失敗時會使用。         |
 
+**toolbar**
+
+| 參數                    | 類型               | 預設值 | 說明                                   |
+| :---------------------- | :----------------- | :----- | :------------------------------------- |
+| `toolbar.title`         | `string`           | `'mermaid'` | Mermaid 工具列預設標題。               |
+| `toolbar.fontSize`      | `string \| number` | `'14px'`    | Mermaid 工具列預設字體大小。           |
+| `toolbar.fullscreenToolbarScale` | `number`    | `1.25`      | fullscreen 時工具列字體/圖示的放大倍率。 |
+| `toolbar.buttons.copy`  | `boolean`          | `true`  | 顯示工具列複製原始 Mermaid 的按鈕。    |
+| `toolbar.buttons.fullscreen` | `boolean`     | `true`  | 顯示工具列全螢幕按鈕。                 |
+| `toolbar.buttons.expand`  | `boolean`          | `true`  | 顯示工具列放大按鈕。                   |
+
+**expand**
+
+控制 SVG 放大互動行為，也可直接設為 `expand: false` 來停用，或 `expand: true` 使用預設值。
+
+| 參數                      | 類型      | 預設值 | 說明                                                     |
+| :------------------------ | :-------- | :----- | :------------------------------------------------------- |
+| `expand.enabled`                      | `boolean` | `true` | 是否啟用放大功能。                                        |
+| `expand.margin`                       | `number`  | `0`    | 放大後 SVG 在視窗內保留的邊距（px）。                          |
+| `expand.invokeOpenOn.diagramClick`    | `boolean` | `true` | 允許直接點擊 SVG 開啟放大。                                   |
+| `expand.invokeCloseOn.esc`            | `boolean` | `true` | 允許按 ESC 關閉。                                         |
+| `expand.invokeCloseOn.wheel`          | `boolean` | `true` | 允許滑鼠滾輪關閉。                                        |
+| `expand.invokeCloseOn.swipe`          | `boolean` | `true` | 允許滑動手勢關閉。                                        |
+| `expand.invokeCloseOn.overlayClick`   | `boolean` | `true` | 允許點擊 overlay 背景關閉。                              |
+| `expand.invokeCloseOn.closeButtonClick`| `boolean` | `true` | 顯示 overlay 關閉按鈕。                                   |
+
+**平移與縮放 (Expand Overlay / Fullscreen)**
+
+當放大 Fullscreen 或是 Expand 模式時，使用者可平移與縮放圖表：
+
+| 操作 | 桌機 | 行動裝置 |
+|:---|:---|:---|
+| **平移 (Pan)** | `Space` + 拖曳 | 單指拖曳 |
+| **縮放 (Zoom)** | `Ctrl/⌘` + 滾輪 | 雙指捏合 |
+| **鍵盤** | `+`/`-` 縮放、方向鍵平移、`0` 重置 | — |
+
+放大介面會顯示縮放工具列，包含 +/−/Reset 按鈕與百分比顯示。
+
+可透過 `toolbar.fullscreenToolbarScale` 調整 Fullscreen 工具列與縮放控制的尺寸。
+
+
 > **Note**: 所有設定皆可透過 `runtimeConfig.public.contentMermaid` 在部署時進行覆寫（`runtimeConfig.public.mermaidContent` 仍支援但已棄用）。
 
+## 樣式自訂（CSS 變數）
+
+模組會提供全域 CSS 變數（來源為 `runtime/styles.css`），讓 Mermaid 區塊與放大 overlay 使用同一套配色。你可以在專案中覆寫：
+
+```css
+:root {
+  --ncm-code-bg: #f3f4f6;
+  --ncm-code-bg-hover: #e5e7eb;
+  --ncm-border: #e5e7eb;
+  --ncm-text: #111827;
+  --ncm-text-muted: #4b5563;
+  --ncm-text-xmuted: #6b7280;
+  --ncm-overlay-bg: rgba(255, 255, 255, 0.98);
+}
+
+html[data-theme="dark"],
+.dark {
+  --ncm-code-bg: #111827;
+  --ncm-code-bg-hover: #1f2937;
+  --ncm-border: #1f2937;
+  --ncm-text: #f9fafb;
+  --ncm-text-muted: #9ca3af;
+  --ncm-text-xmuted: #6b7280;
+  --ncm-overlay-bg: rgba(17, 24, 39, 0.98);
+}
+```
+
+可覆寫的變數：
+可覆寫的變數：
+- `--ncm-code-bg`：Mermaid 區塊背景色
+- `--ncm-code-bg-hover`：工具列按鈕 hover 背景
+- `--ncm-border-color`：區塊與工具列的邊框顏色
+- `--ncm-border-width`：邊框厚度
+- `--ncm-border-style`：邊框樣式
+- `--ncm-border`：邊框 shorthand（寬度、樣式、顏色）
+- `--ncm-border-bottom`：工具列底部的邊框
+- `--ncm-text`：主要文字顏色
+- `--ncm-text-muted`：標題與次要文字
+- `--ncm-text-xmuted`：工具列 icon 與更淡的文字
+- `--ncm-overlay-bg`：放大 overlay 背景（預設跟 `--ncm-code-bg` 一致）
+- `--ncm-expand-target-bg`：當 `expand.margin > 0` 時，放大後留白的 SVG 外框背景，可以與 overlay 做出區隔
+- `--ncm-overlay-opacity`：overlay 的透明度（搭配 margin 留白時可微調濃淡）
+- `--ncm-overlay-backdrop`：顯示 overlay 時加上的 `backdrop-filter`，可自訂 blur/效果
+- `--ncm-hint-bg`：縮放提示訊息背景色（預設 `rgba(0,0,0,0.75)`）
+- `--ncm-hint-text`：縮放提示訊息文字顏色（預設 `#fff`）
+- `--ncm-hint-radius`：縮放提示訊息圓角（預設 `8px`）
+
 ## Advanced Usage
 
 ### Debug 模式
@@ -231,9 +345,59 @@ graph TD
 2. **frontmatter `config`** —— 深度合併在模組的 `loader.init` 之上。  
 3. **模組層級的 `contentMermaid.loader.init`** —— 專案的全域預設。  
 
+### Mermaid Inline attrs 與 YAML Frontmatter
+
+支援三種方式控制 Mermaid Svg 的渲染：inline attrs、Mermaid YAML frontmatter、`%%{init}%%` 指令。
+
+#### Inline attrs（fence info）
+
+在 `mermaid` fence 上使用 inline attrs，傳遞 wrapper props 或設定 Mermaid 的 YAML 欄位（包含 `toolbar` 的 title/fontSize 與 `toolbar.buttons.*`）。
+
+````markdown
+```mermaid {title="Diagram A" toolbar='{"title":"My Diagram","fontSize":"14px"}' config='{"theme":"dark"}'}
+graph TD
+  A --> B
+```
+````
+
+#### Mermaid YAML frontmatter（block 內）
+
+把 Mermaid 的 YAML frontmatter 放在 code block 最前面，用來影響 SVG 輸出（例如 title、displayMode、config），也可以提供 `toolbar` 給 wrapper 元件（包含 `toolbar.buttons.copy: true`）。
+
+````markdown
+```mermaid
+---
+title: Sample Flowchart
+displayMode: compact
+config:
+  theme: dark
+toolbar:
+  title: "Sample Diagram"
+  buttons:
+    copy: true
+    expand: true
+    fullscreen: false
+---
+graph TD
+  A --> B
+```
+````
+
+#### `%%{init}%%` 指令（block 內）
+
+使用 Mermaid directive，直接在圖表定義內設定渲染選項。
+
+````markdown
+```mermaid
+%%{init: { 'theme': 'forest', 'flowchart': { 'curve': 'step' } }}%%
+graph TD
+  A --> B
+```
+````
+
 ### 自訂渲染元件 (Custom Component)
 
-若需完全接管 Mermaid 的渲染行為（例如：加入外框、ZoomIn/Out 功能），可指定 `components.renderer`。
+若需完全接管 Mermaid 的渲染行為（例如：加入外框、Expand/Collapse 功能），可指定 `components.renderer`。
 
 1. 在 `nuxt.config.ts` 中指定元件名稱：
 

package/dist/module.d.mts

@@ -1,5 +1,76 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { MermaidConfig } from 'mermaid';
+import { Mermaid, MermaidConfig } from 'mermaid';
+import { ExpandOptions } from '../dist/runtime/types/expand.js';
+import { DefineComponent } from 'vue';
+
+type MermaidToolbarButtons = {
+  copy?: boolean
+  fullscreen?: boolean
+  expand?: boolean
+}
+
+type MermaidToolbarOptions = {
+  title?: string
+  fontSize?: string | number
+  fullscreenToolbarScale?: number
+  buttons?: MermaidToolbarButtons
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $mermaid: () => Promise<Mermaid>
+  }
+}
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $mermaid: () => Promise<Mermaid>
+  }
+  interface GlobalComponents {
+    Mermaid: DefineComponent<{
+      config?: MermaidConfig
+      toolbar?: MermaidToolbarOptions
+      code?: string
+    }>
+  }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig {
+    contentMermaid?: ModuleOptions
+    /**
+     * @deprecated Use `contentMermaid`
+     */
+    mermaidContent?: ModuleOptions
+  }
+
+  interface NuxtOptions {
+    contentMermaid?: ModuleOptions
+    /**
+     * @deprecated Use `contentMermaid`
+     */
+    mermaidContent?: ModuleOptions
+  }
+
+  interface PublicRuntimeConfig {
+    contentMermaid?: Partial<ModuleOptions>
+    /**
+     * @deprecated Use `contentMermaid`
+     */
+    mermaidContent?: Partial<ModuleOptions>
+  }
+}
+
+declare global {
+  interface ImportMeta {
+    glob<T = unknown>(
+      pattern: string,
+      options?: {
+        eager?: boolean
+        import?: string
+      },
+    ): Record<string, () => Promise<T>>
+  }
+}
 
 interface ModuleOptions {
     /**
@@ -64,6 +135,17 @@ interface ModuleOptions {
          */
         error?: string;
     };
+    /**
+     * Options related to SVG expand (lightbox) interactions
+     */
+    /**
+     * Expand configuration. `false` disables expand, `true` uses defaults.
+     */
+    expand?: ExpandOptions | boolean;
+    /**
+     * Default toolbar settings for Mermaid component
+     */
+    toolbar?: MermaidToolbarOptions;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.20.1 || ^4.1.0"
   },
-  "version": "2.1.2",
+  "version": "2.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +1,11 @@
 import { defineNuxtModule, useLogger, createResolver, addVitePlugin, addPlugin, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
-import { DEFAULT_MERMAID_CONFIG, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_FRONTMATTER_CONFIG_KEY } from '../dist/runtime/constants.js';
+import { DEFAULT_MERMAID_CONFIG, DEFAULT_TOOLBAR_OPTIONS, DEFAULT_EXPAND_OPTIONS, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_FRONTMATTER_CONFIG_KEY } from '../dist/runtime/constants.js';
+import { parseInlineAttrs, parseMermaidFrontmatter, extractMermaidInlineOverrides, applyMermaidFrontmatterOverrides, mergeToolbarProps, extractToolbarProps } from '../dist/runtime/utils/mermaid-transform.js';
+import { isNonEmptyRecord, stringifyInlineValue } from '../dist/runtime/utils/index.js';
 
-const MERMAID_BLOCK = /```mermaid([\s\S]*?)```/gi;
 const SANITIZE_URL_PACKAGE = "@braintree/sanitize-url";
+const MERMAID_FENCE_RE = /^[ \t]*(?:`{3,}|~{3,})[ \t]*mermaid(?:$|[ \t{[])/im;
 const DEFAULTS = {
   enabled: true,
   loader: {
@@ -18,7 +20,9 @@ const DEFAULTS = {
     renderer: void 0,
     spinner: void 0,
     error: void 0
-  }
+  },
+  expand: DEFAULT_EXPAND_OPTIONS,
+  toolbar: DEFAULT_TOOLBAR_OPTIONS
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -46,6 +50,8 @@ const module$1 = defineNuxtModule({
     );
     const resolver = createResolver(import.meta.url);
     const runtimeDir = resolver.resolve("./runtime");
+    nuxt.options.css ||= [];
+    nuxt.options.css.push(resolver.resolve("./runtime/styles.css"));
     const publicRuntimeConfig = nuxt.options.runtimeConfig.public;
     const runtimeOverrides = publicRuntimeConfig.contentMermaid || publicRuntimeConfig.mermaidContent || {};
     if (!publicRuntimeConfig.contentMermaid && publicRuntimeConfig.mermaidContent)
@@ -106,7 +112,7 @@ export {}
     nuxt.hook("content:file:beforeParse", (ctx) => {
       const { file } = ctx;
       if (!file.id?.endsWith(".md")) return;
-      if (!file.body.toLowerCase().includes("```mermaid")) return;
+      if (!MERMAID_FENCE_RE.test(file.body)) return;
       file.body = transformMermaidCodeBlocks(
         file.body,
         baseMermaidComponentName
@@ -115,12 +121,123 @@ export {}
   }
 });
 function transformMermaidCodeBlocks(body, componentName, frontmatterConfigKey = DEFAULT_FRONTMATTER_CONFIG_KEY) {
-  return body.replace(MERMAID_BLOCK, (_, rawCode = "") => {
+  const newline = body.includes("\r\n") ? "\r\n" : "\n";
+  const lines = body.split(newline);
+  const output = [];
+  let inFence = false;
+  let fenceChar = null;
+  let fenceLength = 0;
+  const isClosingFence = (line) => {
+    if (!fenceChar) return false;
+    const trimmed = line.trim();
+    if (trimmed.length < fenceLength) return false;
+    for (const char of trimmed) {
+      if (char !== fenceChar) return false;
+    }
+    return true;
+  };
+  const isFenceMarkerChar = (char) => char === "`" || char === "~";
+  const parseFence = (line) => {
+    let index = 0;
+    while (index < line.length && (line[index] === " " || line[index] === "	"))
+      index++;
+    const indent = line.slice(0, index);
+    const markerChar = line[index];
+    if (!isFenceMarkerChar(markerChar))
+      return null;
+    let markerEnd = index;
+    while (markerEnd < line.length && line[markerEnd] === markerChar)
+      markerEnd++;
+    const markerLength = markerEnd - index;
+    if (markerLength < 3)
+      return null;
+    return {
+      indent,
+      markerChar,
+      markerLength,
+      info: line.slice(markerEnd).trim()
+    };
+  };
+  const isMermaidFence = (info) => {
+    if (!info) return false;
+    const lower = info.toLowerCase();
+    if (!lower.startsWith("mermaid")) return false;
+    const next = lower.slice("mermaid".length, "mermaid".length + 1);
+    return next === "" || /\s/.test(next) || next === "{" || next === "[";
+  };
+  const buildComponentTag = (encoded, toolbar) => {
+    const attrs = [
+      `:config="${frontmatterConfigKey}"`
+    ];
+    if (toolbar && isNonEmptyRecord(toolbar)) {
+      attrs.push(`:toolbar='${stringifyInlineValue(toolbar)}'`);
+    }
+    attrs.push(`code="${encoded}"`);
+    return `<${componentName} ${attrs.join(" ")}></${componentName}>`;
+  };
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    if (inFence) {
+      output.push(line);
+      if (isClosingFence(line)) {
+        inFence = false;
+        fenceChar = null;
+        fenceLength = 0;
+      }
+      continue;
+    }
+    const fence = parseFence(line);
+    if (!fence) {
+      output.push(line);
+      continue;
+    }
+    if (!isMermaidFence(fence.info)) {
+      inFence = true;
+      fenceChar = fence.markerChar;
+      fenceLength = fence.markerLength;
+      output.push(line);
+      continue;
+    }
+    let closingIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+      const trimmed = lines[j].trim();
+      if (trimmed.length < fence.markerLength) continue;
+      let isFence = true;
+      for (const char of trimmed) {
+        if (char !== fence.markerChar) {
+          isFence = false;
+          break;
+        }
+      }
+      if (isFence) {
+        closingIndex = j;
+        break;
+      }
+    }
+    if (closingIndex === -1) {
+      output.push(line);
+      continue;
+    }
+    const rawCode = lines.slice(index + 1, closingIndex).join(newline);
     const code = rawCode.trim();
-    if (!code) return _;
-    const encoded = encodeURIComponent(code);
-    return `<${componentName} :config="${frontmatterConfigKey}" code="${encoded}"></${componentName}>`;
-  });
+    if (!code) {
+      output.push(...lines.slice(index, closingIndex + 1));
+      index = closingIndex;
+      continue;
+    }
+    const inlineAttrs = parseInlineAttrs(fence.info);
+    const frontmatterInfo = parseMermaidFrontmatter(rawCode, newline);
+    const inlineOverrides = extractMermaidInlineOverrides(inlineAttrs);
+    const mergedCode = inlineOverrides ? applyMermaidFrontmatterOverrides(rawCode, newline, frontmatterInfo, inlineOverrides, fence.indent) : rawCode;
+    const toolbarProps = mergeToolbarProps(
+      extractToolbarProps(frontmatterInfo?.data),
+      extractToolbarProps(inlineAttrs)
+    );
+    const encoded = encodeURIComponent(mergedCode.trim());
+    output.push(`${fence.indent}${buildComponentTag(encoded, toolbarProps)}`);
+    index = closingIndex;
+  }
+  return output.join(newline);
 }
 
 export { module$1 as default, transformMermaidCodeBlocks };

package/dist/runtime/components/Mermaid.d.vue.ts

@@ -1,9 +1,11 @@
 import type { MermaidConfig } from 'mermaid';
+import type { MermaidToolbarOptions } from '~/src/types/mermaid';
 type __VLS_Props = {
     config?: MermaidConfig | string | unknown;
+    toolbar?: MermaidToolbarOptions;
     code?: string;
 };
-declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_21: {
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_52: {}, __VLS_54: {}, __VLS_62: {
     error: unknown;
     source: string;
 };
@@ -12,11 +14,11 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_52) => any;
 } & {
-    loading?: (props: typeof __VLS_13) => any;
+    loading?: (props: typeof __VLS_54) => any;
 } & {
-    error?: (props: typeof __VLS_21) => any;
+    error?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;