# remarkOndine

Replace each ` ```mermaid ` fence with the SVG that Ondine renders from it.

The plugin renders each `code` node with the language `mermaid` and replaces the node with HTML elements. The page then contains the SVG but no compiler. The plugin does not change fences in other languages.

```ts title="vite.config.ts"
import mdx from '@mdx-js/rollup'
import { defineConfig } from 'vite'
import { remarkOndine } from 'ondine/remark'

export default defineConfig({
  // Compiles Mermaid fences in .md and .mdx files
  plugins: [mdx({ remarkPlugins: [remarkOndine] })],
})
```

## Signature

```ts
// Returns a remark transformer
remarkOndine(options?)
```

## Parameters

### options

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

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

```ts title="vite.config.ts"
import mdx from '@mdx-js/rollup'
import { defineConfig } from 'vite'
import { remarkOndine } from 'ondine/remark'

export default defineConfig({
  // Lays out every diagram for a 640-pixel column
  plugins: [mdx({ remarkPlugins: [[remarkOndine, { maxWidth: 640 }]] })],
})
```

## Returns

### transformer

* **Type:** `(tree, file) => undefined`

A transformer that replaces each fence with an `ondineDiagram` node. The node holds hast elements, not a markup string. Thus `@mdx-js/mdx` in both formats and `remark-rehype` keep it without raw HTML support. The node becomes this HTML:

```html
<!-- One diagram, with its detected type -->
<div class="ondine-diagram" data-ondine-diagram="flowchart">
  <svg class="ondine ondine-flowchart">…</svg>
</div>
```

If `remark-stringify` writes the tree back to Markdown, each diagram becomes a `mermaid` fence again.

## Errors

### Render Error

If a diagram does not render, the plugin throws an `Error` with the message `file:line:column: message`. The line and column give the location in the Markdown file. The [`RenderError`](/docs/api/compiler/RenderError) is the `cause` of this error, and the error fails the build.