Node-RED Flow X-Ray – a small tool for inspecting large flows

Over time my Node-RED project has grown quite a bit, and I often found myself spending more time than I wanted answering simple questions such as:

  • Where is this flow variable read or written?

  • Where is this topic/string used?

  • Which Functions use a particular value?

  • Does this Function have unused or unconnected outputs?

  • Which are the largest Functions in the project?

  • What's actually inside this subflow?

So I built Node-RED Flow X-Ray, a small read-only tool for inspecting exported Node-RED flows.

You simply open the HTML file in a browser and load your flows.json.

It can currently:

  • search across all Function nodes and jump directly to the matching Function and line

  • trace flow.get() and flow.set() usage

  • inspect tabs and subflows

  • analyse Change nodes when they access flow context

  • show a compact project overview

  • identify unconnected Function outputs

  • show the largest Functions

  • perform a small Function Check for output usage, out-of-range outputs and repeated output assignments

Everything runs locally in the browser. The flow file is not uploaded anywhere, there is no server involved, and Flow X-Ray never modifies the Node-RED project.

I deliberately kept it simple: it is meant to help investigate a project, not to automatically rewrite or “improve” anyone's flows.

More information and screenshots:

Feedback is very welcome, particularly from people with reasonably large Node-RED projects — those are the ones that inspired it in the first place.

The only issue I see is that if I find any issues in your tool, I have to go back to NR to fix it. E.g. I find the largest function using your tool, then have to switch back to NR and find the function over there to make it smaller (for example).

It would be nicer if the whole thing would be integrated in NR instead of being a separate tool.

I agree. I think this is probably the main limitation of the current standalone approach.

The choice was deliberate for this first version: no installation, no changes to Node-RED, and the ability to analyse any exported project locally and read-only.

There is also a little bit of history behind that choice.

On 16 July I published Find+, a Node-RED editor plugin that provided a much more extensive search capability directly inside the editor.

https://discourse.nodered.org/t/find-advanced-search-sidebar-for-the-node-red-editor/101479

It was specifically created to address what I still consider to be an objective limitation of the current built-in search, particularly when working with large projects and trying to locate exact values, strings or code patterns.

So in that case I did take the integrated approach.

The project received a few likes, but no technical feedback or evaluation — including from the maintainer — despite addressing a limitation of the editor itself.

For Flow X-Ray I therefore deliberately chose a different technical approach: keep it completely independent from Node-RED and make it usable simply by opening an HTML file and loading an exported project.

That obviously comes with exactly the drawback you pointed out: once X-Ray finds something interesting, you still have to switch back to the Node-RED editor and locate the node there.

An integrated editor/sidebar version would definitely provide a better workflow, and technically it is certainly possible — Find+ already demonstrated that approach.

If Flow X-Ray proves useful to people, editor integration could therefore be one of the most interesting directions for a future version.

There are "deep links" into the editor that you can use, see the on the info box:

you could generate those inside X-Ray so that linking into NR is simpler.

Those links are then:

https://localhost:1880/#flow/69a5f7c609d8103a --> basically #thing/id --> NR editor code

You can also append an /edit to that so that the editor panel is opened automagically.

I think what you're doing is a good thing and even if it's only you that uses it, so what, it helps you :slight_smile:

That's a very good point — I wasn't aware of those deep links.

This could actually solve most of the drawback you mentioned without turning X-Ray into an editor plugin.

Since the exported JSON already contains the flow/node IDs, X-Ray could generate an “Open in Node-RED” link for the selected result, with the Node-RED editor address configurable by the user.

I’ll definitely look into this. Thanks.

A simple Editor plugin would be enough to wrap the page into a sidebar. Just be wary of the limited space in sidebars. There is usable code in my uib-sidebar node in UIBUILDER if you want any.

Thanks, that's very useful.

I had assumed that integrating X-Ray into the editor would require a more substantial rewrite, so knowing that a lightweight plugin could simply host the UI in a sidebar changes the picture somewhat.

The limited sidebar space is indeed the main concern, since X-Ray currently relies on a fairly wide layout and would probably need a more compact sidebar-specific UI rather than simply being squeezed into it.

I'll definitely have a look at the uib-sidebar implementation. Even if I don't reuse it directly, it sounds like a very useful reference.

Thanks for the offer.