### Basic setup with withMermaid and install command

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/withMermaid.md

Basic setup for the withMermaid wrapper in .vitepress/config.js. Mermaid is not bundled; install it as a peer dependency with the shown command.

```js
// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
  // your existing vitepress config...
  title: "My Docs",
  themeConfig: {
    // ...
  },
  mermaid: {
    // any mermaid MermaidConfig option; see configuration.md
    // theme here only applies to light mode — dark mode is forced when the
    // dark class is present on <html> (see Mermaid.vue.md)
  },
  mermaidPlugin: {
    class: "mermaid my-class", // additional CSS classes for the wrapper div
  },
});
```

```bash
npm i vitepress-plugin-mermaid mermaid -D
```

--------------------------------

### Install vitepress-plugin-mermaid

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/getting-started.md

Install the plugin and the mermaid dependency as development dependencies.

```bash
npm i vitepress-plugin-mermaid mermaid -D
```

--------------------------------

### Render a flowchart

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Basic usage example showing how to render a flowchart and inject the resulting SVG into the DOM.

```js
import { render } from "./mermaid";

const svg = await render(
  "diagram-1",
  "flowchart TD\n  Start --> Stop",
  { securityLevel: "loose", startOnLoad: false }
);
document.getElementById("diagram-container").innerHTML = svg;
```

--------------------------------

### Configure Mermaid runtime options

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/configuration.md

Example of passing Mermaid runtime configuration to the withMermaid wrapper in .vitepress/config.js.

```javascript
// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
  mermaid: {
    securityLevel: "loose",
    startOnLoad: false,
    theme: "base",
    themeVariables: { primaryColor: "#ff0000" },
    // every other key of mermaid's MermaidConfig is accepted here;
    // refer to https://mermaid.js.org/config/setup/modules/mermaidAPI.html
  },
});
```

--------------------------------

### Error handling demonstration

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidMarkdown.md

Shows that errors thrown during fence replacement are swallowed and rendered inline as <pre><err></pre>. Only errors during installation propagate.

```javascript
import { MermaidMarkdown } from "vitepress-plugin-mermaid";

const md = {
  renderer: {
    rules: {
      fence: ({ } = {}) => { throw new Error("original fence failed"); },
    },
  },
};

try {
  MermaidMarkdown(md, undefined);

  // Consuming code can never observe thrown errors from the mermaid branch;
  // they are rendered as <pre><err></pre> by design.
  const warn = (e) => console.warn(`fence error surfaced: ${e}`);
  warn(md.renderer.rules.fence.length);
} catch (e) {
  // Only errors thrown while *installing* the wrapper would reach here.
  console.error(e);
}
```

--------------------------------

### Registering external diagrams with init

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Example of registering a mindmap diagram type. Exceptions are logged internally and not thrown.

```js
// As used internally (src/Mermaid.vue:40–43):
import { init } from "./mermaid";
import mindmap from "@mermaid-js/mermaid-mindmap";

await init([mindmap]);
// This registers 'mindmap' as a diagram type; exceptions are logged, not thrown.
```

--------------------------------

### Configure Mermaid plugin options

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/configuration.md

Example of setting plugin-specific configuration, such as custom CSS classes, in .vitepress/config.js.

```javascript
// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
  mermaidPlugin: {
    class: "mermaid my-class",
  },
});
```

--------------------------------

### Handle rendering errors

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Example demonstrating how to wrap the render function in a try-catch block to handle syntax errors or invalid diagram types.

```js
import { render } from "./mermaid";

async function safeRender(id, code, config) {
  try {
    const svg = await render(id, code, config);
    return svg;
  } catch (err) {
    // e.g. "Parse error" or unknown diagram type errors from mermaid
    return `<pre>Diagram failed to render: ${err}</pre>`;
  }
}

const svg = await safeRender(
  "diagram-2",
  "flowchart TD\n  A --> B",   // swap in invalid DSL to trigger the catch
  { theme: "dark" }
);
```

