# ondine

Create a Vite plugin that imports `.mmd` and `.mermaid` files as precompiled SVG.

The plugin compiles each matching module in its `transform` hook and ignores query strings in the module ID. The default export of the module is the rendered diagram, and the page bundle contains no compiler.

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import { ondine } from 'ondine/vite'

export default defineConfig({
  // Compiles .mmd and .mermaid imports
  plugins: [ondine()],
})
```

## Signature

```ts
// Returns a Vite plugin named 'ondine'
ondine(options?)
```

## Parameters

### options

* **Type:** `Omit<render.Options, 'idPrefix'>`
* **Default:** `{}`

The rendering options for every imported diagram. The plugin accepts every [`render` option](/docs/api/compiler/render#parameters) except `idPrefix`. It makes the prefix for each file from a hash of the file path.

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import { ondine } from 'ondine/vite'

export default defineConfig({
  // Lays out every diagram for a 640-pixel column, at 14-pixel text
  plugins: [ondine({ fontSize: 14, maxWidth: 640 })],
})
```

## Returns

### plugin

* **Type:** `Plugin`

A Vite plugin. Each import of a Mermaid file resolves to a module with a default export that has these fields:

| Field    | Type     | Description               |
| -------- | -------- | ------------------------- |
| `height` | `number` | Height in pixels          |
| `svg`    | `string` | The SVG document          |
| `type`   | `string` | The detected diagram type |
| `width`  | `number` | Width in pixels           |

```ts title="main.ts"
import flow from './flow.mmd'

// The plugin computes the SVG and its size at build time
const { height, svg, type, width } = flow
```

The default export does not include `links` from `render`.

## Errors

### Transform Error

The plugin converts a [`RenderError`](/docs/api/compiler/RenderError) to a Vite transform error with the file, line, column, and Mermaid message. This error fails `vite build` and shows in the development overlay. The plugin throws other errors again without changes.