Export

SVG

const { svg, clip } = await editor.exportAsSVG({ svgMode: "web" })

• svg: string — serialised SVG markup
• clip: { x, y, width, height } — viewport of the rendered diagram

ExportOptions:

Field	Type	Default	Effect
svgMode	"web" | "compat"	"web"	"web" keeps CSS variables for theme-adaptive rendering; "compat" resolves them and inlines fonts/attributes (PDF/PPT/Inkscape).
margin	number | { top?, right?, bottom?, left?: number }	0	Extra space around the diagram bounding box.
keepOriginalSize	boolean	false	If true, do not normalise the viewBox to the diagram bounds — preserve the editor's current pan/zoom framing.
include	string[]	—	Render only the listed element ids. Mutually exclusive with exclude.
exclude	string[]	—	Render everything except the listed element ids.

Headless SVG export (no mounted editor)

import { ApollonEditor, importDiagram } from "@tumaet/apollon"

const svgExport = await ApollonEditor.exportModelAsSvg(importDiagram(model), {
  svgMode: "compat",
})

This is the same pipeline the standalone server uses to produce server-side PDF / preview thumbnails.

PNG / PDF

PNG and PDF generation downstream of exportAsSVG. See the standalone webapp's export helpers (useExportAsPNG, useExportAsPDF) and the server's pdf-conversion-worker-thread.ts for two reference implementations — both consume the SVG produced above and pipe it through @resvg/resvg-js (PNG) or pdfmake (PDF).

JSON

const model = editor.model // UMLModel
const json = JSON.stringify(model)

Round-trip safe: editor.model = JSON.parse(json).

Wire-format versions

The library reads v2, v3, and v4 model JSON. Use importDiagram(any) to normalize any version to the current v4 shape before assigning to editor.model or passing to exportModelAsSvg.

import { importDiagram } from "@tumaet/apollon"

editor.model = importDiagram(maybeV2OrV3Json)