Skip to main content

Quickstart

The smallest working embed, framework-neutral. If your host is React, Angular, or plain HTML, the Embedding pages have the idiomatic version — but the two steps below are all Apollon needs.

1. Install​

npm install @tumaet/apollon

This is the standalone build: React, MUI, emotion, and xyflow are bundled inside the tarball, so there are no peer dependencies to install. React hosts should instead use the /react subpath — see Install.

:::danger The editor MUST have an explicit height Apollon renders onto a React Flow canvas, which sizes itself to its parent. If the container has no resolvable height — no height, or a percentage height whose ancestors are not themselves sized — the canvas collapses to zero pixels and the editor renders blank. This is the single most common embedding mistake.

Give the container an explicit height (600px, 80vh, or a child of a sized flex or grid parent). The width can be 100%; only the height bites. See Troubleshooting for the full diagnosis. :::

2. Mount the editor​

React hosts​

Install the /react subpath (see Install) and render the <Apollon> component. It owns the editor's lifecycle.

import { Apollon } from "@tumaet/apollon/react"
import "@tumaet/apollon/style.css"

export function Diagram() {
  return <Apollon style={{ height: 600 }} />
}

The style prop sizes the editor's container — the explicit height is what keeps the canvas from rendering blank. See React for the full prop surface, the useApollonEditor / useApollonSubscription hooks, ref handling, and SSR.

Non-React hosts​

Angular, Vue, Svelte, and vanilla JS construct the imperative ApollonEditor directly. Give it a sized container:

<div id="apollon" style="width: 100%; height: 600px"></div>
import { ApollonEditor } from "@tumaet/apollon"
import "@tumaet/apollon/style.css"

const container = document.getElementById("apollon")
if (!container) throw new Error("#apollon container missing")

const editor = new ApollonEditor(container)

The stylesheet import is mandatory in both paths — without @tumaet/apollon/style.css the editor mounts unstyled. The constructor throws if container is not an HTMLElement.

What you should see​

A full-bleed modeling canvas filling the 600 px-tall container: a sidebar of draggable UML elements, a toolbar, and an empty grid. Drag an element onto the grid to start a class diagram.

Read the current diagram, replace it, and observe changes:

const model = editor.model // UMLModel as plain JSON
editor.model = model // round-trip safe

const id = editor.subscribeToModelChange((next) => console.log(next))
editor.unsubscribe(id)

Tear down​

Always destroy the editor before removing its container or mounting a new one on the same node:

editor.destroy()

Next steps​