Saving diagram as SVG?

[shsmad]

Hi, I'm trying to save vue-flow as svg, but I'm stuck with:

import html2canvas from 'html2canvas';
import saveAs from 'file-saver';

import {VueFlow, useVueFlow} from '@vue-flow/core';

const vueFlow = useVueFlow({
    id: 'graph-map-flow', nodes: […], edges: […], 
});

const canvas = await html2canvas(vueFlow.vueFlowRef.value);

saveAs(canvas.toDataURL(), 'map.svg');

And problems are:

1. vueFlow.vueFlowRef.value is a main div with map, controls and other stuff, which I don't need to save
2. (not related to vue-flow) saveAs can't save svg, only jpg/png

If I save in such a way it saves only visible part of my diagram.

So, my question is: is it possible to save full diagram including nodes and edges which are out of viewport and invisible as SVG?

[LolaLandolfvw]

Yes, it is possible to save the full diagram, including nodes and edges that are out of the viewport and invisible, as SVG.

[shsmad]

@LolaLandolfvw I'd be grateful if you could tell me how to do it

[bcakmakoglu]

@shsmad Have you tied using fitView before trying to take a snapshot of the viewport?
That way you move everything (if possible) into the visible viewport and then you can take a screenshot and if necessary revert it afterwards again.

[shsmad]

Yes, I have, but my diagram is too big to fit view even on minimal zoom