How to Save React Flow Diagram as an Image? #1061

gpalrepo · 2021-04-02T03:07:39Z

gpalrepo
Apr 2, 2021

Hi, I want to save the react flow diagram as a png file. Wondering if anyone has suggestions? Thanks!

Answered by moklick

Sep 20, 2022

I've created a "Download Image" example that uses html-to-image.

View full answer

Rudrava · 2021-07-14T03:29:48Z

Rudrava
Jul 14, 2021

Hi @gpalrepo i was also trying to implement something like that can you please share any suggestion if you have made any progress in that !

9 replies

prakash388 Aug 5, 2021

Hi Team, I tried multiple ways but I can't able to. Please help me on this.

Note: My nodes contains images. E.g Each node has 3 sections. First one Image section, second section is title of the node and third is also Image section. It should capture the images also

Rudrava Aug 7, 2021

is it that only your images are not showing up on the image ! ?

amd-99 Sep 16, 2022

Solution for Export react-flow-renderer flow as PDF

Here, I found solution for Export react flow as pdf or SVG with out quality compromise ,I mentioned all steps and attached example

step 1. Need to convert flow into SVG
step 2. After that render SVG into new tab or new window
step 3. And print simply with window.print() and save as pdf.

Example for ReactJS :-
`

          async function exportFlow (){
          
         //for get whole chart print need to fit-view

         reactFlowInstance.fitView( );

         function filter (node: { tagName: string; }) {
         return (node.tagName !== 'i');
          }

     //get only printable elements by className
      let elements = document.getElementsByClassName('react-flow__renderer')[0] as any;


  //converts html to svg (here I used htmlToImage library and its converts with foreign object of svg  , so 
   need to open in new window to render)
     htmlToImage.toSvg(elements, { filter: filter }).then(async(svgContent: any)=>{
    
       const svgElement =  await decodeURIComponent(svgContent.replace("data:image/svg+xml;charset=utf-8,",''").trim();

   const newWindow:any = open();
    newWindow.document.write(
       `<html>
        <head>
        <title>Flow.pdf</title>
        <style>
        @page {
          size: A4 landscape !important;
          margin:0 !important;
        }
        @media print {
        * {
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
        color-adjust: exact !important;                 /*Firefox*/
         }
        }
        </style>
        </head>
        <body style="margin:60px 32px 32px 32px ">
                ${svgElement}
        <script>
        window.print();
        window.close();
        </script>
        </body>
        </html>`)
  })
}`

zayonoah Sep 19, 2022

@amd-99 Thank you for posting this. I was finally able to get a solid vectorized pdf working.

For reference, this is the code I ended up with. Not shown: I also had to set the pdf height and width to the react flow parent container to get it the same size needed for the pdf. After exporting is complete, I change the parent height and width back

async function exportDiagram() {
        try {
            // Needs these sleep to make sure flow is completely rendered
            await sleep(1000);
            // Remove animation from edges since animation wont be shown in pdf
            if (reactFlowInstance) {
                reactFlowInstance.setEdges((edges) =>
                    edges.map((edge) => {
                        if (edge) {
                            edge.animated = false;
                            edge.markerEnd = {
                                type: 'arrow',
                                width: 15,
                                height: 15
                            };
                        }

                        return edge;
                    })
                );
                reactFlowInstance.fitView();
            }
            // Again having issues without small sleep. Should be removable though.
            await sleep(1000);
            // Get the DOM element
            let elements = document.getElementsByClassName('react-flow-exporting')[0];
            // Convert to SVG
            const svgContent = await htmlToImage.toSvg(elements, { filter: filter });
            const svgElement =  await decodeURIComponent(svgContent.replace("data:image/svg+xml;charset=utf-8,", "").trim());
            // Open new window
            const newWindow = open();
            // Safer version of document.write
            document.write=function(s){
                var scripts = document.getElementsByTagName('script');
                var lastScript = scripts[scripts.length-1];
                lastScript.insertAdjacentHTML("beforebegin", s);
            }
            // Write our page content to the newly opened page
            newWindow.document.write(
                `<html>
                    <head>
                        <title>React Flow PDF</title>
                        <style>
                            body {
                                width: ${width};
                                height: ${height};
                                margin: auto
                            }
                            .container {
                                background: #393D43;
                                text-align: center;
                                height: 100%;
                                width: 100%;
                            }
                            
                            @page {
                                size: 29.7cm, 21cm
                                margin:0 !important;
                            }
                            @media print {
                                * {
                                    -webkit-print-color-adjust: exact !important;
                                    color-adjust: exact !important;
                                }
                                .container {
                                    background: none;
                                }
                            }
                        </style>
                    </head>
                    <body>
                        <div class='container'>
                            <div class='svg-container'>
                                ${svgElement}
                            </div>
                            
                            <script>
                                document.close();
                                window.print();
                            </script>
                        </div>
                    </body>
                </html>`
            )
        } catch (error) {
            console.log(error);
        }
    }````

