### Complete configuration example

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

Full configuration setup including Mermaid diagram settings and plugin-specific options.

```typescript
// .vitepress/config.ts
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "My Documentation",
    description: "With Mermaid diagrams",
    
    // Mermaid diagram configuration
    mermaid: {
      // Security
      securityLevel: "loose",
      
      // Rendering
      startOnLoad: false,
      theme: "dark",
      
      // Flowchart settings
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true,
        curve: "basis"
      },
      
      // Sequence settings
      sequence: {
        mirrorActors: true,
        actorMargin: 50
      },
      
      // Gantt settings
      gantt: {
        numberSectionStyles: 4
      }
    },
    
    // Plugin-specific configuration
    mermaidPlugin: {
      class: "mermaid-diagram custom-style"
    }
  })
);
```

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

### Install dependencies

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

Install the plugin and mermaid package using npm or pnpm.

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

```bash
pnpm install --shamefully-hoist
```

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

### Plugin Usage Examples

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

Examples showing how to integrate the plugin into a Vite configuration with default or custom options.

```typescript
// vite.config.ts
import { MermaidPlugin } from "vitepress-plugin-mermaid";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    MermaidPlugin()
  ]
});
```

```typescript
// vite.config.ts
import { MermaidPlugin } from "vitepress-plugin-mermaid";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    MermaidPlugin({
      theme: "dark",
      securityLevel: "strict",
      startOnLoad: true,
      flowchart: {
        useMaxWidth: true
      }
    })
  ]
});
```

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

### Install plugin dependencies

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

Install the plugin and the mermaid library as development dependencies.

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

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

### Configuration Phase Setup

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

The initialization flow for the plugin within the VitePress configuration file.

```text
Developer writes: .vitepress/config.ts
         ↓
    import { withMermaid } from "vitepress-plugin-mermaid"
         ↓
    export default withMermaid({ ... config ... })
         ↓
    withMermaid() function:
    ├── Registers MermaidMarkdown in markdown.config
    ├── Registers MermaidPlugin in vite.plugins
    ├── Adds dependencies to vite.optimizeDeps
    └── Configures module aliases
         ↓
    Returns enhanced config to VitePress
```

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

### Basic withMermaid setup

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

Standard implementation of withMermaid within a VitePress configuration file.

```typescript
// .vitepress/config.ts
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "My Documentation",
    description: "Documentation with diagrams"
  })
);
```

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

### Registering External Diagrams

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

Examples for configuring and initializing external diagram definitions.

```typescript
import mindmapDef from "@mermaid-js/mermaid-mindmap";

export default withMermaid({
  mermaid: {
    externalDiagrams: [mindmapDef]
  }
});
```

```typescript
await init(externalDiagrams);
```

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

### Configure withMermaid and Mermaid options

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

Example showing how to pass custom Mermaid initialization options and plugin-specific configuration.

```typescript
// .vitepress/config.ts
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "My Documentation",
    mermaid: {
      securityLevel: "strict",
      startOnLoad: true,
      theme: "dark"
    },
    mermaidPlugin: {
      class: "mermaid-diagram custom-style"
    }
  })
);
```

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

### Markdown Input Example

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

Example of defining flowchart and class diagrams within a Markdown file.

```markdown
# My Documentation

Here is a flowchart:

```mermaid
flowchart TD
  A[Start] --> B[Process]
  B --> C{Decision}
  C -->|Yes| D[Success]
  C -->|No| E[Retry]
```

And a class diagram:

```mermaid
classDiagram
  class Animal {
    +name: string
    +eat()
  }
```
```

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

### Graph Prop Example

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

Demonstrates the required URI-encoded format for the graph prop.

```typescript
graph="flowchart%20TD%0A%20%20A%5BStart%5D%20--%3E%20B%5BEnd%5D"
// Decodes to:
// flowchart TD
//   A[Start] --> B[End]
```

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

### Configure Minimal Setup

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

Wrap the VitePress configuration object with the withMermaid function to enable plugin functionality.

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

export default withMermaid({
  title: "My Docs"
});
```

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

### Page-Level Mermaid Theme Configuration

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

Example of setting the diagram theme using frontmatter in a markdown file.

```yaml
---
mermaidTheme: forest
title: My Page
---
```

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

### Class Prop Example

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

Illustrates applying custom CSS classes to the Mermaid component wrapper.

```vue
<Mermaid class="mermaid dark-mode custom-style" ... />
```

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

### Configure MermaidPluginConfig in withMermaid

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

Examples of applying custom CSS classes to the diagram wrapper div.

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

```typescript
export default withMermaid({
  mermaidPlugin: {
    class: "custom-diagram-style dark-enabled"
  }
});
```

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

### Sequence Diagram Syntax

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

Example of sequence diagram syntax using the mmd extension.

```mmd
sequenceDiagram
  participant User
  participant Server
  
  User->>Server: Send request
  Server->>Server: Process
  Server->>User: Send response
