grafloria

Learn / Export

Export

Exports render the scene graph, not a screenshot — full quality at any scale, whatever is on or off camera. Five formats, one async call, plus a server-side path that needs no DOM at all.

The one call

const png  = await instance.export('png', { scale: 2 });  // data: URL
const jpeg = await instance.export('jpeg');                 // data: URL
const webp = await instance.export('webp');                 // data: URL
const svg  = await instance.export('svg');                  // raw SVG source string
const pdf  = await instance.export('pdf');                  // data: URL — a real vector PDF

export() is async because it waits for custom-node painters — your React/Vue/Angular-rendered nodes are captured faithfully. Two sync variants exist when you don't need that: exportSvgString() (deterministic, DOM-free, carries warnings) and exportPdf() (returns { pdf: Uint8Array, … }).

Angular surfaces the same thing as exportDiagram(format, options) on the canvas component; Vue also exposes template-ref shortcuts.

// the classic download button
const a = document.createElement('a');
a.href = await instance.export('png', { scale: 2 });
a.download = 'diagram.png';
a.click();
SVG comes back as a raw string — wrap it yourself: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg). And export requires a painted canvas — calling before the first paint throws a clear error rather than returning a blank image.

Live: export demos →

PDF that is actually vector

export('pdf') produces paths as paths and text as selectable text — not a rasterized page. Print it at any size; search it; extract from it.

The editable file trick: embedModel

const svg = await instance.export('svg', { embedModel: true });
// the diagram's full document now rides inside the artifact

import { importDiagram, isEditableArtifact } from '@grafloria/element';
isEditableArtifact(svg);          // true
const model = importDiagram(svg); // back to a live, editable diagram

Works for PNG and SVG. An exported image becomes its own save file — email the picture, and the recipient can keep editing it.

Live: the editable round-trip →

Server-side, no DOM

import { renderStatic } from '@grafloria/element';

const r = renderStatic({ nodes, edges, width: 520, height: 300, standalone: true });
// r.svg — deterministic SVG, rendered headlessly (Node, workers, edge functions)

The same path powers SSR: React's renderToStaticSVG() + the ssr prop renders on the server and hydrates into a live canvas on the client — no dynamic(() => …, { ssr: false }) workarounds.

Where next