Skip to Content
ExamplesMisc

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.

import React, { useCallback } from 'react'; import { ReactFlow, useNodesState, useEdgesState, addEdge, Controls, Background, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import DownloadButton from './DownloadButton'; import CustomNode from './CustomNode'; import { initialNodes, initialEdges } from './initialElements'; const connectionLineStyle = { stroke: '#ffff' }; const snapGrid = [25, 25]; const nodeTypes = { custom: CustomNode, }; const defaultEdgeOptions = { animated: true, type: 'smoothstep', }; const defaultViewport = { x: 0, y: 0, zoom: 1.5 }; const DownloadImageFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = useCallback( (params) => setEdges((eds) => addEdge(params, eds)), [], ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} nodeTypes={nodeTypes} connectionLineStyle={connectionLineStyle} connectionLineType="smoothstep" snapToGrid={true} snapGrid={snapGrid} defaultViewport={defaultViewport} fitView attributionPosition="bottom-left" defaultEdgeOptions={defaultEdgeOptions} className="download-image" style={{ backgroundColor: "#F7F9FB" }} > <Controls /> <Background /> <DownloadButton /> </ReactFlow> ); }; export default DownloadImageFlow;
Last updated on