Skip to content
Nodus

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();

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

NeedUseWhy
Thumbnail, preview, quick downloadRaster — view.getImageData()Fast, captures the live view as pixels.
Print, poster, figure for a reportVector — SVG pathResolution-independent, editable shapes.
Embed in another <canvas>RasterPixel data drops straight in.
Hand to a vector editorVector — SVGStays 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