nadiTime Dec 13, 2022

link to codesandbox? 🙏

moklick · 2022-09-20T20:03:13Z

moklick
Sep 20, 2022
Maintainer

I've created a "Download Image" example that uses html-to-image.

1 reply

rahatzamancse Feb 24, 2023

Nice work! I actually prefer to have the download button inside the <Control> tag instead. Here is your refactored working code for this:

<ReactFlow
    nodes={nodes}
    edges={edges}
    ref={flowRef}
>
    <Controls >
        <ControlButton onClick={() => {
            if(flowRef.current === null) return
            toPng(flowRef.current, {
                filter: node => !(
                    node?.classList?.contains('react-flow__minimap') ||
                    node?.classList?.contains('react-flow__controls')
                ),
            }).then(dataUrl => {
                const a = document.createElement('a');
                a.setAttribute('download', 'reactflow.png');
                a.setAttribute('href', dataUrl);
                a.click();
            });
        }}>
            <img src="assets/export.png" alt="Export" width="16px" height="16px" />
        </ControlButton>
    </Controls>
    <Background />
</ReactFlow>

yavor-grancharov · 2023-03-27T20:01:55Z

yavor-grancharov
Mar 27, 2023

@moklick Hi, I am currently trying to download whole flow as png or pdf but wasnt able to make it work in a way that everything is inside even nodes outside of viewport. I am using html-to-image to convert reactflow ref to canvas. My lastest try contains code below:

const downloadCurrentWorkflow = React.useCallback(() => {
    if (reactflowRef.current === null) return;
    reactFlowInstance?.fitView();
    toCanvas(reactflowRef.current, {
      filter: (node) =>
        !(
          node?.classList?.contains('react-flow__minimap') ||
          node?.classList?.contains('react-flow__controls')
        ),
    })
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 210;
        const pageHeight = 295;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;
        let pos = 0;
        const pdf = new jsPDF('p', 'mm');
        pdf.addImage(imgData, 'PNG', 0, pos, imgWidth, imgHeight);
        heightLeft -= pageHeight;
        while (heightLeft >= 0) {
          pos = heightLeft - imgHeight;
          pdf.addPage();
          pdf.addImage(imgData, 'PNG', 0, pos, imgWidth, imgHeight);
          heightLeft -= pageHeight;
        }
        pdf.save('reactflow.pdf');
      })
      .catch((err) => {
        console.warn('Downloading error: ', err);
      });
  }, [reactflowRef]);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onEdgeUpdate={onEdgeUpdate}
      onEdgeUpdateStart={onEdgeUpdateStart}
      onEdgeUpdateEnd={onEdgeUpdateEnd}
      onConnect={onConnect}
      onConnectStart={onConnectStart}
      onNodeDoubleClick={(_, node) => onClick(node, 'NODE')}
      onEdgeDoubleClick={(_, edge) => onClick(edge, 'EDGE')}
      onInit={(rfIs) => setReactFlowInstance(rfIs)}
      onDrop={onDrop}
      onDragOver={onDragOver}
      onNodesDelete={onNodesDeleteHandler}
      ref={reactflowRef}
    >
      <Background />
      <Controls>
        <ControlButton onClick={downloadCurrentWorkflow}>
          <Icon icon="download" />
        </ControlButton>
      </Controls>
    </ReactFlow>
  );

Is it possible to make this work? Thanks!

1 reply

moklick Mar 27, 2023
Maintainer

Hey @yavor-grancharov

you can overwrite the current transform to reset it. Here is an example https://codesandbox.io/s/image-fullscreen-936g03?file=/DownloadButton.js:356-425 . You can calculate the transform for the nodes with getRectOfNodes -> getTransformForBounds https://reactflow.dev/docs/api/graph-util-functions/#getrectofnodes

msholty-fd · 2023-10-05T14:49:40Z

msholty-fd
Oct 5, 2023

I didn't see anyone come out and fully lay out an example that works that also captures the entire viewport in case you have a big reactflow instance. Here's what worked for me:

import { useState, useEffect } from "react";
import { getRectOfNodes, getTransformForBounds, useReactFlow } from "reactflow";
import { toPng } from "html-to-image";