```

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

### Markdown Output Example

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

The transformed HTML output generated from the provided Markdown input.

```html
<Suspense>
  <template #default>
    <Mermaid id="mermaid-1" class="mermaid" graph="flowchart%20TD%0A..."></Mermaid>
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

<!-- ... other content ... -->

<Suspense>
  <template #default>
    <Mermaid id="mermaid-3" class="mermaid" graph="classDiagram%0A..."></Mermaid>
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>
```

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

### ID Prop Example

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

Shows how to assign unique identifiers to multiple Mermaid components on a single page.

```vue
<Mermaid id="diagram-1" ... />
<Mermaid id="diagram-2" ... />
```

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

### init()

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Initializes the Mermaid environment and registers external diagrams.

```APIDOC
## init()

### Description
Initializes the Mermaid rendering environment. This function handles external diagram registration and sets up the necessary configuration for rendering.

### Returns
- **void** - Initializes the internal Mermaid state.
```

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

### Configuration Flow Hierarchy

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

Visualizes the configuration processing steps initiated by the withMermaid function.

```text
withMermaid(userConfig)
  ├── config.mermaid → MermaidPlugin(options)
  │   ├── Sets Mermaid security and startup defaults
  │   └── Creates virtual:mermaid-config module
  │
  ├── config.mermaidPlugin → MermaidMarkdown(md, env, pluginOptions)
  │   └── Uses class property for CSS classes
  │
  └── Vite aliases and optimization configuration
      └── ESM module resolution for dependencies
```

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

### View build output structure

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

Displays the file hierarchy of the generated distribution folder.

```text
dist/
├── vitepress-plugin-mermaid.es.mjs    [Main entry, ES module]
├── vitepress-plugin-mermaid.umd.js    [UMD format]
├── index.d.ts                         [Type definitions]
├── Mermaid.vue                        [Component source]
└── mermaid.ts                         [Utility functions]
```

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

### Configure Vite build settings

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

Define the library entry point and output file naming convention in the Vite configuration.

```typescript
build: {
  lib: {
    entry: "src/index.ts",
    name: "MermaidPlugin",
    fileName: (format) => `vitepress-plugin-mermaid.${format}.js`
  }
}
```

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

### Configure package exports

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

Defines the entry points and type definitions in package.json.

```json
"exports": {
  ".": {
    "import": "dist/vitepress-plugin-mermaid.es.mjs",
    "require": "dist/vitepress-plugin-mermaid.umd.js",
    "types": "dist/index.d.ts"
  },
  "./Mermaid.vue": "dist/Mermaid.vue"
}
```

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

### Integrate with custom Vite configuration

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

Demonstrates combining withMermaid with custom Vite settings.

```typescript
// .vitepress/config.ts
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "My Documentation",
    vite: {
      define: {
        __DEV__: true
      }
    },
    mermaid: {
      theme: "forest"
    }
  })
);
```

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

### Project Module Structure

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

Displays the file hierarchy of the source directory.

```text
src/
├── index.ts                 # Entry point, exports withMermaid
├── mermaid-plugin.ts        # Vite plugin for component injection
├── mermaid-markdown.ts      # Markdown-it plugin for code block transformation
├── mermaid.ts              # Low-level render and init functions
└── Mermaid.vue             # Vue component for diagram rendering
```

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

### Configure Vitepress

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

Wrap the Vitepress configuration with withMermaid to enable the plugin.

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

export default withMermaid({
  // your existing vitepress config...
  mermaid:{
    //mermaidConfig !theme here works for light mode since dark theme is forced in dark mode
  },
  ...
});
```

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

### Type Hierarchy Overview

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

Visual representation of the configuration structure and available properties for Mermaid integration.

```text
UserConfig (from vitepress, extended)
├── mermaid: MermaidConfig
│   └── externalDiagrams?: ExternalDiagramDefinition[] (via MermaidPluginOptions)
└── mermaidPlugin: MermaidPluginConfig
    └── class?: string

MermaidConfig
├── securityLevel?: "strict" | "loose" | "antiscript"
├── startOnLoad?: boolean
├── theme?: string
└── ... (many more options)

ExternalDiagramDefinition
├── id: string
├── detector: function
├── renderer: async function
├── parser: function
├── styles: function
└── init: function
```

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

