# Mounting

Insert compiled diagrams into a page with the 210-byte `ondine` runtime.

## Overview

The `mount` function from `ondine` inserts precompiled SVG into an element and replaces the previous contents of the element. It imports nothing from the compiler. Thus, a page that mounts diagrams downloads no parser and no layout code.

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

// Replaces the element's contents with the diagram
const mounted = mount(document.getElementById('flow')!, flow)
```

The `mount` function accepts an SVG string or an object with an `svg` field. A [Vite import](/docs/guides/vite) and a [`render`](/docs/api/compiler/render) result are such objects.

## Mount a Diagram

By default, the mounted SVG keeps its own width but shrinks to fit a narrower container. It keeps its aspect ratio.

```mermaid
flowchart LR
  import[flow.mmd import] --> mount[mount]
  mount --> element[Element]
```

## Unmount a Diagram

The `unmount` function of the returned object empties the element. A second `mount` into the same element replaces the previous diagram.

```ts title="main.ts"
// Removes the diagram from its element
mounted.unmount()
```

## Use a Framework

A framework that renders markup can insert the SVG directly, without `mount`.

#### React

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

export function Flow() {
  // Compiled output is inert SVG, so it is inserted as markup
  return <div dangerouslySetInnerHTML={{ __html: flow.svg }} />
}
```

#### Vue

```vue title="Flow.vue"
<script setup lang="ts">
import flow from './flow.mmd'
</script>

<template>
  <!-- Compiled output is inert SVG, so it is inserted as markup -->
  <div v-html="flow.svg" />
</template>
```

#### Svelte

```svelte title="Flow.svelte"
<script lang="ts">
  import flow from './flow.mmd'
</script>

<!-- Compiled output is inert SVG, so it is inserted as markup -->
<div>{@html flow.svg}</div>
```

## More

- [mount](/docs/api/ondine/mount): Reference for mount and its result.

- [Theming](/docs/guides/theming): Style mounted diagrams with CSS custom properties.

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