function DownloadFlow() {
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const { getNodes } = useReactFlow();

  useEffect(() => {
      const nodesBounds = getRectOfNodes(getNodes());
      const imageWidth = nodesBounds.width + 200;
      const imageHeight = nodesBounds.height + 200;
      const transform = getTransformForBounds(
        nodesBounds,
        imageWidth,
        imageHeight,
        0.5,
        2,
      );

      toPng(document.querySelector(".react-flow__viewport") as HTMLElement, {
        backgroundColor: Colors.neutral200,
        width: imageWidth,
        height: imageHeight,
        style: {
          width: String(imageWidth),
          height: String(imageHeight),
          transform: `translate(${transform[0]}px, ${transform[1]}px) scale(${transform[2]})`,
        },
      }).then((dataUrl) => {
        setPreviewImage(dataUrl);
      });
  }, [getNodes]);

  function handleActualDownload() {
    if (previewImage) {
      downloadImage(previewImage, name);
      emitEventOnDownload();
      onClosed();
    }
  }

  return <button onClick={handleActualDownload}>Download</button>;
}

function downloadImage(dataUrl: string, name?: string) {
  const now = new Date();
  const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(
    2,
    "0",
  )}-${String(now.getDate()).padStart(2, "0")}`;

  const timeStr = `${String(now.getHours()).padStart(2, "0")}${String(
    now.getMinutes(),
  ).padStart(2, "0")}${String(now.getSeconds()).padStart(2, "0")}`;

  const fileNamePrefix = name ? `${name}_` : "reactflow_";
  const fileName = `${fileNamePrefix}${dateStr}_${timeStr}.png`;

  const a = document.createElement("a");
  a.setAttribute("download", fileName);
  a.setAttribute("href", dataUrl);
  a.click();
}

1 reply

useyourillusions Aug 28, 2025

That's was incredibly helpful, thank you!

cini9 · 2023-11-21T14:29:21Z

cini9
Nov 21, 2023

Hey guys, I came across this discussion when trying to debug my download functionality as well. As a quick heads up, it appears that using the nodeOrigin prop on the ReactFlow component causes the downloaded image to be offset and for a portion of the left side and the top of the image to be cropped.

My ReactFlow component :

<ReactFlow
  nodes={nodes}
  edges={edges}
  ...
  nodeOrigin={[0.5, 0.5]}
  ...
  >
  <Background />
  
  <Controls />
</ReactFlow>

And my download functionality :

const screenshot = () => {
  const nodesBounds = getNodesBounds(getNodes())
  const imageWidth = 1024
  const imageHeight = 768
  
  const transform = getViewportForBounds(
    nodesBounds,
    imageWidth,
    imageHeight,
    0,
    2
  )
  
  toPng(document.querySelector('.react-flow__viewport') as HTMLElement, {
    filter: node =>
      !(
        node?.classList?.contains('react-flow__minimap') ||
        node?.classList?.contains('react-flow__controls')
      ),
    backgroundColor: '#fff',
    width: imageWidth,
    height: imageHeight,
    style: {
      transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,
    },
  }).then(dataUrl => {
    const a = document.createElement('a')
    
    a.setAttribute('download', 'reactflow.png')
    a.setAttribute('href', dataUrl)
    a.click()
  })
}

Gives this cropped image :

If i comment out nodeOrigin :

It feels like getNodesBounds or getViewportForBounds (or both?) doesn't take the nodeOrigin into account. Can anybody confirm this ? Should this require a fix ? Or does anybody have an idea for a workaround ?

Much appreciated !

0 replies

nsarwar123 · 2024-08-15T14:59:33Z

nsarwar123
Aug 15, 2024

How can we take image of a group Node only instead of full flow?

As in download-image example its using .react-flow__viewport class to take an image of all nodes in the flow.
In may case I have multiple group nodes i.e pages(A4) and in every node, there are some child nodes. How can I make an image of any single group node including its child nodes (like, getting an image of any page from multiple pages).

0 replies

knackstedt · 2025-11-09T18:31:39Z

knackstedt
Nov 9, 2025

I solved this using dom-to-svg instead of html-to-image because I was having a lot of issues with html-to-image not rendering edges and the output SVG had a ton of unnecessary attributes that made the output file ~20MB where the PNG variant was ~400K.

Sample:
https://github.com/knackstedt/surrealist/blob/0a9bc5589353d3172e497f729a9bda87ac3eb573/src/screens/surrealist/views/designer/TableGraphPane/helpers.tsx#L361

0 replies

Uh oh!

How to Save React Flow Diagram as an Image? #1061

Uh oh!

Replies: 7 comments · 12 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Solution for Export react-flow-renderer flow as PDF

Uh oh!

Uh oh!

Uh oh!

Uh oh!

moklick Sep 20, 2022 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

moklick Mar 27, 2023 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 7 comments 12 replies

moklick
Sep 20, 2022
Maintainer

moklick Mar 27, 2023
Maintainer