# Sharing flows on the forum just get prettier

**URL:** https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957
**Category:** News
**Created:** [4 July 2025 09:02 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957 "2025-07-04T09:02:54Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [4 July 2025 09:02 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/1 "2025-07-04T09:02:54Z")

</div>

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.

````auto
```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":[]}]
```

````

```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":[]}]

```

This is built using the [FlowFuse Flow Renderer](https://github.com/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.

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 July 2025 09:05 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/2 "2025-07-04T09:05:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hardillb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hardillb/32/12373_2.png) [@hardillb](https://discourse.nodered.org/u/hardillb)
#### Post date: [4 July 2025 09:06 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/3 "2025-07-04T09:06:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [4 July 2025 09:06 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/4 "2025-07-04T09:06:29Z")

</div>

Working well on Chrome/Mac and Chrome/Android fwiw

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 July 2025 09:08 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/5 "2025-07-04T09:08:46Z")

</div>

Working now after restarting 👍

---

<div class="post-metadata">

### Author: ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)
#### Post date: [4 July 2025 09:17 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/6 "2025-07-04T09:17:10Z")

</div>

> [@knolleary](#):
>
> If you hit any problems, do let me know.

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

> [@knolleary](#):
>
> FlowFuse Flow Renderer

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).

> [@knolleary](#):
>
> was based on the work

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

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [4 July 2025 09:38 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/7 "2025-07-04T09:38:57Z")

</div>

> [@gregorius](#):
>
> But no dragging?

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.

> [@gregorius](#):
>
> 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).

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

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [4 July 2025 09:41 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/8 "2025-07-04T09:41:58Z")

</div>

> [@knolleary](#):
>
> it is now possible to get a visual render of the flows to be automatically generated.

Great stuff!

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [4 July 2025 09:46 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/9 "2025-07-04T09:46:23Z")

</div>

(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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b90cab93bcc0e1203b65df785199edafcdfc37b7.png)

Sorry, what am I missing?

(Thanks)

---

<div class="post-metadata">

### Author: ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)
#### Post date: [4 July 2025 09:48 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/10 "2025-07-04T09:48:08Z")

</div>

> [@knolleary](#):
>
> we may have forked it before you added that with yours.

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

```auto
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!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [4 July 2025 09:50 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/11 "2025-07-04T09:50:27Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [4 July 2025 09:50 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/12 "2025-07-04T09:50:59Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06f56d6e4b4743e90e9b5863189e6e62c50e6503.png)

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.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [4 July 2025 09:52 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/13 "2025-07-04T09:52:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [4 July 2025 09:53 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/14 "2025-07-04T09:53:41Z")

</div>

Strange I didn't see that the first time.

But thanks.

Understand now.  
Sorry folks. 🙂

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 July 2025 09:55 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/15 "2025-07-04T09:55:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [4 July 2025 09:57 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/16 "2025-07-04T09:57:56Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [4 July 2025 10:10 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/17 "2025-07-04T10:10:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 July 2025 10:32 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/18 "2025-07-04T10:32:45Z")

</div>

Great addition to the forum! Thanks for this.

* * *

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

> [@Idea: Add a node.js LTS check to Node-RED?](https://discourse.nodered.org/t/idea-add-a-node-js-lts-check-to-node-red/96980/2):
>
> Well yes - I wouldn't want something like a popup nagging me every time I start the editor - and I bet a lot of people don't look at the logs often if at all unless there is a problem. so wouldn't see a simple log message - and if they did would they then "panic", upgrade and possibly break their working system ? Also I run quite a few systems not connected to the internet so the test would fail. I guess it's good to know but what do we actually want to do with the information...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/ceebf5117e6f952629d9b12110f62817c0149d4a.png)

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

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [4 July 2025 12:14 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/19 "2025-07-04T12:14:38Z")

</div>

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](https://github.com/FlowFuse/flow-renderer/issues/45)

---

<div class="post-metadata">

### Author: ![AllanOricil](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allanoricil/32/106911_2.png) [@AllanOricil](https://discourse.nodered.org/u/AllanOricil)
#### Post date: [4 July 2025 16:43 UTC](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957/20 "2025-07-04T16:43:55Z")

</div>

Really nice

[Next page](https://discourse.nodered.org/t/sharing-flows-on-the-forum-just-get-prettier/97957.md?page=2)