--------------------------------

### DEFAULT_OPTIONS constant

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/types.md

Internal default configuration settings for the Mermaid instance, including security level and start behavior.

```ts
const DEFAULT_OPTIONS: MermaidConfig = {
  //We set loose as default here because is needed to load images
  securityLevel: "loose",
  startOnLoad: false,
};
```

--------------------------------

### Render a mermaid flowchart in Markdown

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/README.md

Use a mermaid code block in any Markdown file to render a flowchart. The example shows a simple flowchart from Start to Stop.

```md
<!---any-file.md-->

```mermaid
flowchart TD
  Start --> Stop
```
```

--------------------------------

### Standard usage: Markdown fences for Mermaid diagrams

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidMarkdown.md

Page authors write Mermaid diagrams using ```mermaid or ```mmd fences. The withMermaid plugin installs the MermaidMarkdown function to process these fences.

```markdown
<!-- any-markdown.md -->

```mermaid
flowchart TD
  Start --> Stop
```

```mmd
flowchart LR
  Start --> Stop
```
```

--------------------------------

### Direct use in a bare Vite/VitePress config

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Demonstrates how to initialize the MermaidPlugin within a Vite configuration file using specific security and loading options.

```js
// .vitepress/config.js
import { MermaidPlugin } from "vitepress-plugin-mermaid";

export default {
  vite: {
    plugins: [MermaidPlugin({ securityLevel: "loose", startOnLoad: false })],
  },
};
```

--------------------------------

### Importing withMermaid

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/withMermaid.md

The standard way to import the withMermaid function from the package root.

```js
import { withMermaid } from "vitepress-plugin-mermaid";
```

--------------------------------

### Importing MermaidPluginConfig

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/types.md

Shows how to import the MermaidPluginConfig type from the distribution path for explicit type usage.

```ts
import { withMermaid } from "vitepress-plugin-mermaid";
// MermaidPluginConfig is surfaced through the "vitepress" UserConfig
// augmentation; the interface itself is declared in src/mermaid-plugin.ts
// and exported from that module.
import type { MermaidPluginConfig } from "vitepress-plugin-mermaid/dist/mermaid-plugin";
```

--------------------------------

### MermaidPlugin(inlineOptions?)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Creates a Vite plugin that integrates Mermaid with VitePress. Accepts optional Mermaid configuration overrides and returns a Vite Plugin object.

```APIDOC
## MermaidPlugin(inlineOptions?)

### Description
Creates a Vite plugin that integrates Mermaid with VitePress. The plugin injects the Mermaid Vue component into VitePress' client app bootstrap and serves the Mermaid runtime configuration through a virtual module.

### Signature
```ts
export function MermaidPlugin(
  inlineOptions?: Partial<MermaidPluginOptions>
): Plugin
```

### Parameters
- **inlineOptions** (Partial<MermaidPluginOptions>) - Optional - Mermaid configuration overrides. Every top-level key of MermaidConfig plus externalDiagrams. Defaults to undefined (falls back to DEFAULT_OPTIONS).

### Return Type
- **Plugin** (Vite's plugin interface) - The returned object implements name, enforce, transform, resolveId, and load.

### Notes
- MermaidPluginOptions is a non-exported interface that extends MermaidConfig and includes externalDiagrams.
- MermaidConfig and ExternalDiagramDefinition are imported from the mermaid package.
- The plugin is named 'vite-plugin-mermaid' with enforce: 'post'.
- It is referenced internally by withMermaid: config.vite.plugins.push(MermaidPlugin(config.mermaid)).
```

--------------------------------

### Wrap defineConfig() with withMermaid

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/withMermaid.md

Wraps defineConfig() with withMermaid, as used by the docs site in docs/.vitepress/config.js.

