Exporting

There are three things you might want to export from Nodus: a raster image (pixels — for thumbnails, downloads, or pasting into a doc), a vector image (SVG — for print-quality output and editing), and the graph data itself (JSON — to save and reload state). This guide covers each, and when to reach for which.

For how the renderers and the SVG path relate, see the Rendering Pipeline.

Raster snapshot

nodus.view.getImageData() captures the current view as raster image data — exactly what’s on screen, at the current zoom, pan and size.

const image = nodus.view.getImageData();

Use a raster snapshot when you want a quick bitmap: a preview thumbnail, a download button, or an image to drop into another canvas. Because it captures the current view, frame the graph first if you want the whole thing:

await nodus.view.locateGraph(); // fit everything in view
const image = nodus.view.getImageData();

Tip

The snapshot reflects exactly what the camera shows. Set the view — zoom, center, size — to the framing you want before grabbing it.

Vector output (SVG)

For print-quality output or a diagram you’ll edit in a vector tool, use the SVG path. SVG is resolution-independent: it scales to any size without blurring, and every shape stays editable. This is the right choice for reports, posters, and handing a figure to a designer.

The trade-off is throughput — SVG is a DOM/vector format, not a GPU rasterizer — so it’s for export, not for interactive rendering of very large graphs. See the Rendering Pipeline for how the GPU, Canvas 2D and SVG paths compare.

Raster vs vector — which to use

Need	Use	Why
Thumbnail, preview, quick download	Raster — view.getImageData()	Fast, captures the live view as pixels.
Print, poster, figure for a report	Vector — SVG path	Resolution-independent, editable shapes.
Embed in another <canvas>	Raster	Pixel data drops straight in.
Hand to a vector editor	Vector — SVG	Stays editable.

Try it live — export the graph to JSON, SVG and PNG and see each result:

Export JSON, SVG & PNG Open in new tab ↗

Exporting graph data to JSON

To save and restore the graph itself (not an image), serialize it to JSON.

A single element

Every Node and Edge has toJSON(opts?), which returns a plain JSON object for that element:

const node = nodus.getNode('a');
const json = node.toJSON();

Map over a collection to serialize many at once:

const nodesJson = nodus.getNodes().map((n) => n.toJSON());
const edgesJson = nodus.getEdges().map((e) => e.toJSON());

const snapshot = { nodes: nodesJson, edges: edgesJson };
localStorage.setItem('graph', JSON.stringify(snapshot));

The whole graph

nodus.export is the instance’s export module — use it to export the graph (and images) at the graph level rather than element by element. Treat it as the entry point when you want a full export rather than assembling one from individual toJSON calls.

// Export the graph through the instance export module.
const data = nodus.export; /* graph / image export entry point */

Reloading exported data

Exported node/edge JSON follows the same RawGraph shape you pass to setGraph, so a round-trip is straightforward:

const snapshot = JSON.parse(localStorage.getItem('graph'));
await nodus.setGraph(snapshot);
await nodus.layouts.force({ duration: 0 });
await nodus.view.locateGraph();

A download helper

Wiring a raster snapshot to a download button:

async function downloadSnapshot(filename = 'graph.png') {
  await nodus.view.locateGraph();
  const image = nodus.view.getImageData();
  // Convert the image data to a blob/URL in your app and trigger a download.
  // (Use the raster path for pixels; the SVG path for vector output.)
  return image;
}

document
  .getElementById('export-btn')
  .addEventListener('click', () => downloadSnapshot());

Next

• The Rendering Pipeline — GPU, Canvas 2D and SVG, and how a renderer is chosen.
• Graph Model — the RawGraph shape that exported JSON round-trips through.
• Controlling the Camera — frame the view before you snapshot it.