@barzhsieh/nuxt-content-mermaid 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2025-PRESENT BarZ Hsieh<https://github.com/andy820621>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,194 @@
+[English](./README.md) | [中文](./README.zh-TW.md)
+
+# nuxt-mermaid-content
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
+[![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
+
+A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.
+
+## Features
+
+- **Automatic conversion**: Parses Markdown code blocks and replaces them with a `<Mermaid>` rendering component.
+- **Performance friendly**: Supports lazy loading — Mermaid core and related resources are only loaded when the component mounts.
+- **Theme integration**: Integrates with `@nuxtjs/color-mode` to automatically switch between light and dark Mermaid themes.
+- **Highly customizable**: Allows custom wrapper components, loading spinners, and custom CDN or local import sources.
+- **Runtime config**: Settings can be overridden at deployment time through runtime config / environment variables.
+
+## Requirements
+
+- Nuxt 4 (`nuxt@^4.0.0`)
+- `@nuxt/content@^3.8.0`
+
+## Quick Setup
+
+### 1. Install the module
+
+```bash
+npx nuxi module add @barzhsieh/nuxt-content-mermaid
+```
+
+### 2. Configure `nuxt.config.ts`
+
+Make sure the module is included in the `modules` array (if you used `nuxi module add`, this is added automatically):
+
+```ts
+export default defineNuxtConfig({
+  modules: ["@barzhsieh/nuxt-content-mermaid", "@nuxt/content"],
+});
+```
+
+### 3. Use Mermaid in Markdown
+
+Add Mermaid code blocks inside `.md` files under the `content/` directory:
+
+````markdown
+# Flowchart example
+
+```mermaid
+graph LR
+  A[Start] --> B{Is it working?}
+  B -- Yes --> C[Great!]
+  B -- No --> D[Debug]
+```
+````
+
+The module will automatically transform the block into an SVG chart component.
+
+## Configuration
+
+You can configure the module globally through the `mermaidContent` option.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  mermaidContent: {
+    enabled: true,
+    loader: {
+      importSource:
+        "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs",
+      init: {
+        securityLevel: "strict",
+        // additional options passed to mermaid.initialize()
+      },
+    },
+    theme: {
+      useColorModeTheme: true,
+      light: "default",
+      dark: "dark",
+    },
+    components: {
+      renderer: undefined,
+      spinner: undefined,
+    },
+  },
+});
+```
+
+### Options
+
+**Top-level**
+
+| Option    | Type      | Default | Description                                          |
+| :-------- | :-------- | :------ | :--------------------------------------------------- |
+| `enabled` | `boolean` | `true`  | Whether the module and its conversion logic are on.  |
+
+**loader**
+
+| Option                 | Type               | Default      | Description                                                            |
+| :--------------------- | :----------------- | :----------- | :--------------------------------------------------------------------- |
+| `loader.importSource`  | `string`           | jsDelivr CDN | Source to load Mermaid ESM from (supports CDN or a local path).        |
+| `loader.init`          | `MermaidConfig`    | `{ startOnLoad: false }` | Raw options object passed to `mermaid.initialize`.                     |
+
+**theme**
+
+| Option                      | Type    | Default     | Description                                                                                               |
+| :-------------------------- | :------ | :---------- | :-------------------------------------------------------------------------------------------------------- |
+| `theme.useColorModeTheme`   | boolean | `true`      | If `@nuxtjs/color-mode` is installed, automatically follow its current theme.                             |
+| `theme.light`               | string  | `'default'` | Mermaid theme to use when color mode is light (and as fallback when color-mode is off).                   |
+| `theme.dark`                | string  | `'dark'`    | Mermaid theme to use when color mode is dark (and as fallback when color-mode is off).                    |
+
+**components**
+
+| Option                    | Type     | Default     | Description                                                              |
+| :------------------------ | :------- | :---------- | :----------------------------------------------------------------------- |
+| `components.renderer`     | `string` | `undefined` | Optional: custom Mermaid renderer component name.                        |
+| `components.spinner`      | `string` | `undefined` | Optional: global loading spinner component name.                         |
+
+> **Note**: All options can be overridden at runtime via `runtimeConfig.public.mermaidContent`.
+
+## Advanced Usage
+
+### Theme & Color Mode
+
+The module determines the active Mermaid theme with the following priority:
+
+1. If `theme.useColorModeTheme: true` _and_ `@nuxtjs/color-mode` is available:  
+   - `dark` → `theme.dark`  
+   - `light` → `theme.light`
+2. Otherwise (color-mode missing or `theme.useColorModeTheme` is `false`):  
+   - Use `loader.init.theme` if provided.  
+   - Else fall back to `theme.light`, then `theme.dark`.
+
+### 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`.
+
+1. Specify the component name in `nuxt.config.ts`:
+
+   ```ts
+   mermaidContent: {
+     components: {
+       renderer: "MyCustomMermaid",
+     },
+   }
+   ```
+
+2. Implement the component in `components/MyCustomMermaid.vue`:
+
+   ```vue
+   <script setup lang="ts">
+   // You can consume slot content or invoke useMermaid() logic here
+   </script>
+
+   <template>
+     <div class="custom-wrapper border rounded p-4">
+       <Mermaid>
+         <slot />
+       </Mermaid>
+     </div>
+   </template>
+   ```
+
+## Contribution
+
+<details>
+<summary>Local Development Commands</summary>
+
+```bash
+pnpm install
+pnpm dev:prepare
+pnpm dev       # Run playground
+pnpm test      # Run tests
+```
+
+</details>
+
+## License
+
+[MIT License](./LICENSE)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@barzhsieh/nuxt-content-mermaid/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[npm-downloads-src]: https://img.shields.io/npm/dm/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[license-src]: https://img.shields.io/npm/l/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/README.zh-TW.md