### Import MermaidPlugin and MermaidMarkdown

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

Directly import plugin components for advanced configuration scenarios.

```typescript
import { MermaidPlugin, MermaidMarkdown } from "vitepress-plugin-mermaid";
import { MermaidConfig } from "mermaid";

// Using components directly in Vite config
// (typically not needed; use withMermaid instead)
```

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

### Configure VitePress with Mermaid

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

Wrap the VitePress configuration object using withMermaid to enable plugin functionality.

```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 
    },
});
```

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

### Using withMermaid Helper

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

Alternative configuration method using the withMermaid helper function.

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

export default withMermaid({
  mermaid: {
    theme: "forest",
    securityLevel: "loose"
  }
});
```

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

### init(externalDiagrams: ExternalDiagramDefinition[]): Promise<void>

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

Initializes Mermaid with external diagram support. This function registers external diagram definitions and resolves when complete.

```APIDOC
## init(externalDiagrams: ExternalDiagramDefinition[]): Promise<void>

### Description
Initializes Mermaid with external diagram support. This function attempts to register external diagram definitions with Mermaid.

### Parameters
- **externalDiagrams** (ExternalDiagramDefinition[]) - Required - Array of external diagram definitions to register with Mermaid.

### Return Value
- **Promise<void>** - Resolves when external diagrams have been registered or immediately if mermaid doesn't support diagram registration.
```

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

### Display Documentation Directory Structure

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

Visual representation of the project's documentation file hierarchy.

```text
output/
├── README.md (this file)
├── types.md
├── configuration.md
└── api-reference/
    ├── with-mermaid.md
    ├── mermaid-plugin.md
    ├── mermaid-markdown.md
    ├── mermaid-functions.md
    └── mermaid-component.md
```

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

### System Architecture Diagram

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

Visual representation of the three integration layers within the plugin.

```text
┌─────────────────────────────────────────────┐
│     VitePress Configuration Layer           │
│  (withMermaid function)                     │
├─────────────────────────────────────────────┤
│     Build-Time Integration Layer            │
│  (MermaidPlugin + MermaidMarkdown)          │
├─────────────────────────────────────────────┤
│     Runtime Layer                           │
│  (Mermaid.vue component + render functions) │
└─────────────────────────────────────────────┘
```

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

### Mermaid Configuration Patterns

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

Various configuration presets for different deployment scenarios and styling requirements.

```typescript
mermaid: {
  startOnLoad: false,        // Render on-demand
  theme: "base",             // Neutral theme
  securityLevel: "loose"     // Allow images
}
```

```typescript
mermaid: {
  startOnLoad: false,
  theme: "dark",
  securityLevel: "strict"    // Secure by default
}
```

```typescript
mermaid: {
  theme: "dark"
}
```

```typescript
mermaid: {
  securityLevel: "antiscript",
  startOnLoad: false,
  flowchart: {
    useMaxWidth: true,
    htmlLabels: false       // No HTML injection
  }
}
```

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

### init(diagrams)

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

Registers external diagrams for use with the plugin.

```APIDOC
## init(diagrams)

### Description
Initializes and registers external diagram definitions.

### Parameters
- **diagrams** (Array) - Required - List of external diagrams to register.
```

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

### withMermaid(config: UserConfig): UserConfig

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

Wraps a VitePress configuration object to enable Mermaid diagram support.

```APIDOC
## withMermaid(config: UserConfig): UserConfig

### Description
Wraps a VitePress `UserConfig` object and adds all necessary Mermaid diagram support, including markdown hooks, Vite plugins, and dependency optimizations.

### Parameters
- **config** (`UserConfig`) - Required - A VitePress configuration object. Can include optional `mermaid` (MermaidConfig) and `mermaidPlugin` (MermaidPluginConfig) properties.

### Return Value
- **UserConfig** - The modified VitePress configuration object with Mermaid plugin setup applied.

### Example Usage
```typescript
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "My Documentation",
    mermaid: {
      theme: "dark"
    },
    mermaidPlugin: {
      class: "mermaid-diagram"
    }
  })
);
```
```

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

### Use rendering functions

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

Access the render and init functions directly from the mermaid module for custom rendering logic.

```typescript
import { render, init } from "vitepress-plugin-mermaid/mermaid.ts";