```js
import { defineConfig } from "vitepress";
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid(
  defineConfig({
    lang: "en-US",
    title: "VitePress Plugin Mermaid",
    lastUpdated: true,
    themeConfig: {
      nav: [{ text: "Guide", link: "/guide/getting-started" }],
    },
  })
);
```

--------------------------------

### Configure .vitepress/config.js

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/getting-started.md

Wrap your VitePress configuration with withMermaid to enable the plugin. You can optionally pass MermaidConfig and MermaidPluginConfig objects.

```js
// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
      // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
    },
    // optionally set additional config for plugin itself with MermaidPluginConfig
    mermaidPlugin: {
      class: "mermaid my-class", // set additional css classes for parent container 
    },
});
```

--------------------------------

### withMermaid

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/withMermaid.md

Top-level entry point of `vitepress-plugin-mermaid`. It receives the user's VitePress `UserConfig`, mutates it in place (wrapping the markdown renderer, registering the Vite plugin, and patching `optimizeDeps` / `resolve.alias`), and returns the same object so it can be used as `export default withMermaid(...)`.

```APIDOC
## withMermaid

### Description
Top-level entry point of `vitepress-plugin-mermaid`. It receives the user's VitePress `UserConfig`, mutates it in place (wrapping the markdown renderer, registering the Vite plugin, and patching `optimizeDeps` / `resolve.alias`), and returns the same object so it can be used as `export default withMermaid(...)`.

### Signature

```ts
export const withMermaid = (config: UserConfig) => {
  // ...mutations...
  return config;
};
```

### Parameters

- **config** (`UserConfig`) - Required (mutated in place) - The VitePress configuration object returned by `defineConfig()` from `vitepress`, or a plain object literal.

### Return Type

`UserConfig` - The same (mutated) object passed in; the mutation chain returns `config` at `src/index.ts:66`.

### Behavior

1. **Markdown integration** - If `config.markdown` is absent it is initialized to `{}`. The existing `config.markdown.config` (defaulting to a no-op `() => {}`) is wrapped so that `MermaidMarkdown(...args, config.mermaidPlugin)` runs first, then the original config callback. This activates the ` ```mermaid ` / ` ```mmd ` fence handling.
2. **Vite plugin registration** - `config.vite` (and `config.vite.plugins`) are initialized if missing and `MermaidPlugin(config.mermaid)` is pushed onto the plugins array.
3. **Dependency pre-bundling** - `config.vite.optimizeDeps.include` (initialized to `[]` if absent) gets the following entries appended:
   - `@braintree/sanitize-url`
   - `dayjs`
   - `debug`
   - `cytoscape-cose-bilkent`
   - `cytoscape`
4. **Module aliasing** - `config.vite.resolve.alias` is created if missing, and the following mappings are merged in (array-form aliases are converted and appended; object-form aliases are spread):
   - `"dayjs/plugin/advancedFormat.js"` → `"dayjs/esm/plugin/advancedFormat"`
   - `"dayjs/plugin/customParseFormat.js"` → `"dayjs/esm/plugin/customParseFormat"`
   - `"dayjs/plugin/isoWeek.js"` → `"dayjs/esm/plugin/isoWeek"`
   - `"cytoscape/dist/cytoscape.umd.js"` → `"cytoscape/dist/cytoscape.esm.js"`

These two patching steps exist so that Mermaid's transitive dependencies (`dayjs`, `cytoscape`, …) resolve correctly in the VitePress build.
```

--------------------------------

### Import MermaidPlugin

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Import the MermaidPlugin from the vitepress-plugin-mermaid package.

```js
import { MermaidPlugin } from "vitepress-plugin-mermaid";
```

--------------------------------

### init

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Registers external diagram definitions with Mermaid so custom diagram types can be rendered. This is an async function that never rejects; errors are logged to the console.