@@ -0,0 +1,194 @@
+[English](./README.md) | [中文](./README.zh-TW.md)
+
+# nuxt-mermaid-content
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Mermaid](https://img.shields.io/badge/mermaid-11.x-0f5b9d?logo=mermaid)](https://mermaid.js.org/)
+[![Nuxt Content](https://img.shields.io/badge/Nuxt%20Content-3.x-00DC82?logo=nuxt.js)](https://content.nuxt.com/)
+
+專為 Nuxt + `@nuxt/content` 設計的 Mermaid 整合模組。能自動將 Markdown 中的 ```mermaid 區塊轉換為響應式的圖表元件，並支援 Lazy Loading 與深色模式切換。
+
+## Features
+
+- **自動轉換**：解析 Markdown 代碼區塊並替換為 `<Mermaid>` 渲染元件。
+- **效能優化**：支援 Lazy Loading，僅在元件掛載時載入 Mermaid 核心與資源。
+- **主題整合**：無縫整合 `@nuxtjs/color-mode`，自動切換 Light/Dark 對應主題。
+- **高度客製**：支援自訂渲染元件（Wrapper）、Loading Spinner 及 CDN 來源。
+- **Runtime Config**：支援透過環境變數動態覆寫設定。
+
+## 使用前提
+
+- Nuxt 4 (`nuxt@^4.0.0`)
+- `@nuxt/content@^3.8.0`（必須安裝）
+
+## Quick Setup
+
+### 1. 安裝模組
+
+```bash
+npx nuxi module add @barzhsieh/nuxt-content-mermaid
+```
+
+### 2. 配置 `nuxt.config.ts`
+
+確保模組已加入 `modules` 清單（若使用 `nuxi module add` 則會自動加入）：
+
+```ts
+export default defineNuxtConfig({
+  modules: ["@barzhsieh/nuxt-content-mermaid", "@nuxt/content"],
+});
+```
+
+### 3. 在 Markdown 中使用
+
+在 `content/` 目錄下的 `.md` 檔案中直接撰寫 Mermaid 語法：
+
+````markdown
+# 流程圖範例
+
+```mermaid
+graph LR
+  A[Start] --> B{Is it working?}
+  B -- Yes --> C[Great!]
+  B -- No --> D[Debug]
+```
+````
+
+模組會自動將其轉換為 SVG 圖表。
+
+## Configuration
+
+你可以透過 `mermaidContent` 選項進行全域設定。
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  mermaidContent: {
+    enabled: true,
+    loader: {
+      importSource:
+        "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs",
+      init: {
+        securityLevel: "strict",
+        // 其他傳遞給 mermaid.initialize() 的參數
+      },
+    },
+    theme: {
+      useColorModeTheme: true,
+      light: "default",
+      dark: "dark",
+    },
+    components: {
+      renderer: undefined,
+      spinner: undefined,
+    },
+  },
+});
+```
+
+### 參數說明
+
+**Top-level**
+
+| 參數      | 類型      | 預設值 | 說明                           |
+| :-------- | :-------- | :----- | :----------------------------- |
+| `enabled` | `boolean` | `true` | 是否啟用模組與轉換邏輯。       |
+
+**loader**
+
+| 參數                  | 類型            | 預設值                  | 說明                                                       |
+| :-------------------- | :-------------- | :---------------------- | :--------------------------------------------------------- |
+| `loader.importSource` | `string`        | jsDelivr CDN            | 指定 Mermaid ESM 的載入來源（支援 CDN 或本地路徑）。       |
+| `loader.init`         | `MermaidConfig` | `{ startOnLoad: false }` | 直接傳遞給 `mermaid.initialize` 的原始設定。               |
+
+**theme**
+
+| 參數                        | 類型    | 預設值      | 說明                                                                                                    |
+| :-------------------------- | :------ | :---------- | :------------------------------------------------------------------------------------------------------ |
+| `theme.useColorModeTheme`   | boolean | `true`      | 若安裝了 `@nuxtjs/color-mode`，是否自動跟隨其主題。                                                    |
+| `theme.light`               | string  | `'default'` | 當 `colorMode` 為 light 時的主題，也可作為 fallback。                                                   |
+| `theme.dark`                | string  | `'dark'`    | 當 `colorMode` 為 dark 時的主題，也可作為 fallback。                                                    |
+
+**components**
+
+| 參數                     | 類型     | 預設值     | 說明                                                   |
+| :----------------------- | :------- | :--------- | :----------------------------------------------------- |
+| `components.renderer`    | `string` | `undefined` | 指定自訂的 Mermaid 實作元件名稱（見進階用法）。        |
+| `components.spinner`     | `string` | `undefined` | 指定全域的 Loading 元件名稱。                          |
+
+> **Note**: 所有設定皆可透過 `runtimeConfig.public.mermaidContent` 在部署時進行覆寫。
+
+## Advanced Usage
+
+### 主題與顏色模式 (Color Mode)
+
+模組會依據以下優先順序決定主題：
+
+1. 若 `theme.useColorModeTheme: true`，且專案有安裝 `@nuxtjs/color-mode`：  
+   - 偵測為 `dark` → 使用 `theme.dark`  
+   - 偵測為 `light` → 使用 `theme.light`
+2. 否則（color-mode 未安裝或 `theme.useColorModeTheme` 為 `false`）：  
+   - 優先使用 `loader.init.theme`。  
+   - 若未提供，依序回退至 `theme.light`，若沒有設置則會回退至 `theme.dark`。
+
+### 自訂渲染元件 (Custom Component)
+
+若需完全接管 Mermaid 的渲染行為（例如：加入外框、ZoomIn/Out 功能），可指定 `components.renderer`。
+
+1. 在 `nuxt.config.ts` 中指定元件名稱：
+
+   ```ts
+   mermaidContent: {
+     components: {
+       renderer: "MyCustomMermaid",
+     }
+   }
+   ```
+
+2. 在 `components/MyCustomMermaid.vue` 中實作：
+
+   ```vue
+   <script setup lang="ts">
+   // 你可以在此使用 slot 內容或自行呼叫 useMermaid() 等邏輯
+   </script>
+
+   <template>
+     <div class="custom-wrapper border rounded p-4">
+       <Mermaid>
+         <slot />
+       </Mermaid>
+     </div>
+   </template>
+   ```
+
+## Contribution
+
+<details>
+<summary>Local Development Commands</summary>
+
+```bash
+pnpm install
+pnpm dev:prepare
+pnpm dev       # Run playground
+pnpm test      # Run tests
+```
+
+</details>
+
+## License
+
+[MIT License](./LICENSE)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@barzhsieh/nuxt-content-mermaid/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[npm-downloads-src]: https://img.shields.io/npm/dm/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[license-src]: https://img.shields.io/npm/l/@barzhsieh/nuxt-content-mermaid.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@barzhsieh/nuxt-content-mermaid
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,56 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { MermaidConfig } from 'mermaid';
+
+interface ModuleOptions {
+    /**
+     * Whether to enable the entire Mermaid process
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Options related to loading mermaid
+     */
+    loader?: {
+        /**
+         * Mermaid ESM source, can be a CDN URL or local /public path
+         */
+        importSource?: string;
+        /**
+         * Pass-through to `mermaid.initialize`
+         */
+        init?: MermaidConfig;
+    };
+    /**
+     * Options related to theme handling
+     */
+    theme?: {
+        /**
+         * Whether to sync Mermaid theme with @nuxtjs/color-mode
+         * @default true
+         */
+        useColorModeTheme?: boolean;
+        light?: MermaidConfig['theme'];
+        dark?: MermaidConfig['theme'];
+    };
+    /**
+     * Names for custom implementation components
+     */
+    components?: {
+        /**
+         * Custom Mermaid implementation component name (e.g., 'MyMermaid').
+         * The Markdown transformation phase always outputs `<Mermaid>`, this setting only affects
+         * which component implementation `Mermaid.vue` delegates to at runtime.
+         */
+        renderer?: string;
+        /**
+         * Spinner component name to use while Mermaid is loading.
+         * This should be a globally available component name (e.g., under the project `components/` directory).
+         * If not provided, the module's built-in `Spinner.vue` will be used.
+         */
+        spinner?: string;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@barzhsieh/nuxt-content-mermaid",
+  "configKey": "mermaidContent",
+  "compatibility": {
+    "nuxt": "^4.0.0"
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,105 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponent, addTypeTemplate } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const DEFAULT_IMPORT_SOURCE = "https://cdn.jsdelivr.net/npm/mermaid@11.12.1/dist/mermaid.esm.min.mjs";
+const DEFAULT_LIGHT_THEME = "default";
+const DEFAULT_DARK_THEME = "dark";
+const DEFAULT_MERMAID_INIT = {
+  startOnLoad: false
+};
+
+const MERMAID_BLOCK = /```mermaid([\s\S]*?)```/gi;
+const DEFAULTS = {
+  enabled: true,
+  loader: {
+    importSource: DEFAULT_IMPORT_SOURCE,
+    init: { ...DEFAULT_MERMAID_INIT }
+  },
+  theme: {
+    useColorModeTheme: true,
+    light: DEFAULT_LIGHT_THEME,
+    dark: DEFAULT_DARK_THEME
+  },
+  components: {
+    renderer: void 0,
+    spinner: void 0
+  }
+};
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@barzhsieh/nuxt-content-mermaid",
+    configKey: "mermaidContent",
+    compatibility: {
+      nuxt: "^4.0.0"
+    }
+  },
+  defaults: {
+    ...DEFAULTS
+  },
+  setup(options, nuxt) {
+    const resolvedOptions = defu(options, DEFAULTS);
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = resolver.resolve("./runtime");
+    const publicRuntimeConfig = nuxt.options.runtimeConfig.public;
+    const runtimeOverrides = publicRuntimeConfig.mermaidContent || {};
+    const runtimeMermaidConfig = defu(
+      runtimeOverrides,
+      resolvedOptions
+    );
+    publicRuntimeConfig.mermaidContent = runtimeMermaidConfig;
+    const baseMermaidComponentName = "Mermaid";
+    const isEnabled = runtimeMermaidConfig.enabled !== false;
+    if (!isEnabled) return;
+    addPlugin({
+      src: resolver.resolve(runtimeDir, "plugins/mermaid.client"),
+      mode: "client"
+    });
+    addComponent({
+      name: baseMermaidComponentName,
+      filePath: resolver.resolve(runtimeDir, "components/Mermaid.vue")
+    });
+    addTypeTemplate({
+      filename: "types/mermaid-content.d.ts",
+      getContents: () => `
+import type { Mermaid } from 'mermaid'
+
+declare module '#app' {
+  interface NuxtApp {
+    $mermaid: () => Promise<Mermaid>
+  }
+}
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $mermaid: () => Promise<Mermaid>
+  }
+}
+export {}
+`
+    });
+    nuxt.hook("content:file:beforeParse", (ctx) => {
+      const { file } = ctx;
+      if (!file.id?.endsWith(".md")) return;
+      if (!file.body.toLowerCase().includes("```mermaid")) return;
+      file.body = transformMermaidCodeBlocks(
+        file.body,
+        baseMermaidComponentName
+      );
+    });
+  }
+});
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function transformMermaidCodeBlocks(body, componentName) {
+  return body.replace(MERMAID_BLOCK, (_, rawCode = "") => {
+    const code = rawCode.trim();
+    if (!code) return _;
+    const escaped = escapeHtml(code);
+    return `<${componentName}>
+<pre><code>${escaped}
+</code></pre>
+</${componentName}>`;
+  });
+}
+
+export { module$1 as default };

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

@@ -0,0 +1,21 @@
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    loading?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Mermaid.vue

@@ -0,0 +1,241 @@
+<script setup>
+import { useNuxtApp, useRuntimeConfig } from "#app";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  watch,
+  shallowRef
+} from "vue";
+import Spinner from "./Spinner.vue";
+const nuxtApp = useNuxtApp();
+const runtimeConfig = useRuntimeConfig();
+const mermaidRuntime = runtimeConfig.public?.mermaidContent || {};
+const isEnabled = mermaidRuntime.enabled !== false;
+const loaderOptions = mermaidRuntime.loader || {};
+const themeOptions = mermaidRuntime.theme || {};
+const componentOptions = mermaidRuntime.components || {};
+const colorMode = nuxtApp.$colorMode;
+const { $mermaid } = nuxtApp;
+const mermaidContainer = ref(null);
+const isMounted = ref(false);
+const hasRenderedOnce = ref(false);
+const isLoading = ref(false);
+let mermaidDefinition = "";
+let observer = null;
+const baseMermaidInit = loaderOptions.init || {};
+const useColorModeTheme = themeOptions.useColorModeTheme;
+const lightTheme = themeOptions.light;
+const darkTheme = themeOptions.dark;
+const mermaidTheme = computed(() => {
+  if (useColorModeTheme && colorMode)
+    return colorMode.value === "dark" ? darkTheme : lightTheme;
+  return baseMermaidInit.theme ?? lightTheme ?? darkTheme;
+});
+const configuredSpinnerName = computed(
+  () => componentOptions.spinner?.trim() || ""
+);
+const customSpinner = shallowRef(null);
+const configuredMermaidImplName = computed(
+  () => componentOptions.renderer?.trim() || ""
+);
+const customMermaidImpl = shallowRef(null);
+function normalizeIdentifier(value) {
+  return value.replace(/\.vue$/i, "").split(/[\\/]/).pop()?.replace(/[\s_-]+/g, "").toLowerCase() || "";
+}
+async function resolveAppComponent(name, appComponents, label) {
+  const target = normalizeIdentifier(name);
+  const matchEntry = Object.entries(appComponents).find(([path]) => {
+    const base = path.split(/[\\/]/).pop() || "";
+    const normalized = normalizeIdentifier(base);
+    return normalized === target;
+  });
+  if (!matchEntry) {
+    console.warn(
+      `[nuxt-mermaid-content] Cannot find ${label} component:`,
+      name
+    );
+    return null;
+  }
+  try {
+    const [, loader] = matchEntry;
+    const mod = await loader();
+    return mod.default || mod;
+  } catch (error) {
+    console.error(
+      `[nuxt-mermaid-content] Failed to load ${label} component:`,
+      error
+    );
+    return null;
+  }
+}
+if (import.meta.client && isEnabled) {
+  const appComponents = import.meta.glob("~/components/**/*.{vue,js,ts}");
+  watch(
+    configuredSpinnerName,
+    async (name) => {
+      if (!name) {
+        customSpinner.value = null;
+        return;
+      }
+      customSpinner.value = await resolveAppComponent(
+        name,
+        appComponents,
+        "spinner"
+      );
+    },
+    { immediate: true }
+  );
+  watch(
+    configuredMermaidImplName,
+    async (name) => {
+      if (!name) {
+        customMermaidImpl.value = null;
+        return;
+      }
+      customMermaidImpl.value = await resolveAppComponent(
+        name,
+        appComponents,
+        "mermaid"
+      );
+    },
+    { immediate: true }
+  );
+}
+const spinnerComponent = computed(() => {
+  return customSpinner.value || Spinner;
+});
+function serializeMermaidFromNode(root) {
+  const TEXT_NODE = 3;
+  const ELEMENT_NODE = 1;
+  if (root.nodeType === TEXT_NODE) {
+    return root.data;
+  }
+  if (root.nodeType === ELEMENT_NODE) {
+    const el = root;
+    const tag = el.tagName?.toUpperCase();
+    if (tag === "BR") return "<br/>";
+    let out = "";
+    el.childNodes.forEach((child) => {
+      out += serializeMermaidFromNode(child);
+    });
+    return out;
+  }
+  return "";
+}
+async function renderMermaid() {
+  if (!mermaidContainer.value || !mermaidDefinition) return;
+  try {
+    isLoading.value = true;
+    const mermaid = await $mermaid();
+    const theme = mermaidTheme.value;
+    const initOptions = {
+      startOnLoad: false,
+      ...baseMermaidInit,
+      theme
+    };
+    mermaid.initialize(initOptions);
+    mermaidContainer.value.removeAttribute("data-processed");
+    mermaidContainer.value.textContent = mermaidDefinition;
+    await nextTick();
+    await mermaid.run({
+      nodes: [mermaidContainer.value],
+      suppressErrors: true
+    });
+    hasRenderedOnce.value = true;
+    isLoading.value = false;
+  } catch (error) {
+    console.error("[nuxt-mermaid-content]", error);
+    if (mermaidContainer.value)
+      mermaidContainer.value.innerHTML = "\u26A0\uFE0F Mermaid Diagram Error";
+    isLoading.value = false;
+  }
+}
+function setupMermaidContainer() {
+  if (mermaidContainer.value) {
+    const pre = mermaidContainer.value.querySelector("pre");
+    const code = mermaidContainer.value.querySelector("code");
+    if (code) {
+      mermaidDefinition = code.textContent?.trim() || "";
+    } else if (pre) {
+      mermaidDefinition = pre.textContent?.trim() || "";
+    } else {
+      mermaidDefinition = serializeMermaidFromNode(
+        mermaidContainer.value
+      ).trim();
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !hasRenderedOnce.value) {
+          renderMermaid();
+          if (observer) {
+            observer.disconnect();
+          }
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(mermaidContainer.value);
+  }
+}
+onMounted(async () => {
+  if (!isEnabled) return;
+  isMounted.value = true;
+  await nextTick();
+  setupMermaidContainer();
+});
+onUnmounted(() => {
+  if (observer) observer.disconnect();
+});
+watch(mermaidTheme, () => {
+  if (!isEnabled) return;
+  if (hasRenderedOnce.value) renderMermaid();
+});
+</script>
+
+<template>
+  <component
+    :is="customMermaidImpl"
+    v-if="customMermaidImpl"
+  >
+    <slot />
+  </component>
+
+  <div
+    v-else-if="!isEnabled"
+    class="mermaid"
+  >
+    <slot />
+  </div>
+
+  <div
+    v-else-if="isMounted"
+    class="mermaid-wrapper"
+  >
+    <div
+      ref="mermaidContainer"
+      class="mermaid"
+    >
+      <slot />
+    </div>
+
+    <template v-if="isLoading && !hasRenderedOnce">
+      <slot name="loading">
+        <component :is="spinnerComponent" />
+      </slot>
+    </template>
+  </div>
+
+  <div
+    v-else
+    class="mermaid"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.mermaid-wrapper{align-items:center;display:flex;justify-content:center;position:relative}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid{display:flex;justify-content:center}.mermaid .edgeLabel,.mermaid .label,.mermaid .nodeLabel{overflow:visible!important;white-space:normal!important}.mermaid foreignObject{overflow:visible!important}
+</style>

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

@@ -0,0 +1,21 @@
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    loading?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Spinner.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    class="spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "Spinner"
+};
+</script>
+
+<style>
+.spinner{--radius:20px;animation:rotate 2s linear infinite;height:calc(var(--radius)*2);left:50%;margin:calc(var(--radius)*-1) 0 0 calc(var(--radius)*-1);position:absolute;top:50%;width:calc(var(--radius)*2);z-index:2}.spinner .path{animation:dash 1.5s ease-in-out infinite;stroke:#c5c5c5;stroke-linecap:round}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+</style>

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/plugins/mermaid.client.d.ts

@@ -0,0 +1,10 @@
+import type { Mermaid } from 'mermaid';
+declare global {
+    var __nuxtMermaidLoader__: Promise<Mermaid> | undefined;
+}
+declare const _default: import("nuxt/app").Plugin<{
+    mermaid: () => Promise<Mermaid>;
+}> & import("nuxt/app").ObjectPlugin<{
+    mermaid: () => Promise<Mermaid>;
+}>;
+export default _default;

package/dist/runtime/plugins/mermaid.client.js

@@ -0,0 +1,58 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import {
+  DEFAULT_IMPORT_SOURCE,
+  DEFAULT_MERMAID_INIT
+} from "../../constants";
+const globalWithLoader = globalThis;
+const ABSOLUTE_URL_REGEX = /^(?:https?:)?\/\//;
+function resolveSource(source) {
+  if (ABSOLUTE_URL_REGEX.test(source)) return source;
+  if (source.startsWith("/")) return source;
+  if (typeof window !== "undefined")
+    return new URL(source, window.location.origin).href;
+  return source;
+}
+async function loadMermaidFrom(source) {
+  const mod = await import(
+    /* @vite-ignore */
+    resolveSource(source)
+  );
+  return mod.default ?? mod;
+}
+export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig();
+  const mermaidConfig = runtimeConfig.public?.mermaidContent;
+  if (mermaidConfig?.enabled === false) {
+    return {
+      provide: {
+        mermaid: async () => {
+          throw new Error(
+            "[nuxt-mermaid-content] Mermaid is disabled via config."
+          );
+        }
+      }
+    };
+  }
+  const loadMermaid = async () => {
+    if (globalWithLoader.__nuxtMermaidLoader__)
+      return globalWithLoader.__nuxtMermaidLoader__;
+    const importSource = mermaidConfig?.loader?.importSource || DEFAULT_IMPORT_SOURCE;
+    const initOptions = {
+      ...DEFAULT_MERMAID_INIT,
+      ...mermaidConfig?.loader?.init
+    };
+    globalWithLoader.__nuxtMermaidLoader__ = loadMermaidFrom(importSource).then((mermaid) => {
+      mermaid.initialize(initOptions);
+      return mermaid;
+    }).catch((error) => {
+      globalWithLoader.__nuxtMermaidLoader__ = void 0;
+      throw error;
+    });
+    return globalWithLoader.__nuxtMermaidLoader__;
+  };
+  return {
+    provide: {
+      mermaid: () => loadMermaid()
+    }
+  };
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@barzhsieh/nuxt-content-mermaid",
+  "version": "1.0.0",
+  "description": "My new Nuxt module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andy820621/nuxt-content-mermaid.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "^4.2.1",
+    "defu": "^6.1.4"
+  },
+  "peerDependencies": {
+    "@nuxt/content": "^3.8.0"
+  },
+  "devDependencies": {
+    "@nuxt/content": "3.8.0",
+    "@nuxt/devtools": "^3.1.0",
+    "@nuxt/eslint-config": "^1.10.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.1",
+    "@nuxt/test-utils": "^3.20.1",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.1",
+    "mermaid": "^11.12.1",
+    "nuxt": "^4.2.1",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.10",
+    "vue-tsc": "^3.1.4"
+  },
+  "volta": {
+    "node": "22.21.1"
+  },
+  "scripts": {
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  }
+}