const svg = await render("id", "code", { theme: "dark" });
```

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

### Direct Module Dependencies

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

Lists the primary dependencies required for the plugin to function within a VitePress environment.

```text
vitepress-plugin-mermaid
├── vite (for Plugin type)
├── vitepress (for UserConfig, useData)
├── mermaid (for rendering, types)
├── vue (for component, lifecycle hooks)
└── markdown-it (for md parameter type)
```

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

### MermaidPlugin(inlineOptions)

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

Initializes the Mermaid plugin for Vite. This function registers the Mermaid component globally and configures the virtual module for runtime access.

```APIDOC
## MermaidPlugin(inlineOptions)

### Description
Initializes the Mermaid plugin for Vite. This function registers the Mermaid component globally and configures the virtual module for runtime access.

### Parameters
- **inlineOptions** (Partial<MermaidPluginOptions>) - Optional - Mermaid configuration options to override defaults.

### Return Value
- **Plugin** - A Vite plugin instance that registers the Mermaid component and configures the virtual module.

### Example Usage
```typescript
// vite.config.ts
import { MermaidPlugin } from "vitepress-plugin-mermaid";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    MermaidPlugin({
      theme: "dark",
      securityLevel: "strict"
    })
  ]
});
```
```

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

### Override Theme Inline

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

Apply a specific theme to an individual diagram using the init directive.

```markdown
```mermaid
%%{init: {'theme': 'forest'}}%%
graph LR
  A --> B
```
```

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

### Import Type Definitions

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

Import withMermaid to ensure TypeScript recognizes the plugin types.

```typescript
import { withMermaid } from "vitepress-plugin-mermaid";
// Types are auto-extended on this import
```

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

### Configure withMermaid function

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

Wrap the VitePress configuration object with withMermaid to enable plugin functionality and define Mermaid settings.

```typescript
export default withMermaid({
  // Your existing VitePress config...
  
  // Mermaid diagram configuration
  mermaid: {
    // ... mermaid options
  },
  
  // Plugin-specific configuration
  mermaidPlugin: {
    // ... plugin options
  }
});
```

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

### Production Configuration

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

Configure the plugin within the VitePress config file using withMermaid.

```typescript
// .vitepress/config.ts
import { withMermaid } from "vitepress-plugin-mermaid";
import { defineConfig } from "vitepress";

export default withMermaid(
  defineConfig({
    title: "Documentation",
    description: "With Mermaid diagrams",
    
    // VitePress config
    base: "/docs/",
    theme: "light",
    
    // Mermaid configuration
    mermaid: {
      securityLevel: "loose",
      startOnLoad: false,
      theme: "base",
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true,
        curve: "basis"
      }
    },
    
    // Plugin configuration
    mermaidPlugin: {
      class: "mermaid-diagram"
    }
  })
);
```

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

### withMermaid(config)

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

Configures the VitePress plugin with the provided configuration object.

```APIDOC
## withMermaid(config)

### Description
Sets up the plugin within the VitePress configuration.

### Parameters
- **config** (Object) - Required - The VitePress configuration object to be modified.
```

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

### withMermaid

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

The main integration function used to wrap a VitePress configuration to enable Mermaid diagram support.

```APIDOC
## withMermaid

### Description
Main integration function that wraps a VitePress configuration and adds all necessary Mermaid diagram support.

### Signature
`function withMermaid(config: UserConfig): UserConfig`

