download converted flow visualizations

[elsdvlee]

I would like to be able to download the converted flow visualizations as png, svg or animated gif so it can be easily integrated in presentations and deliverables. It would also be nice to have the option to adapt the image size when downloading.
Similar to the actions in https://mermaid.live/.

[TiboStr]

For future reference

Capturing a part of a screen is relatively new (https://w3c.github.io/mediacapture-region/).

The demo (https://github.com/w3c/mediacapture-region/tree/main/demo) does not work yet for me.

---

There is an easy-to-use React hook to capture your screen (https://github.com/tylerbuchea/use-screen-recording), but you can only capture your entire screen. I don't see how this is more useful than third-party solutions that let you capture a part of your screen, such as peek, which I am using.

[TiboStr]

@elsdvlee, could you take a look at https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording and https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording2.

Do you want me to implement the screenshot and/or capture feature? Personally, I think this is not more useful than using third-party software to capture your screen as webm/gif or use the key combination provided by your OS to take a screenshot.

But if you still want these features, I'll do my best to implement them.

[TiboStr]

There are libraries that let you screenshot a React component, but that does nor work in combination with ReactFlow. Something like this is the result:

So I think the only way to do it is by doing it like https://knowledgeonwebscale.github.io/dataflow-visualization/#/recording2.

[elsdvlee]

@TiboStr Indeed, this is not more useful than using third-party software to capture your screen as webm/gif or use the key combination provided by your OS to take a screenshot. I was hoping for a Mermaid-like solution (https://mermaid.live/) where you can set a higher resolution for more complicated images. Maybe not close this issue yet, but focus first on other issues.