Download Image

This example shows how to download a flow as an image with html-to-image .

The version of the html-to-image package used in this example, has been locked to 1.11.11, which is the latest working version for the package. The recent versions, after 1.11.11, are not exporting images properly and there is open issue for this on Github.


<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
  import DownloadButton from './DownloadButton.svelte';
 
  const nodes = writable<Node[]>(initialNodes);
  const edges = writable<Edge[]>(initialEdges);
 
  const defaultEdgeOptions = {
    animated: true,
    type: 'smoothstep'
  };
</script>
 
<div style="height:100vh;">
  <SvelteFlow {nodes} {edges} {defaultEdgeOptions} fitView>
    <DownloadButton />
    <Background />
  </SvelteFlow>
</div>