### Parameters
- **config** (UserConfig) - Required - The VitePress configuration object to be wrapped.
```

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

### Configure Sequence Diagram options

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

Define sequence diagram-specific rendering settings within the mermaid configuration object.

```typescript
mermaid: {
  sequence: {
    diagramMarginX: number,      // Left/right margin
    diagramMarginY: number,      // Top/bottom margin
    actorMargin: number,         // Margin around actors
    width: number,               // Diagram width
    height: number,              // Diagram height
    mirrorActors: boolean,       // Mirror actors top and bottom
    noteBkgColor: string,        // Note background color
  }
}
```

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

### Virtual Build Dependencies

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

Lists dependencies generated or aliased at build time, primarily derived from Mermaid requirements.

```text
Generated at build time:
├── dayjs (Mermaid dependency, aliased)
├── debug (Mermaid dependency)
├── cytoscape (Mermaid dependency)
├── @braintree/sanitize-url (Mermaid dependency)
└── @mermaid-js/mermaid-mindmap (optional)
```

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

### Configure Gantt Chart options

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

Define Gantt chart-specific rendering settings within the mermaid configuration object.

```typescript
mermaid: {
  gantt: {
    useWidth: number | undefined,     // Force width
    gridLineStartPadding: number,      // Left padding
    fontSize: number,                  // Font size
    fontFamily: string,                // Font family
    numberSectionStyles: number,       // Section color variations
  }
}
```

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

### Configure Flowchart options

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

Define flowchart-specific rendering settings within the mermaid configuration object.

```typescript
mermaid: {
  flowchart: {
    useMaxWidth: boolean,        // Use full container width
    htmlLabels: boolean,         // Support HTML in labels
    curve: "linear" | "basis",   // Line curve style
    padding: number,             // Padding around diagram
    minEdgeLength: number,       // Minimum edge length
    maxEdgeLength: number,       // Maximum edge length
    rankSpacing: number,         // Space between ranks
    nodeSpacing: number,         // Space between nodes
  }
}
```

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

### Set Global Theme

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

Define a default theme for all diagrams in the configuration.

```typescript
mermaid: {
  theme: "dark"
}
```

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

### Configure Mermaid settings

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

Various ways to apply Mermaid configuration within the plugin ecosystem.

```typescript
export default withMermaid({
  mermaid: {
    securityLevel: "loose",
    startOnLoad: false,
    theme: "dark",
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    }
  }
});
```

```typescript
MermaidPlugin({
  theme: "forest",
  securityLevel: "strict"
})
```

```typescript
const svg = await render(id, code, mermaidConfig);
```

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

### Configure Mermaid Theme via Frontmatter

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

Set the Mermaid theme for a specific page using the mermaidTheme parameter in the frontmatter.

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

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

### Set Theme via Frontmatter

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

Apply a theme override for a specific page using frontmatter.

```yaml
---
mermaidTheme: forest
---
```

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

### Initialize Mermaid with External Diagrams

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

Registers external diagram definitions with Mermaid. Errors during registration are caught and logged without throwing.

```typescript
import { init } from "vitepress-plugin-mermaid/mermaid.ts";

const externalDiagrams = []; // Array of ExternalDiagramDefinition objects

await init(externalDiagrams);
// Mermaid is now configured with external diagrams
```

```typescript
// If an error occurs:
console.error(e);
// Function still resolves without throwing
```

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

### Rendered HTML output for Mermaid component

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

Shows the resulting HTML structure after applying custom classes.

```html
<!-- Rendered as: -->
<div class="custom-diagram-style dark-enabled"><!-- SVG content --></div>
```

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

### render(graph, config)

Source: https://github.com/emersonbottero/vitepress-plugin-mermaid/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

Renders a Mermaid diagram string into the specified context.

```APIDOC
## render(graph, config)

### Description
Processes and renders a Mermaid diagram string based on the provided configuration.

### Parameters
- **graph** (string) - Required - The Mermaid diagram definition string.
- **config** (MermaidConfig) - Optional - Configuration overrides for the rendering process.
```

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

### Initialization Error Handling

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

Registers external diagrams and logs errors to the console without throwing, ensuring the initialization process always resolves.

```javascript
init(externalDiagrams):
  try {
    if (mermaid.registerExternalDiagrams) {
      await mermaid.registerExternalDiagrams(diagrams)
    }
  } catch (e) {
    console.error(e)  ← Logged, not thrown
  }
  ← Always resolves, never rejects
```

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

### Enable Image Support

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

Set the securityLevel to loose to allow images within diagrams.

```typescript
mermaid: {
  securityLevel: "loose"  // Required for images
}
```

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

### Theme Determination Algorithm

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

Defines the precedence rules for theme resolution, ranging from global defaults to dark mode overrides.

```text
Theme Determination Algorithm:

1. Load global config:
   theme = config.mermaid.theme or default

2. Check page frontmatter:
   if (frontmatter.mermaidTheme) {
     theme = frontmatter.mermaidTheme
   }

3. Check dark mode:
   if (document.documentElement.classList.contains("dark")) {
     theme = "dark"  ← Overrides all previous
   }

4. Final config:
   mermaidConfig.theme = theme

Precedence (highest → lowest):
  Dark mode class > Page frontmatter > Global config > Default
```

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

### Theme Change Handling

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

The process triggered when a user switches between light and dark modes.

```text
User switches to dark mode
         ↓
    Browser adds "dark" class to <html>
         ↓
    MutationObserver detects attribute change
         ↓
    renderChart() called
         ↓
    Theme detected: hasDarkClass = true
         ↓
    mermaidConfig.theme = "dark"
         ↓
    render() called with new config
         ↓
    Mermaid re-renders SVG in dark theme
         ↓
    Anti-cache mechanism: append random token
         ↓
    v-html triggers update
         ↓
    SVG replaced with dark version
