Sharing flows on the forum just get prettier

News
1

When sharing flows on the forum, it is now possible to get a visual render of the flows to be automatically generated.

By adding the flows type to the code block, it will now get rendered as a flow, making it easier to see at a glance what the flow looks like.

```flows
[{"id":"45b09c2541029b05","type":"inject","z":"9f9e32404549681c","name":"test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":180,"y":80,"wires":[["c983a304e0ac7655"]]},{"id":"c983a304e0ac7655","type":"debug","z":"9f9e32404549681c","name":"debug 7","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":80,"wires":[]}]
```

[{"id":"45b09c2541029b05","type":"inject","z":"9f9e32404549681c","name":"test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":180,"y":80,"wires":[["c983a304e0ac7655"]]},{"id":"c983a304e0ac7655","type":"debug","z":"9f9e32404549681c","name":"debug 7","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":80,"wires":[]}]

This is built using the FlowFuse Flow Renderer, which itself was based on the work @gregorius did originally that he kindly allowed us to reuse.

If you hit any problems, do let me know.

24 Likes
2

I don't see any difference? (On android, firefox)

3

It renders correctly in Chrome on Android for me (and Firefox on Linux)

1 Like
4

Working well on Chrome/Mac and Chrome/Android fwiw

1 Like
5

Working now after restarting :+1:

2 Likes
6

But no dragging? On my Mac Opera. Am I missing something?

Does that update the icons automagically from the node catalogue database? I remember having this discussion about an auto updating node details (i.e. colour and icon).

Which was based on the work of you - since I did take the wire bezier curve code from Node-RED!

7

Do you mean drag scrolling of the view? Agreed it doesn't appear to happen. Will raise an issue on our flow viewer; we may have forked it before you added that with yours.

No. It has a long list of common node types hardcoded in, but anything it doesn't recognise will get a default appearance.

1 Like
8

Great stuff!

9

(Village idiot here)

Ok, so there are two flows posted in the first post.
One visually different as it has flows written inside the qualifiers.

Either if copied, and I try to import:

Screenshot from 2025-07-04 19-44-23
Screenshot from 2025-07-04 19-44-231920Ă—1080 179 KB

Sorry, what am I missing?

(Thanks)

10

IIRC I do this outside of the library, using d3:

d3.zoom()
           .scaleExtent([0.3, 100])
           .on("start", function () {
              svg.classed("dragging", true);
            })
            .on("zoom", function(event) {
              inner.attr("transform", event.transform);
            })
            .on("end", function () {
                svg.classed("dragging", false);
            })

I don't know why anymore but that's the way it is!

11

d3 was completely removed IIRC. The scrolling and zooming is completely based on browser handling. i.e. shift+scroll for horizontal, ctrl+scroll to zoom etc.

12

If the flow renderer is working @Trying_to_learn , this is what you should see in the first post:

image
image1514Ă—1192 52.3 KB

The example is there to show how you would insert the flows into a forum post - with the ```flows bit around it. If you copy that code block, you'll get the ``` bit copied as well - so not the valid flow json - but this wasn't intended as a flow for you to copy - it was an example of how to write flows in the forum to get the renderer to work.

1 Like
13

Andrew, hard refresh this page and go to the first post :wink:

1 Like
14

Strange I didn't see that the first time.

But thanks.

Understand now.
Sorry folks. :slight_smile:

15

It is a shame you have to delete the ```flows and ``` lines before it will import.

16

@jbudd you are misunderstanding the situation.

The only reason you can see the ```flows bit (and that it is included in the copy) is because I have purposefully formatted that example to show the ```flows bit to demonstrate what you have to type in to trigger the flow renderer.

When used 'properly' you will see the rendered flows with the 'copy' and 'download' buttons in the bottom right corner which will give you the flow json.

3 Likes
17

I think a Show Source button would be useful if that is not difficult. Quite often I find myself looking at the source of a flow, particularly when using my phone, to see what is in it. If it were 'pretty printed' then even better. If it is difficult then don't worry, as it is now is good.

[Edit] Actually I realise that, for me, this is not an issue. I get email notifications of posts and in the email, of course, the code is shown, so I can look there if I need to.

3 Likes
18

Great addition to the forum! Thanks for this.

Going back through some of my posts. This one is slightly strange:

image
image961Ă—546 11.6 KB

The view scrolls to the wrong place and the flow is somewhere about 1/2 way down.

19

Renders in chrome android in mobile view but not desktop.
Fine in both views on brave.
[edit] when switching back to desktop it started showing

@knolleary Is there any way to view the JSON in the forum display if someone adds flows? As sometimes i just read the direct JSON to see issues. I see Colin has raised this to, I do not get emails unless I am watching a topic, so would love to see the source easily.

I can hit edit icon but the view is then restricted and word wrapped, which makes it difficult.

I would maybe like to see this feature configurable in the forum users settings.
Feature request added Allow viewing of source flow JSON in forum · Issue #45 · FlowFuse/flow-renderer · GitHub

20

Really nice