# Vite

Import `.mmd` and `.mermaid` files as SVG compiled during the Vite build.

## Overview

The `ondine` plugin from `ondine/vite` compiles each imported Mermaid file when Vite transforms it. The default export of the module is the rendered diagram. The page bundle contains the SVG markup and no compiler.

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

// The import is { height, svg, type, width }, compiled at build time
console.log(flow.type)
```

If a diagram has a syntax error, the transform fails with the file, line, and column. Vite shows the error in the terminal and in the error overlay.

## Walkthrough

The steps below add the plugin, write a diagram, and show it on a page.

### Add the Plugin

Add `ondine()` to the `plugins` list of the Vite config.

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

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

### Write a Diagram

Save Mermaid source in a `.mmd` or `.mermaid` file.

```mermaid
flowchart LR
  request[Request] --> cache{Cached?}
  cache -- yes --> hit[Return]
  cache -- no --> origin[Fetch] --> hit
```

### Show the Diagram

Mount the import into an element, or pass its `svg` to a framework.

#### DOM

```ts title="main.ts"
import { mount } from 'ondine'
import flow from './flow.mmd'

// Replaces the element's contents with the SVG
mount(document.getElementById('flow')!, flow)
```

#### React

```tsx title="Flow.tsx"
import flow from './flow.mmd'

export function Flow() {
  // Inserts the compiled SVG as markup, because the SVG is inert
  return <div dangerouslySetInnerHTML={{ __html: flow.svg }} />
}
```

## Recipes

### Type the Imports

`ondine/vite/client` declares the default export of `.mmd` and `.mermaid` imports. Reference it from a declaration file, or list it in `compilerOptions.types`.

```ts title="src/env.d.ts"
// Types the default export of every Mermaid import
/// <reference types="ondine/vite/client" />
```

### Compile Markdown

`ondine/remark` compiles ` ```mermaid ` fences in `.md` and `.mdx` files. Add it to the MDX plugin, which reads both formats.

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

export default defineConfig({
  // Replaces each Mermaid fence with inline SVG during the build
  plugins: [mdx({ remarkPlugins: [remarkOndine] })],
})
```

Each fence becomes a `<div class="ondine-diagram">` around the SVG. The plugin emits elements, not a markup string, so the diagram renders in each framework that MDX targets.

If a fence has a syntax error, the build fails with the Markdown file, line, and column.

### Fit a Column

`maxWidth` sets the width available to the diagram. If a diagram that runs across does not fit, the compiler draws it running down.

```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
  plugins: [ondine({ maxWidth: 640 })],
})
```

The plugin accepts every [`render` option](/docs/api/compiler/render#parameters) except `idPrefix`. The plugin makes the prefix for each file from the file path.

### Pin the Schedule

A gantt chart schedules relative tasks against the current time. To make builds reproducible, set `now`.

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

export default defineConfig({
  // Schedules every gantt chart against January 15, 2024
  plugins: [ondine({ now: Date.UTC(2024, 0, 15) })],
})
```

## More

- [Mounting](/docs/guides/mounting): Insert compiled diagrams into the page.

- [Theming](/docs/guides/theming): Set colors, fonts, and strokes with CSS custom properties.

- [ondine/vite](/docs/api/vite/ondine): Reference for the plugin and its options.

- [ondine/remark](/docs/api/remark/remarkOndine): Compile Mermaid fences in Markdown and MDX.