```

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

### Module Organization Structure

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

File system layout and functional responsibilities of the plugin modules.

```text
vitepress-plugin-mermaid/
├── index.ts              [ENTRY POINT]
│   ├── Exports: withMermaid, MermaidMarkdown, MermaidPlugin, UserConfig
│   └── Declares: UserConfig type extension for VitePress
│
├── mermaid-plugin.ts     [VITE PLUGIN]
│   ├── Exports: MermaidPlugin function, MermaidPluginConfig interface
│   ├── Behavior: Component injection, virtual module creation
│   └── Runs: During Vite build and dev server setup
│
├── mermaid-markdown.ts   [MARKDOWN PROCESSOR]
│   ├── Exports: MermaidMarkdown function
│   ├── Behavior: Code block transformation
│   └── Runs: During markdown parsing
│
├── mermaid.ts            [RENDERING UTILITIES]
│   ├── Exports: init, render functions
│   ├── Behavior: Mermaid library interface
│   └── Runs: At component render time (async)
│
└── Mermaid.vue           [COMPONENT]
    ├── Exports: Vue 3 component
    ├── Props: id, graph (encoded), class
    ├── Behavior: Theme detection, rendering, image sync
    └── Runs: At page load and theme changes
```

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

### Configure Mermaid options

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

Passes custom configuration objects directly to the Mermaid instance.

```typescript
// User can configure any Mermaid option
export default withMermaid({
  mermaid: {
    theme: "dark",
    flowchart: { ... },
    sequence: { ... },
    // ... any Mermaid config
  }
});
```

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

### Create Mermaid Graph with Images and Links

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

Define a graph with embedded images and clickable nodes. Ensure image files are placed in the public folder.

```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
```

```mermaid
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
```

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

### Configure Plugin Options

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

Define plugin-specific settings such as custom CSS classes using the mermaidPlugin property.

```typescript
export default withMermaid({
  title: "My Docs",
  mermaidPlugin: {
    class: "mermaid-custom"
  }
});
```

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

### render(id: string, code: string, config: MermaidConfig): Promise<string>

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

Renders a Mermaid diagram to an SVG string using the provided configuration.

```APIDOC
## render(id: string, code: string, config: MermaidConfig): Promise<string>

### Description
Render a Mermaid diagram to SVG. This function initializes Mermaid with the provided configuration and returns the SVG markup.

### Parameters
- **id** (string) - Required - Unique identifier for the diagram.
- **code** (string) - Required - Mermaid diagram definition code.
- **config** (MermaidConfig) - Required - Mermaid configuration object for this render.

### Return Value
- **Promise<string>** - Resolves to an SVG string representation of the rendered diagram.
```

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

### Configure Mermaid Options

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

Pass custom Mermaid configuration settings within the mermaid property of the withMermaid wrapper.

```typescript
export default withMermaid({
  title: "My Docs",
  mermaid: {
    securityLevel: "loose",
    theme: "dark"
  }
});
```

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

### Configure CSS classes

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

Defines multiple CSS classes for the mermaid wrapper div.

```typescript
mermaidPlugin: {
  class: "mermaid dark-enabled diagram-border diagram-shadow"
}
```

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

### Default Mermaid Plugin Configuration

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

Initial settings for the Mermaid component, which can be overridden via virtual configuration.

```typescript
{
  securityLevel: "loose",    // Allows external content (images)
  startOnLoad: false,        // Diagrams rendered on-demand
  externalDiagrams: []       // No external diagrams by default
}
```

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

### Mermaid Library Configuration

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

Pass standard Mermaid configuration options directly through the mermaid property in the config object.

```typescript
export default withMermaid(
  defineConfig({
    title: "My Docs",
    mermaid: {
      theme: "forest",
      securityLevel: "loose",
      flowchart: {
        useMaxWidth: true
      }
    }
  })
);
```

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

### Default Plugin Configuration

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

The default settings applied when no options are provided to the plugin.

```typescript
{
  securityLevel: "loose",    // Allows external content (e.g., images)
  startOnLoad: false         // Diagrams are rendered on-demand, not on page load
}
```

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

### Default Plugin and Mermaid Settings

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

Default configuration values used by the plugin when no custom settings are provided.

```typescript
// Mermaid defaults
{
  securityLevel: "loose",     // Allow external images
  startOnLoad: false          // Render on-demand
}

// Plugin defaults
{
  class: "mermaid"            // CSS class applied to diagrams
}
```

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

### Shared Configuration via Virtual Module

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

Describes the mechanism for sharing and caching configuration across multiple Mermaid.vue instances.

```text
virtual:mermaid-config
    ↓