```APIDOC
## init

### Description
Registers external diagram definitions with Mermaid so custom diagram types can be rendered. This is an async function that never rejects; errors are logged to the console.

### Method
async function

### Signature
```ts
export const init = async (externalDiagrams: ExternalDiagramDefinition[]) => {
  try {
    if (mermaid.registerExternalDiagrams)
      await mermaid.registerExternalDiagrams(externalDiagrams);
  } catch (e) {
    console.error(e);
  }
};
```

### Parameters
- `externalDiagrams` (ExternalDiagramDefinition[]) - Required - Array of external diagram definitions (Mermaid type). Forwarded to `mermaid.registerExternalDiagrams`.

### Return Type
`Promise<void>` - Resolves with no value on success or failure.

### Behavior
- Registers external diagram definitions with Mermaid.
- Guards the call with `if (mermaid.registerExternalDiagrams)` for older Mermaid versions.
- Wraps the call in try/catch; on failure, logs the error via `console.error(e)` and resolves normally.

### Throws
- Never rejects; all errors are caught and logged.

### Examples
```js
import { init } from "./mermaid";
import mindmap from "@mermaid-js/mermaid-mindmap";

await init([mindmap]);
```

Error-handling note: because `init` swallows errors, guard dependent logic by checking the result of a subsequent render:

```js
import { init, render } from "./mermaid";

await init([]); // never rejects, failures are console-only
try {
  const svg = await render("my-id", "flowchart TD\nA-->B", {});
} catch (err) {
  console.error(`render failed: ${err}`);
}
```
```

--------------------------------

### init function signature

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

The init function registers external diagram definitions with Mermaid.

```ts
export const init = async (externalDiagrams: ExternalDiagramDefinition[]) => {
  try {
    if (mermaid.registerExternalDiagrams)
      await mermaid.registerExternalDiagrams(externalDiagrams);
  } catch (e) {
    console.error(e);
  }
};
```

--------------------------------

### Validating MermaidPlugin initialization

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Provides a pattern for verifying that the MermaidPlugin has been correctly instantiated before including it in the Vite plugin array.

```js
import { MermaidPlugin } from "vitepress-plugin-mermaid";

const plugin = MermaidPlugin({ startOnLoad: true });
if (!plugin || plugin.name !== "vite-plugin-mermaid") {
  throw new Error("MermaidPlugin did not produce the expected Vite plugin");
}
// union with your other plugins:
const plugins = [plugin, ...myOtherPlugins];
```

--------------------------------

### Gantt chart (mmd source)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/more-examples.md

Source code for a Mermaid Gantt diagram with sections and tasks.

```mmd
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

--------------------------------

### Merge options with defaults

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Combines user-provided inline options with the default configuration.

```ts
const options = {
  ...DEFAULT_OPTIONS,
  ...inlineOptions,
};
```

--------------------------------

### Importing mermaid wrappers

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

The module is consumed by Mermaid.vue through a relative import.

```js
import { render, init } from "./mermaid"; // inside dist/Mermaid.vue
```

--------------------------------

### Import Mermaid component

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

The import statement prepended to the VitePress client bootstrap to register the Mermaid component.

```js
import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
```

--------------------------------

### Import MermaidMarkdown from vitepress-plugin-mermaid

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidMarkdown.md

Import the MermaidMarkdown function from the package root. This is the standard way to access the hook.

```javascript
import { MermaidMarkdown } from "vitepress-plugin-mermaid";
```

--------------------------------

### MermaidPluginOptions interface

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/types.md

Internal interface extending MermaidConfig to include external diagram definitions.

```ts
interface MermaidPluginOptions extends MermaidConfig {
  externalDiagrams: ExternalDiagramDefinition[];
}
```

--------------------------------

### Pie chart (mmd source)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/more-examples.md

Source code for a Mermaid pie chart showing pet adoption statistics.

```mmd
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
```

--------------------------------

### render

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Renders a Mermaid diagram from raw DSL source and returns the resulting SVG markup as a string. This is the primary function for converting Mermaid diagram definitions into SVG output.

```APIDOC
## render

