# 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`.

<Tabs>
<Tab title="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 }} />
}
```

</Tab>
<Tab title="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>
```

</Tab>
<Tab title="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>
```

</Tab>
</Tabs>

## More

<Cards>
  <Card
    title="mount"
    icon="code"
    to="/docs/api/ondine/mount"
    description="Reference for mount and its result."
  />
  <Card
    title="Theming"
    icon="palette"
    to="/docs/guides/theming"
    description="Style mounted diagrams with CSS custom properties."
  />
  <Card
    title="Vite"
    icon="zap"
    to="/docs/guides/vite"
    description="Import Mermaid files as precompiled SVG."
  />
</Cards>