Download Image

This example demonstrates how to export your Svelte Flow diagram as an image. Learn how to capture the current view of your flow and save it as a PNG or other image format, which is useful for sharing, documentation, or printing your diagrams.

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 { SvelteFlow, Background, Controls, type Node, type Edge } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import DownloadButton from './DownloadButton.svelte';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
  import CustomNode from './CustomNode.svelte';
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
 
  const nodeTypes = {
    custom: CustomNode,
  };
 
  const defaultEdgeOptions = {
    animated: true,
    type: 'smoothstep',
  };
</script>
 
<SvelteFlow bind:nodes bind:edges {nodeTypes} {defaultEdgeOptions} fitView>
  <Controls />
  <DownloadButton />
  <Background />
</SvelteFlow>