### Description
Renders a Mermaid diagram from raw DSL source and returns the resulting SVG markup as a string. This is the primary function for converting Mermaid diagram definitions into SVG output.

### Signature
```ts
export const render = async (
  id: string,
  code: string,
  config: MermaidConfig
): Promise<string> => {
  // await init;
  mermaid.initialize(config);
  const { svg } = await mermaid.render(id, code);
  return svg;
};
```

### Parameters
- **id** (`string`) - Required - Element/DOM id passed through to `mermaid.render`. `Mermaid.vue` passes its own `props.id` (`mermaid-<fence-index>`).
- **code** (`string`) - Required - The raw Mermaid diagram definition (DSL source). `Mermaid.vue` passes `decodeURIComponent(props.graph)`.
- **config** (`MermaidConfig`) - Required - Mermaid configuration applied per call via `mermaid.initialize(config)`.

### Return Type
`Promise<string>` - Resolves to the SVG markup string produced by Mermaid for the diagram.

### Behavior
- Calls `mermaid.initialize(config)` once per invocation, then `mermaid.render(id, code)`.
- The commented-out `// await init;` shows that external-diagram registration was historically awaited here; it now happens separately in `Mermaid.vue`'s `onMounted`.
- Any error thrown by `mermaid.initialize` or `mermaid.render` is **not** caught — `render` rejects with Mermaid's error.

### Throws
- `Promise<string>` may reject with whatever `mermaid.initialize` / `mermaid.render` raises (invalid diagram syntax, unknown diagram type, or configuration errors). There is no wrapping or normalization; the original Mermaid error propagates. `Mermaid.vue` does not catch it either, so it surfaces in the Vue runtime / MutationObserver callback.

### Examples
Basic: render a flowchart and place the SVG directly into the DOM.

```js
import { render } from "./mermaid";

const svg = await render(
  "diagram-1",
  "flowchart TD\n  Start --> Stop",
  { securityLevel: "loose", startOnLoad: false }
);
document.getElementById("diagram-container").innerHTML = svg;
```

Error handling: catch Mermaid failures (e.g. syntax errors) per diagram:

```js
import { render } from "./mermaid";

async function safeRender(id, code, config) {
  try {
    const svg = await render(id, code, config);
    return svg;
  } catch (err) {
    // e.g. "Parse error" or unknown diagram type errors from mermaid
    return `<pre>Diagram failed to render: ${err}</pre>`;
  }
}

const svg = await safeRender(
  "diagram-2",
  "flowchart TD\n  A --> B",   // swap in invalid DSL to trigger the catch
  { theme: "dark" }
);
```
```

--------------------------------

### Mermaid graph with images and links (mmd source)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/more-examples.md

Source code for a Mermaid graph that includes images and clickable links. Images should be placed in the public folder and prefixed with the base if set.

```mmd
graph LR;
    K([<img src='/vitepress-plugin-mermaid/K.png' width='60' >])-.->G((<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >));
    H([<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >])-.->G
    G-->A;
    A(<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >)-->D(<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >);
classDef img fill:none,color:transparent,stroke:none,borderRadius:50px
class G,D,A,K,H,B img
click K "https://kustomize.io/" _blank
click G "http://www.github.com" "This is a link" _blank
```

--------------------------------

### Direct invocation with markdown-it

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidMarkdown.md

Use MermaidMarkdown directly with a markdown-it instance for standalone usage. Requires window.Mermaid to exist at render time and a globally registered Vue component.

```javascript
import { MermaidMarkdown } from "vitepress-plugin-mermaid";
import MarkdownIt from "markdown-it";

const md = new MarkdownIt();
MermaidMarkdown(md, { class: "mermaid" });

