fumadocs-mermaid 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fumadocs-mermaid contributors
+
+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,259 @@
+# fumadocs-mermaid
+
+Mermaid diagram integration for [Fumadocs](https://fumadocs.dev) - a modern documentation framework for React.
+
+## Features
+
+- 🎨 Automatic dark/light theme support with `next-themes`
+- ⚡ Client-side rendering with smart caching
+- 🔌 Plug-and-play integration with Fumadocs
+- 📝 Convert markdown code blocks to diagrams automatically
+- 🌳 Tree-shakeable ESM package
+- 💪 Full TypeScript support
+
+## Installation
+
+```bash
+npm install fumadocs-mermaid mermaid next-themes
+```
+
+```bash
+pnpm add fumadocs-mermaid mermaid next-themes
+```
+
+```bash
+yarn add fumadocs-mermaid mermaid next-themes
+```
+
+## Usage
+
+### Option 1: Direct Component Usage
+
+Import and register the `Mermaid` component in your MDX components:
+
+```tsx
+// mdx-components.tsx
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Mermaid } from 'fumadocs-mermaid/ui';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    Mermaid,
+    ...components,
+  };
+}
+```
+
+Then use it in your MDX files:
+
+```mdx
+<Mermaid
+  chart="
+graph TD;
+  A[Start] --> B{Decision};
+  B -->|Yes| C[Action 1];
+  B -->|No| D[Action 2];
+  C --> E[End];
+  D --> E;
+"
+/>
+```
+
+### Option 2: Automatic Code Block Conversion (Recommended)
+
+Use the remark plugin to automatically convert mermaid code blocks:
+
+```ts
+// source.config.ts (Fumadocs MDX)
+import { remarkMdxMermaid } from 'fumadocs-mermaid';
+import { defineConfig } from 'fumadocs-mdx/config';
+
+export default defineConfig({
+  mdxOptions: {
+    remarkPlugins: [remarkMdxMermaid],
+  },
+});
+```
+
+Don't forget to register the component:
+
+```tsx
+// mdx-components.tsx
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Mermaid } from 'fumadocs-mermaid/ui';
+
+export function getMDXComponents(components) {
+  return {
+    ...defaultMdxComponents,
+    Mermaid,
+    ...components,
+  };
+}
+```
+
+Now you can write mermaid diagrams using code blocks in your MDX:
+
+````mdx
+```mermaid
+graph TD;
+  A[Start] --> B{Decision};
+  B -->|Yes| C[Action 1];
+  B -->|No| D[Action 2];
+```
+````
+
+## API Reference
+
+### `<Mermaid />`
+
+The React component for rendering Mermaid diagrams.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `chart` | `string` | **Required** | The mermaid diagram definition |
+| `theme` | `'default' \| 'dark' \| 'neutral' \| 'forest'` | Auto-detected | Theme override. Automatically uses next-themes if available |
+| `themeCSS` | `string` | `'margin: 1.5rem auto 0;'` | Additional CSS for the diagram container |
+
+**Example:**
+
+```tsx
+<Mermaid
+  chart="graph LR; A-->B;"
+  theme="dark"
+  themeCSS="margin: 2rem auto;"
+/>
+```
+
+### `remarkMdxMermaid()`
+
+Remark plugin to convert mermaid code blocks into `<Mermaid />` components.
+
+**Options:**
+
+```ts
+interface RemarkMdxMermaidOptions {
+  /**
+   * The language identifier for mermaid code blocks
+   * @defaultValue 'mermaid'
+   */
+  lang?: string;
+}
+```
+
+**Example with custom language:**
+
+```ts
+import { remarkMdxMermaid } from 'fumadocs-mermaid';
+
+export default defineConfig({
+  mdxOptions: {
+    remarkPlugins: [[remarkMdxMermaid, { lang: 'diagram' }]],
+  },
+});
+```
+
+## Examples
+
+### Flowchart
+
+````mdx
+```mermaid
+graph TD;
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[Car]
+```
+````
+
+### Sequence Diagram
+
+````mdx
+```mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+```
+````
+
+### Gantt Chart
+
+````mdx
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2024-01-01, 30d
+        Another task    :after a1, 20d
+```
+````
+
+### Class Diagram
+
+````mdx
+```mermaid
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    class Duck{
+        +String beakColor
+        +swim()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+```
+````
+
+## Theme Support
+
+The component automatically detects your theme using `next-themes`:
+
+- Light mode → Uses Mermaid's `default` theme
+- Dark mode → Uses Mermaid's `dark` theme
+
+You can override this behavior with the `theme` prop:
+
+```tsx
+<Mermaid chart="graph LR; A-->B;" theme="forest" />
+```
+
+## TypeScript
+
+The package is fully typed. Import types as needed:
+
+```ts
+import type { MermaidProps, RemarkMdxMermaidOptions } from 'fumadocs-mermaid';
+```
+
+## How It Works
+
+1. **Client-side rendering**: Diagrams are rendered on the client to avoid hydration issues
+2. **Smart caching**: Both the Mermaid library and rendered diagrams are cached for performance
+3. **Theme integration**: Automatically re-renders when theme changes (when using next-themes)
+4. **Remark plugin**: Transforms markdown code blocks at build time into React components
+
+## Requirements
+
+- React 18+ or 19+
+- Mermaid 10+ or 11+
+- next-themes (optional, for automatic theme detection)
+
+## License
+
+MIT
+
+## Credits
+
+Inspired by the Mermaid integration examples from the official [Fumadocs documentation](https://fumadocs.dev/docs/markdown/mermaid).

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { RemarkMdxMermaidOptions, remarkMdxMermaid } from "./remark-mdx-mermaid.js";
+export { type RemarkMdxMermaidOptions, remarkMdxMermaid };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { remarkMdxMermaid } from "./remark-mdx-mermaid.js";
+
+export { remarkMdxMermaid };

package/dist/remark-mdx-mermaid.d.ts

@@ -0,0 +1,30 @@
+import { Transformer } from "unified";
+import { Root } from "mdast";
+
+//#region src/remark-mdx-mermaid.d.ts
+interface RemarkMdxMermaidOptions {
+  /**
+   * The language identifier for mermaid code blocks
+   * @defaultValue 'mermaid'
+   */
+  lang?: string;
+}
+/**
+ * Remark plugin to convert mermaid code blocks into `<Mermaid />` MDX components
+ *
+ * @example
+ * ```ts
+ * import { remarkMdxMermaid } from 'fumadocs-mermaid';
+ * import { defineConfig } from 'fumadocs-mdx/config';
+ *
+ * export default defineConfig({
+ *   mdxOptions: {
+ *     remarkPlugins: [remarkMdxMermaid],
+ *   },
+ * });
+ * ```
+ */
+declare function remarkMdxMermaid(options?: RemarkMdxMermaidOptions): Transformer<Root, Root>;
+//#endregion
+export { RemarkMdxMermaidOptions, remarkMdxMermaid };
+//# sourceMappingURL=remark-mdx-mermaid.d.ts.map

package/dist/remark-mdx-mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remark-mdx-mermaid.d.ts","names":[],"sources":["../src/remark-mdx-mermaid.ts"],"sourcesContent":[],"mappings":";;;;UAgCiB,uBAAA;;AAAjB;AAuBA;;EAAqF,IAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;iBAArE,gBAAA,WAA0B,0BAA+B,YAAY,MAAM"}

package/dist/remark-mdx-mermaid.js

@@ -0,0 +1,43 @@
+import { visit } from "unist-util-visit";
+
+//#region src/remark-mdx-mermaid.ts
+function toMDX(code) {
+	return {
+		type: "mdxJsxFlowElement",
+		name: "Mermaid",
+		attributes: [{
+			type: "mdxJsxAttribute",
+			name: "chart",
+			value: code.trim()
+		}],
+		children: []
+	};
+}
+/**
+* Remark plugin to convert mermaid code blocks into `<Mermaid />` MDX components
+*
+* @example
+* ```ts
+* import { remarkMdxMermaid } from 'fumadocs-mermaid';
+* import { defineConfig } from 'fumadocs-mdx/config';
+*
+* export default defineConfig({
+*   mdxOptions: {
+*     remarkPlugins: [remarkMdxMermaid],
+*   },
+* });
+* ```
+*/
+function remarkMdxMermaid(options = {}) {
+	const { lang = "mermaid" } = options;
+	return (tree) => {
+		visit(tree, "code", (node) => {
+			if (node.lang !== lang || !node.value) return;
+			Object.assign(node, toMDX(node.value));
+		});
+	};
+}
+
+//#endregion
+export { remarkMdxMermaid };
+//# sourceMappingURL=remark-mdx-mermaid.js.map

package/dist/remark-mdx-mermaid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remark-mdx-mermaid.js","names":[],"sources":["../src/remark-mdx-mermaid.ts"],"sourcesContent":["import { visit } from 'unist-util-visit';\nimport type { Transformer } from 'unified';\nimport type { Root } from 'mdast';\n\ninterface MdxJsxAttribute {\n  type: 'mdxJsxAttribute';\n  name: string;\n  value: string;\n}\n\ninterface MdxJsxFlowElement {\n  type: 'mdxJsxFlowElement';\n  name: string;\n  attributes: MdxJsxAttribute[];\n  children: unknown[];\n}\n\nfunction toMDX(code: string): MdxJsxFlowElement {\n  return {\n    type: 'mdxJsxFlowElement',\n    name: 'Mermaid',\n    attributes: [\n      {\n        type: 'mdxJsxAttribute',\n        name: 'chart',\n        value: code.trim(),\n      },\n    ],\n    children: [],\n  };\n}\n\nexport interface RemarkMdxMermaidOptions {\n  /**\n   * The language identifier for mermaid code blocks\n   * @defaultValue 'mermaid'\n   */\n  lang?: string;\n}\n\n/**\n * Remark plugin to convert mermaid code blocks into `<Mermaid />` MDX components\n *\n * @example\n * ```ts\n * import { remarkMdxMermaid } from 'fumadocs-mermaid';\n * import { defineConfig } from 'fumadocs-mdx/config';\n *\n * export default defineConfig({\n *   mdxOptions: {\n *     remarkPlugins: [remarkMdxMermaid],\n *   },\n * });\n * ```\n */\nexport function remarkMdxMermaid(options: RemarkMdxMermaidOptions = {}): Transformer<Root, Root> {\n  const { lang = 'mermaid' } = options;\n\n  return (tree: Root) => {\n    visit(tree, 'code', (node) => {\n      if (node.lang !== lang || !node.value) return;\n\n      Object.assign(node, toMDX(node.value));\n    });\n  };\n}\n"],"mappings":";;;AAiBA,SAAS,MAAM,MAAiC;AAC9C,QAAO;EACL,MAAM;EACN,MAAM;EACN,YAAY,CACV;GACE,MAAM;GACN,MAAM;GACN,OAAO,KAAK,MAAM;GACnB,CACF;EACD,UAAU,EAAE;EACb;;;;;;;;;;;;;;;;;AA0BH,SAAgB,iBAAiB,UAAmC,EAAE,EAA2B;CAC/F,MAAM,EAAE,OAAO,cAAc;AAE7B,SAAQ,SAAe;AACrB,QAAM,MAAM,SAAS,SAAS;AAC5B,OAAI,KAAK,SAAS,QAAQ,CAAC,KAAK,MAAO;AAEvC,UAAO,OAAO,MAAM,MAAM,KAAK,MAAM,CAAC;IACtC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+import { Mermaid, MermaidProps } from "./mermaid.js";
+export { Mermaid, type MermaidProps };

package/dist/ui/index.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { Mermaid } from "./mermaid.js";
+
+export { Mermaid };

package/dist/ui/mermaid.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/mermaid.d.ts
+interface MermaidProps {
+  /**
+   * The mermaid diagram chart definition
+   */
+  chart: string;
+  /**
+   * Optional theme override. If not provided, will use the theme from next-themes context.
+   * @defaultValue 'default' for light, 'dark' for dark mode
+   */
+  theme?: 'default' | 'dark' | 'neutral' | 'forest';
+  /**
+   * Additional CSS for the diagram container
+   */
+  themeCSS?: string;
+}
+/**
+ * Mermaid diagram component with theme support
+ *
+ * Automatically detects dark/light mode when used with next-themes.
+ * Renders on client-side only to avoid hydration issues.
+ */
+declare function Mermaid({
+  chart,
+  theme: themeOverride,
+  themeCSS
+}: MermaidProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Mermaid, MermaidProps };
+//# sourceMappingURL=mermaid.d.ts.map

package/dist/ui/mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.d.ts","names":[],"sources":["../../src/ui/mermaid.tsx"],"sourcesContent":[],"mappings":";;;UAKiB,YAAA;;;AAAjB;EAwBgB,KAAA,EAAA,MAAO;EAAG;;;;EAAgF,KAAA,CAAA,EAAA,SAAA,GAAA,MAAA,GAAA,SAAA,GAAA,QAAA;EAAA;;;;;;;;;;;iBAA1F,OAAA;;SAAwB;;GAAsD,eAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/mermaid.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { use, useEffect, useId, useState } from "react";
+import { useTheme } from "next-themes";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ui/mermaid.tsx
+/**
+* Mermaid diagram component with theme support
+*
+* Automatically detects dark/light mode when used with next-themes.
+* Renders on client-side only to avoid hydration issues.
+*/
+function Mermaid({ chart, theme: themeOverride, themeCSS = "margin: 1.5rem auto 0;" }) {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(MermaidContent, {
+		chart,
+		themeOverride,
+		themeCSS
+	});
+}
+const cache = /* @__PURE__ */ new Map();
+function cachePromise(key, setPromise) {
+	const cached = cache.get(key);
+	if (cached) return cached;
+	const promise = setPromise();
+	cache.set(key, promise);
+	return promise;
+}
+function MermaidContent({ chart, themeOverride, themeCSS }) {
+	const id = useId();
+	const { resolvedTheme: systemTheme } = useTheme();
+	const resolvedTheme = themeOverride ?? (systemTheme === "dark" ? "dark" : "default");
+	const { default: mermaid } = use(cachePromise("mermaid", () => import("mermaid")));
+	mermaid.initialize({
+		startOnLoad: false,
+		securityLevel: "loose",
+		fontFamily: "inherit",
+		themeCSS,
+		theme: resolvedTheme
+	});
+	const { svg, bindFunctions } = use(cachePromise(`${chart}-${resolvedTheme}`, () => {
+		return mermaid.render(id, chart.replaceAll("\\n", "\n"));
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		ref: (container) => {
+			if (container) bindFunctions?.(container);
+		},
+		dangerouslySetInnerHTML: { __html: svg }
+	});
+}
+
+//#endregion
+export { Mermaid };
+//# sourceMappingURL=mermaid.js.map

package/dist/ui/mermaid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.js","names":[],"sources":["../../src/ui/mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { use, useEffect, useId, useState } from 'react';\nimport { useTheme } from 'next-themes';\n\nexport interface MermaidProps {\n  /**\n   * The mermaid diagram chart definition\n   */\n  chart: string;\n\n  /**\n   * Optional theme override. If not provided, will use the theme from next-themes context.\n   * @defaultValue 'default' for light, 'dark' for dark mode\n   */\n  theme?: 'default' | 'dark' | 'neutral' | 'forest';\n\n  /**\n   * Additional CSS for the diagram container\n   */\n  themeCSS?: string;\n}\n\n/**\n * Mermaid diagram component with theme support\n *\n * Automatically detects dark/light mode when used with next-themes.\n * Renders on client-side only to avoid hydration issues.\n */\nexport function Mermaid({ chart, theme: themeOverride, themeCSS = 'margin: 1.5rem auto 0;' }: MermaidProps) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) return null;\n\n  return <MermaidContent chart={chart} themeOverride={themeOverride} themeCSS={themeCSS} />;\n}\n\n// Cache for mermaid library and rendered diagrams\nconst cache = new Map<string, Promise<unknown>>();\n\nfunction cachePromise<T>(key: string, setPromise: () => Promise<T>): Promise<T> {\n  const cached = cache.get(key);\n  if (cached) return cached as Promise<T>;\n\n  const promise = setPromise();\n  cache.set(key, promise);\n  return promise;\n}\n\ninterface MermaidContentProps {\n  chart: string;\n  themeOverride?: string;\n  themeCSS: string;\n}\n\nfunction MermaidContent({ chart, themeOverride, themeCSS }: MermaidContentProps) {\n  const id = useId();\n  const { resolvedTheme: systemTheme } = useTheme();\n\n  // Use override if provided, otherwise use system theme, fallback to 'default'\n  const resolvedTheme = themeOverride ?? (systemTheme === 'dark' ? 'dark' : 'default');\n\n  const { default: mermaid } = use(\n    cachePromise('mermaid', () => import('mermaid'))\n  );\n\n  mermaid.initialize({\n    startOnLoad: false,\n    securityLevel: 'loose',\n    fontFamily: 'inherit',\n    themeCSS,\n    theme: resolvedTheme as any,\n  });\n\n  const { svg, bindFunctions } = use(\n    cachePromise(`${chart}-${resolvedTheme}`, () => {\n      return mermaid.render(id, chart.replaceAll('\\\\n', '\\n'));\n    })\n  );\n\n  return (\n    <div\n      ref={(container) => {\n        if (container) bindFunctions?.(container);\n      }}\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAgB,QAAQ,EAAE,OAAO,OAAO,eAAe,WAAW,4BAA0C;CAC1G,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AACd,aAAW,KAAK;IACf,EAAE,CAAC;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,oBAAC;EAAsB;EAAsB;EAAyB;GAAY;;AAI3F,MAAM,wBAAQ,IAAI,KAA+B;AAEjD,SAAS,aAAgB,KAAa,YAA0C;CAC9E,MAAM,SAAS,MAAM,IAAI,IAAI;AAC7B,KAAI,OAAQ,QAAO;CAEnB,MAAM,UAAU,YAAY;AAC5B,OAAM,IAAI,KAAK,QAAQ;AACvB,QAAO;;AAST,SAAS,eAAe,EAAE,OAAO,eAAe,YAAiC;CAC/E,MAAM,KAAK,OAAO;CAClB,MAAM,EAAE,eAAe,gBAAgB,UAAU;CAGjD,MAAM,gBAAgB,kBAAkB,gBAAgB,SAAS,SAAS;CAE1E,MAAM,EAAE,SAAS,YAAY,IAC3B,aAAa,iBAAiB,OAAO,WAAW,CACjD;AAED,SAAQ,WAAW;EACjB,aAAa;EACb,eAAe;EACf,YAAY;EACZ;EACA,OAAO;EACR,CAAC;CAEF,MAAM,EAAE,KAAK,kBAAkB,IAC7B,aAAa,GAAG,MAAM,GAAG,uBAAuB;AAC9C,SAAO,QAAQ,OAAO,IAAI,MAAM,WAAW,OAAO,KAAK,CAAC;GACxD,CACH;AAED,QACE,oBAAC;EACC,MAAM,cAAc;AAClB,OAAI,UAAW,iBAAgB,UAAU;;EAE3C,yBAAyB,EAAE,QAAQ,KAAK;GACxC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "fumadocs-mermaid",
+  "version": "1.0.0",
+  "description": "Mermaid diagram integration for Fumadocs",
+  "keywords": [
+    "fumadocs",
+    "mermaid",
+    "diagrams",
+    "documentation",
+    "mdx"
+  ],
+  "homepage": "https://github.com/sebastianhuus/fumadocs-mermaid",
+  "license": "MIT",
+  "author": "Sebastian Huus",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sebastianhuus/fumadocs-mermaid.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "clean": "rimraf dist",
+    "types:check": "tsc --noEmit",
+    "prepare": "tsdown"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "mermaid": "^11.0.0",
+    "next-themes": "^0.4.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.0",
+    "tsdown": "^0.18.0",
+    "typescript": "^5.9.0",
+    "unified": "^11.0.0"
+  },
+  "peerDependencies": {
+    "mermaid": "^10.0.0 || ^11.0.0",
+    "next-themes": "*",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}