Shared across all Mermaid.vue instances
    ↓
Each instance can:
  - Load once and cache
  - Override theme based on page
  - Re-render on external changes
    ↓
Result: Consistent configuration across page
```

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

### Registering Mermaid with VitePress Markdown Config

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

Use this pattern within the VitePress configuration to register the Mermaid plugin while preserving the original markdown configuration.

```typescript
// In withMermaid implementation
config.markdown.config = (...args) => {
  MermaidMarkdown(...args, config.mermaidPlugin);
  markdownConfigOriginal(...args);
};
```

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

### Mermaid rendering function signatures

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

Asynchronous function signatures for initializing diagrams and rendering Mermaid code strings.

```typescript
async function init(externalDiagrams: ExternalDiagramDefinition[]): Promise<void>
async function render(id: string, code: string, config: MermaidConfig): Promise<string>
```

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

### Define Mermaid Gantt Chart

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

Create a project timeline using the Gantt chart syntax.

```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
```

```mermaid
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
```

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

### UserConfig Extension

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

The plugin extends the VitePress UserConfig interface to include mermaid and mermaidPlugin configuration objects.

```APIDOC
## UserConfig Extension

### Description
The plugin adds optional `mermaid` and `mermaidPlugin` properties to the VitePress `UserConfig` interface.

### Fields
- **mermaid** (MermaidConfig) - Optional - Configuration for Mermaid diagrams.
- **mermaidPlugin** (MermaidPluginConfig) - Optional - Plugin-specific configuration settings.

### Usage Example
```typescript
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
  title: "My Docs",
  mermaid: {
    theme: "dark"
  },
  mermaidPlugin: {
    class: "my-diagram-class"
  }
});
```
```

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

### Register Mermaid Component

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

Ensure the configuration is wrapped in withMermaid to register the component correctly.

```typescript
export default withMermaid({
  // ... config
});
```

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

### Component State Lifecycle

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

Outlines the reactive state transitions and cleanup processes within the Mermaid.vue component lifecycle.

```text
Mermaid.vue Reactive State

onMounted:
  pluginSettings = {
    securityLevel: "loose",
    startOnLoad: false,
    externalDiagrams: []
  }
  svg = null          ← Initially empty
  mut = null          ← MutationObserver ref

During renderChart():
  mermaidConfig = {
    ...pluginSettings,
    theme: "dark" | "forest" | undefined  ← Theme resolution
  }
  
  svg.value = `${svgCode} <span>salt</span>`
              ↑ Updated on every render

onUnmounted:
  mut.disconnect()    ← Cleanup
```

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

### Rendered HTML structure

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

Shows the resulting HTML structure with the applied CSS class.

```html
<div class="mermaid custom-class"><!-- SVG --></div>
```

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

### Runtime Page Load Lifecycle

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

The sequence of events occurring when the browser loads the page and initializes the Mermaid component.

```text
Browser loads HTML page
         ↓
    Vue app initializes
         ↓
    Mermaid component mounts
         ↓
    onMounted() lifecycle:
    ├── 1. init(externalDiagrams) → registers external types
    ├── 2. import virtual:mermaid-config → loads settings
    ├── 3. Create MutationObserver for theme changes
    ├── 4. Call renderChart()
    │   ├── Detect dark class
    ├── 5. Check for images
    │   └── If found: wait for load + re-render
    └── Attach observer to HTML element
         ↓
    SVG rendered and displayed
         ↓
    Component ready
```

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

### Export Mermaid rendering functions

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

Named exports for low-level Mermaid initialization and rendering utilities.

```typescript
export { init, render }
```

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

### Apply custom theme variables to Mermaid diagrams

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

Use the init configuration block to override default theme colors. This approach works for both mmd and mermaid code blocks.

```mmd
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
```

```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
```

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

### MermaidMarkdown(md, env, pluginOptions)

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

Extends a markdown-it instance to process mermaid diagram code blocks.

```APIDOC
## MermaidMarkdown(md, env, pluginOptions)

### Description
Extends a markdown-it instance to detect and transform mermaid and mmd fenced code blocks into Vue components with automatic Suspense wrapping.

