reaviz / reaflow

🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://reaflow.dev
Apache License 2.0
2.11k stars 122 forks source link

Need ability to easily export diagram as an image #234

Open anniexcheng opened 1 year ago

anniexcheng commented 1 year ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[] Bug report 
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

We use reaflow in our codebase and want the ability to easily export a diagram/visualization to various image formats (e.g. jpg, png, svg). To my knowledge, there's no current built-in support for this in reaflow.

I've tried using html2canvas, html-to-image, and dom-to-image to export an image from the containerRef in a CanvasRef but they all resulted in empty images or errors.

I've also tried exporting the SVG directly using the svgRef but run into an xlink error:

image

Expected behavior

It would be amazing if there were helper functions that we can call for exporting the diagram in the basic image formats: jpg, png, and svg.

What is the motivation / use case for changing the behavior?

Our users want the ability to export the reaflow diagram/visualization for easy sharing with others. I wasn't able to get the image export behavior working with common frontend libraries and suspect that it might be a much easier fix within reaflow than finding workarounds.

Environment


Libs:
- react version: 18.1.0
- realayers version: X.Y.Z

Browser:
- [x] Chrome (desktop) version 117.0.5938.149
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX