# Getting Started

Install Ondine and render a first Mermaid diagram.

## Overview

Ondine is a fast, small diagram engine for Mermaid syntax, written in Rust. It compiles diagrams to SVG ahead of time, so pages ship the SVG and a 210-byte runtime.

```mermaid
flowchart LR
  source[diagram.mmd] --> compiler[Ondine compiler]
  compiler --> svg[SVG]
  svg --> page[Page]
```

The compiler runs in Vite, the CLI, Node, the image Worker, and the browser.

## Install

Install Ondine with the project's package manager.

#### pnpm

```sh
# Adds Ondine to the project
pnpm add ondine
```

#### npm

```sh
# Adds Ondine to the project
npm install ondine
```

#### yarn

```sh
# Adds Ondine to the project
yarn add ondine
```

## Setup

Select the integration that matches the build. Each integration runs the same compiler.

#### Vite

Add the plugin to `vite.config.ts`. The plugin then compiles imports of `.mmd` and `.mermaid` files at build time.

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

Import a diagram, then mount it. The default export contains the SVG, its size, and the detected diagram type.

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

// Inserts the precompiled SVG into the element
mount(document.getElementById('flow')!, flow)
```

#### CLI

The CLI renders each Mermaid file to an SVG file beside it, or into a different directory.

```sh
# Writes flow.svg next to flow.mmd
npx ondine flow.mmd

# Writes every diagram into public/diagrams
npx ondine diagrams/*.mmd --out-dir public/diagrams
```

If no files are given, the CLI reads standard input and writes SVG to standard output.

```sh
# Pipes Mermaid in and SVG out
echo 'flowchart LR; A --> B' | npx ondine > flow.svg
```

#### Node

Call `render` from a build script, a server, or a static site generator.

```ts title="build.ts"
import { render } from 'ondine/compiler'

// Returns the SVG document with its size and diagram type
const { svg } = render('flowchart LR\n  A --> B')
```

The compiler module loads on the first call. Later calls use the same module.

## Next Steps

- [Vite](/docs/guides/vite): Import Mermaid files as precompiled SVG.

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

- [Diagrams](/docs/diagrams/flowchart): Browse every diagram type with rendered examples.