### Parameters
- **md** (MarkdownIt) - Required - The markdown-it instance to extend.
- **env** (any) - Required - The markdown-it environment object passed through from the markdown configuration.
- **pluginOptions** (MermaidPluginConfig) - Optional - Plugin-specific configuration including custom CSS class settings.
```

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

### Define withMermaid signature

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

The function signature for integrating Mermaid into VitePress configuration.

```typescript
function withMermaid(config: UserConfig): UserConfig
```

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

### Custom Styling Configuration

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

Apply custom CSS classes to rendered diagrams via the mermaidPlugin configuration property.

```typescript
export default withMermaid(
  defineConfig({
    title: "My Docs",
    mermaidPlugin: {
      class: "mermaid-diagram my-custom-style"
    }
  })
);
```

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

### Usage in Mermaid Vue Component

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

Demonstrates how to integrate rendering functions within a Vue component lifecycle.

```typescript
// In Mermaid.vue
import { render, init } from "./mermaid";

// On mount
onMounted(async () => {
  await init(pluginSettings.value.externalDiagrams);
  await renderChart();
});

// When rendering
const renderChart = async () => {
  let svgCode = await render(
    props.id,
    decodeURIComponent(props.graph),
    mermaidConfig
  );
  svg.value = svgCode;
};
```

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

### Define MermaidConfig interface

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

Interface for Mermaid's initialization and rendering options, re-exported from the mermaid package.

```typescript
// From mermaid package
interface MermaidConfig {
  [x: string]: any;
  securityLevel?: "strict" | "loose" | "antiscript";
  startOnLoad?: boolean;
  theme?: "default" | "dark" | "forest" | "neutral" | "base";
  flowchart?: FlowchartConfig;
  sequence?: SequenceConfig;
  gantt?: GanttConfig;
  // ... and many more Mermaid-specific configuration options
}
```

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

### Basic Mermaid Diagram Usage

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

Renders a basic flowchart using the Mermaid component with a URL-encoded graph string.

```vue
<Mermaid 
  id="flowchart-1"
  graph="flowchart%20TD%0AA%5BStart%5D%20--%3E%20B%5BEnd%5D"
/>
```

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

### MermaidPluginOptions Interface

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

Internal interface extending MermaidConfig to include external diagram definitions.

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

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

### Render Mermaid in Markdown

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

Use the mermaid code block syntax within any Markdown file.

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

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

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

### Markdown Mermaid Integration

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

Shows the source markdown block and the resulting Vue component structure using Suspense for loading states.

```markdown
```mermaid
flowchart TD
  A[Start] --> B[End]
```
```

```vue
<Suspense>
  <template #default>
    <Mermaid 
      id="mermaid-0" 
      class="mermaid" 
      graph="flowchart%20TD%0A%20%20A%5BStart%5D%20--%3E%20B%5BEnd%5D"
    />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>
```

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

### Import available TypeScript types

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

Import these types to ensure type safety when configuring Mermaid within a VitePress project.

```typescript
import type { UserConfig } from "vitepress-plugin-mermaid";
// VitePress UserConfig extended with mermaid properties

import type { MermaidConfig } from "mermaid";
// Mermaid configuration type

import type { MermaidPluginConfig } from "vitepress-plugin-mermaid";
// (Available through module context, not direct import)
```

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

### Markdown Diagram Syntax

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

Embed diagrams directly in Markdown files using the mermaid code block syntax.

```markdown
```mermaid
flowchart TD
  A[Start] --> B[Process]
  B --> C{Decision}
  C -->|Yes| D[End]
  C -->|No| B
```
```

```markdown
```mermaid
%%{init: {'theme': 'forest'}}%%
graph LR
  A --> B
```
```

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

### Per-Page Theme Override

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

Override the global Mermaid theme for a specific page using YAML frontmatter.

```yaml
---
mermaidTheme: forest
title: Using Forest Theme
---
```

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

### Configure CSS Class

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

Customizing the CSS class applied to rendered diagrams via the plugin configuration.

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

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

### MermaidPlugin Function Signature

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

The primary function signature for initializing the plugin.

```typescript
function MermaidPlugin(inlineOptions?: Partial<MermaidPluginOptions>): Plugin
```

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

### Vite Plugin Processing

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

The build-time interception and injection process for the Mermaid component.

```text
Vite build process starts
         ↓
    MermaidPlugin.transform() intercepts
    VitePress app initialization file
         ↓
    Detects: "vitepress/dist/client/app/index.js"
         ↓
    Injects:
    ├── import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue'
    └── app.component("Mermaid", Mermaid)
         ↓
    Virtual module created:
    virtual:mermaid-config → JSON.stringify(options)
         ↓
    Build output includes:
    ├── HTML with Mermaid components
    ├── Vue component (registered globally)
    └── Virtual module accessible at runtime
```

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

### Extend VitePress UserConfig Module

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

Adds mermaid and mermaidPlugin properties to the VitePress UserConfig interface via module augmentation.

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