# Standalone Flow Viewer Plugin

**URL:** <https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388>\
**Category:** General\
**Created:** [24 June 2023 10:58 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388 "2023-06-24T10:58:50Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [26 June 2023 21:23 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/21 "2023-06-26T21:23:39Z")

</div>

Well there you go. Every day is a school day 😂

---

<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:** [27 June 2023 06:31 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/22 "2023-06-27T06:31:49Z")

</div>

> [@Steve-Mcl](#):
>
> @gregorius nice progress btw.

Cheers! It's fun experiment around and seeing where this will lead... (I was thinking about a visual diff using AR/VR glasses!)

> [@Steve-Mcl](#):
>
> I haven't had a chance to look at your code but it appears you are NOT simply "stealing" code from node-red but rather writing this pretty much from scratch?

Yep I just wanted to get something up and running, so I naïvely thought this would be simple ... and it was until the details popped up their dirty little heads.

> [@Steve-Mcl](#):
>
> I can see the fun side of doing that but wondered why? much of the layout and oddities (like a nodes coordinates are the center, how/when the text wraps etc) is there for the taking 🤷‍♂️

True but it's also very difficult to go through 5k+ lines of JS code ... but I did find how to do the labels for groups ... on line [5555](https://github.com/node-red/node-red/blob/7e9042e9f713eec981adeb8ff6af226a40efb5af/packages/node_modules/%40node-red/editor-client/src/js/ui/view.js#L5555)! I mean you are perfectly correct but the Node-RED codebase also has interaction code (i.e. for mouse clicks and mouses overs etc) and layers in the SVG that I don't need and it uses d3 which I don't want to include. I am currently using jQuery but I really want to have a JS standalone plugin for easy embedding of Node-RED flows, so I would want to remove the dependency on jQuery.

And honestly, I did approach this with a naïve idea that it would easy 🙂 turns out there are many edge cases that I can either try to read out of the Node-RED code or experiment and find myself - where is the most learnings to be made? 🙂 Edge cases are the hardest to discover and the hardest to read out of code - my personal experience!

---

<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:** [27 June 2023 06:43 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/23 "2023-06-27T06:43:50Z")

</div>

Just for those who come after me, how to check the (x,y) coordinates and what they mean?

Use Export!

Move the object to the top-left and export the flow. Check the (x,y) values. Notice for the group, x,y are top-left corner (5,5) while for the node they are (115,20) - midpoint. For link-in/link-outs they are midpoints for junctions they are top-left because the rect of the junction is translated by (-5,5).

BTW groups don't always have `w` and `h` (see screenshot under the x,y values) values - I've seen some groups that only have `w` or neither. Hence I had to compute the width and height of a group rectangle using bounding boxes.

Group:

 ![Screen Shot 2023-06-27 at 08.35.34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/dafdc548091b6ac92d646aaf71c0ba8d38c6d129.png)  
Node:  
 ![Screen Shot 2023-06-27 at 08.36.04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b7fdc1b43450caaf18fdcd53b3b9491bae29031.png)

The question at the end of the post: does this change in anyway when using v2 of the flows.json? Or better asked: where does v2 get used? I only notice that there was v2 when I was using the [api to export flows](https://nodered.org/docs/api/admin/methods/get/flows/).

---

<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:** [27 June 2023 15:45 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/24 "2023-06-27T15:45:33Z")

</div>

So here is the [version 5](https://blog.openmindmap.org/blog/embedded-flow-v5.html) which now has labels for groups and multi-line labels at that! Also for nodes mutli-line now works. I actually did copy [that code](https://demo.openmindmap.org/omm/#flow/3b1289d7ccf9cb0f/n/9e162fd1182a5aad/edit) from the Node-RED source. The core [plugin code](https://demo.openmindmap.org/omm/#flow/3b1289d7ccf9cb0f/n/cf3f2b8258e09542/edit) is also there.

This still does have the decoration of the input and output connectors nor the correct number of outputs. But that's not rocket science. I'll now build a small demo of inlining the result if a code-block with plugin name is detected, i.e., the use-case I was trying to scratch with my itch.

---

<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:** [27 June 2023 17:21 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/25 "2023-06-27T17:21:55Z")

</div>

This is looking really good. Great progress.

Thinking ahead a bit - do you see this being packaged into a NPM module that users can import (in a function node) or run via CLI to generate SVGs from flows?

---

<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:** [27 June 2023 17:45 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/26 "2023-06-27T17:45:16Z")

</div>

> [@Steve-Mcl](#):
>
> Thinking ahead a bit - do you see this being packaged into a NPM module that users can import (in a function node) or run via CLI to generate SVGs from flows?

If someone wishes to do that, why not! I generate my SVGs using Node-RED - dogfooding by using (shameless plug) my own [screenshot node](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection) ... hm questionable whether I need that now 😉

My actual use-case I had in mind is demonstrated by [this page](https://blog.openmindmap.org/blog/codeblock-test) - the embedding of `flows.json` as code blocks that get replaced by SVG images if a language (in this case `noderedjson`) is added to the codeblock.

That still uses jQuery because I can't kick the habit, but in the long term I would like to have a version that uses pure Javascript so that any code hoster can add that to their plugin collection, e.g., [GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams).

---

<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:** [27 June 2023 17:49 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/27 "2023-06-27T17:49:02Z")

</div>

> [@Steve-Mcl](#):
>
> This is looking really good. Great progress.

Forgot to say, that without Node-RED, I won't have been that progressive, i.e., it's really cool how easy it is to play around this with stuff using Node-RED! My flows are starting to flow over my head 😃

Cheers for Node-RED 👍

---

<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:** [27 June 2023 17:55 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/28 "2023-06-27T17:55:26Z")

</div>

> [@gregorius](#):
>
> My actual use-case I had in mind is demonstrated by [this page](https://blog.openmindmap.org/blog/codeblock-test) - the embedding of `flows.json` as code blocks that get replaced by SVG images if a language (in this case `noderedjson`) is added to the codeblock.

That really does make your work an ideal candidate for an importable NPM module (esm for web based use - like you did, cjs for those wanting to embed it into a node-red flow/function-node/contrib-node or even automate it via cli)

👀

---

<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:** [28 June 2023 11:10 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/29 "2023-06-28T11:10:02Z")

</div>

I've made some updates of the [demo page](https://blog.openmindmap.org/blog/codeblock-test) to provide some more context and explanation for those not familiar with backticks in markdown.

I also gave a motivational overview, i.e. why I did this and an explanation how to include this in your own page. I also - the best big - moved the flows into view, i.e. made the svg viewBox fit to the bounding box of the content. So no more scrolling looking for flows!

I leave it here for the moment and get on doing something else 🙂

> [@gregorius](#):
>
> I was thinking about the colours for nodes thingy, the [flows.nodered.org](http://flows.nodered.org) ([e.g.](https://flows.nodered.org/node/node-red-contrib-samsung-automation-studio-nodes)) site has colours and images, is there an api that could be used to retrieve those details? The [catalogue endpoint](https://github.com/node-red/catalogue.nodered.org) only has type names but no other details. If I could obtain the details, then I could dynamically generate a CSS file and include it in the page.

Also I think doing something here, for example generating a css with colours or urls to images or/and a js with node type-colour mappings along with the catalogue would make the plugin much more useful than [harding coding those details](https://demo.openmindmap.org/omm/#flow/3b1289d7ccf9cb0f/n/20308184aaf2dda3/edit) into the javascript that I've created.

---

<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:** [29 June 2023 14:25 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/30 "2023-06-29T14:25:34Z")

</div>

Just working on the inputs/output decorations and discovered something interesting about inputs:

```auto
[
    {
        "id": "0d76380a09bee3c5",
        "type": "comment",
        "z": "3b1289d7ccf9cb0f",
        "name": "",
        "info": "",
        "x": 389,
        "y": 657,
        "wires": []
    },
    {
        "id": "51cb3ec7d26ad00e",
        "type": "http response",
        "z": "3b1289d7ccf9cb0f",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 397,
        "y": 705,
        "wires": []
    }
]

```

That is a comment and a http response node in json representation. The comment node has zero inputs, the http response node has 1 input. From the flows.json representation there is no indication of that. There seems to be some magic going on. Is there a list of nodes that have "implicit" inputs? I assumed that if `inputs` attribute is zero or non existent, then there is no input but sometimes there.

Outputs are easy: wires.length \> 0 will indicate whether a node has outputs and how many it has.

---

<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:** [29 June 2023 14:34 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/31 "2023-06-29T14:34:54Z")

</div>

> [@gregorius](#):
>
> There seems to be some magic going on. Is there a list of nodes that have "implicit" inputs?

There is no magic 🪄

This is one of those things (like the `icon` and whether it has a `button`) that are defined by the nodes code, and is not reflected the flow JSON.

See here: [HTML File : Node-RED](https://nodered.org/docs/creating-nodes/node-html#defining-a-node) - there is a property named `inputs`

---

<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:** [29 June 2023 14:38 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/32 "2023-06-29T14:38:33Z")

</div>

For the sake of simplicity at this point, I would hard code what you know about the core nodes (e.g. that a comment has zero inputs, an inject has a button etc) and everything else has 1 input & no button.

When I get time, I am going to look at the data populated in the catalogue and see if we can update its routines to grab some of this meta info and store it in the catalogue entry (for this kind of use).

---

<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:** [29 June 2023 14:48 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/33 "2023-06-29T14:48:59Z")

</div>

> [@Steve-Mcl](#):
>
> There is no magic 🪄

Yep upon reflection I realised that it would be the case that the editor knows from the package details.

What I'm going to do is check _all_ the wires from _all_ nodes beforehand, creating a list of nodes that receive input. After that it will zero input nodes get nothing and those with inputs have decoration. So it will be based on the definition of the individual flow defines the decoration.

After all, nodes that have inputs but don't receive input within the flow are "orphans" to a certain extent.

---

<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:** [29 June 2023 15:06 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/34 "2023-06-29T15:06:02Z")

</div>

Request for Comment: Triangle v. Rectangle!

I have updated the example page [Replacing Node-RED flow codeblocks with flow images. | Open Mind Map Blog](https://blog.openmindmap.org/blog/backticks-in-markdown-and-node-red) with the input/output decorators. But I've done something slightly differently ....

I've used triangles instead of rectangles for the decoration. The reason I did this was because when one looks at a "static" flow image and one isn't interact with it, one does not know in which direction the data flows. Especially for people who have zero experience with Node-RED (as with my better half who made me realise this), the image has zero indication for the direction of flow.

Sure if one has used Node-RED then: left is input, right is output - you realise this because you connect things. But for those who have no experience, they don't have this learning.

So I thought I'd use triangles to indicate data flow direction. The triangle is about the same size and same colour as the rectangle, only it indicates the direction of data flow.

Thoughts || Suggestions?

 ![Screen Shot 2023-06-29 at 17.06.15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a03d067441ad9d11f0e659c134b0cf739a8f49c.png)

versus:

![Screen Shot 2023-06-29 at 17.06.51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fbf2fb04fc0c6b08942a13de5e78f0e30c518059.png)

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [29 June 2023 18:47 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/35 "2023-06-29T18:47:10Z")

</div>

> [@gregorius](#):
>
> Thoughts || Suggestions?

Proposal: Let the output(s) stay rectangles; make the input a triangle. This should give a visual indication where data is entering a node ... and keeps the (sometimes) busy output interface as clean as in Node-RED.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 June 2023 19:06 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/36 "2023-06-29T19:06:28Z")

</div>

> [@gregorius](#):
>
> Thoughts

I think it shouldn't have any graphical diffences. Otherwise the name Flow Viewer is not valid anymore.

---

<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:** [29 June 2023 19:49 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/37 "2023-06-29T19:49:28Z")

</div>

Ideally yes the visuals should be the same but there are differences between a static image and an interactive editor.

For example the linked in/out have no Label in the editor but with a mouse over one see the label. What to do in the case of an image?

Either it ends with an interactive image or difference between the two. I would prefer to keep the image static but understandable.

---

<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:** [29 June 2023 19:53 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/38 "2023-06-29T19:53:10Z")

</div>

I'll try that out, it might be confusing but we'll see!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 June 2023 19:55 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/39 "2023-06-29T19:55:05Z")

</div>

Nothing wrong if choosen solution has some limits but still, it shouldn't add anything what actually doesn't exist. It is just misleading.

---

<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:** [29 June 2023 20:24 UTC](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388/40 "2023-06-29T20:24:37Z")

</div>

Misleading is perhaps too much since the triangles only show the flow of data. It's a clarification of a feature. It might be confusing but so is having just rectangles.

Perhaps the best option would be to make the image interactive (limited to zoom and highlighting perhaps) but that opens the mobile v. Desktop can of worms.

[Previous page](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388.md?page=1)

[Next page](https://discourse.nodered.org/t/standalone-flow-viewer-plugin/79388.md?page=3)