// window.Mermaid must exist at render time for the emitted component to work;
// the emitted markup references a globally registered Vue component.
const html = md.render("```mermaid\nflowchart LR\nA-->B\n```");
console.log(html); // <Suspense>...<Mermaid id="mermaid-0" class="mermaid" graph="...">
```

--------------------------------

### MermaidPluginConfig interface

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/types.md

Defines the configuration structure for the plugin, specifically the CSS class applied to rendered diagrams.

```ts
export interface MermaidPluginConfig {
  class?: string;
}
```

--------------------------------

### Passing external diagrams to MermaidPlugin

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidPlugin.md

Shows how to configure external diagram support by providing a definition object that adheres to the Mermaid ExternalDiagramDefinition type.

```js
import { MermaidPlugin } from "vitepress-plugin-mermaid";
import mindmap from "@mermaid-js/mermaid-mindmap"; // optional dependency

export default {
  vite: {
    plugins: [
      MermaidPlugin({
        externalDiagrams: [
          {
            id: "mindmap",
            diagram: mindmap,
            detector: (txt) => txt.trim().toLowerCase().startsWith("mindmap"),
            getInstance: (...args) => new mindmap.Diagram(...args),
            getType: () => "mindmap",
            toMermaid: (obj) => obj?.code || "",
          },
        ],
      }),
    ],
  },
};
```

--------------------------------

### Import Mermaid from vitepress-plugin-mermaid/Mermaid.vue

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/Mermaid.vue.md

Import the Mermaid component from the public subpath export defined in package.json. Use this when you need to reference the component directly in your own code.

```js
import Mermaid from "vitepress-plugin-mermaid/Mermaid.vue";
```

--------------------------------

### Augment UserConfig with Mermaid settings

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/types.md

The package augments the VitePress UserConfig interface to include mermaid and mermaidPlugin configuration fields.

```ts
declare module "vitepress" {
  interface UserConfig {
    mermaid?: MermaidConfig;
    mermaidPlugin?: MermaidPluginConfig;
  }
}
```

--------------------------------

### Handling init errors during render

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

Since init swallows errors, guard dependent logic by checking the result of a subsequent render call.

```js
import { init, render } from "./mermaid";

await init([]); // never rejects, failures are console-only
try {
  const svg = await render("my-id", "flowchart TD
A-->B", {});
} catch (err) {
  // A failed registration typically surfaces here, at render time.
  console.error(`render failed: ${err}`);
}
```

--------------------------------

### Frontmatter with mermaidTheme set to forest

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/more-examples.md

Sets the Mermaid theme for the page to 'forest' via the mermaidTheme frontmatter parameter. Only valid in light mode.

```yaml
---
mermaidTheme: forest
title: A more complex example
---
```

--------------------------------

### Mindmap diagram (mmd source)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/more-examples.md

Source code for a Mermaid mindmap diagram with icons and formatting.

```mmd
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

--------------------------------

### Custom CSS class via mermaidPlugin.class

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/MermaidMarkdown.md

Configure a custom CSS class for all Mermaid components by setting mermaidPlugin.class in the VitePress config. The class is applied to the wrapper div.

```javascript
// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
  mermaidPlugin: {
    class: "mermaid my-custom-class",
  },
});
```

--------------------------------

### withMermaid Signature

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/withMermaid.md

The function signature for withMermaid, which accepts a UserConfig object and returns it after applying necessary mutations.

```ts
export const withMermaid = (config: UserConfig) => {
  // ...mutations...
  return config;
};
```

--------------------------------

### Define Mermaid diagram with mmd

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/docs/guide/getting-started.md

Use the mmd code block syntax to define a flowchart.

```mmd
flowchart LR
  Start --> Stop
```

--------------------------------

### render function signature

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/api-reference/mermaid.md

The TypeScript signature for the render function, which takes an ID, diagram code, and configuration object to return an SVG string.

```ts
export const render = async (
  id: string,
  code: string,
  config: MermaidConfig
): Promise<string> => {
  // await init;
  mermaid.initialize(config);
  const { svg } = await mermaid.render(id, code);
  return svg;
};
```