FlowHub.org - Gists for Node-RED

Hi There!

I've started a little project to itch a scratch that might also be useful for others. Ever since I've been using Node-RED, I've also wanted to share flows, either between projects or just to show others how Node-RED works. The solution has always been to send a long json string and ask people to import that string. (Between projects this is simply a matter of switching browser tabs & import/export.)

What I was missing was a preview and easy of use to share flows (i.e. flow tabs is meant in this context).

This began with the flowviewer to render flows in the browser without having Node-RED, then I wanted to compare different versions of flows but visually, this became the comparing tool. FlowHub is a combination of all that plus two extra nodes for pushing and pulling flows to/from FlowHub to/from Node-RED.

An example of what I have in mind is the web router flow explanation. The web router simply routes various http requests to the various handlers but no one understands what is going on by simply looking at the flow. What I wanted was to document the flow and allow others to use and improve it. It's just my way of doing request routing and I'm sure there are others.

So what's so new about the explanation? The flow is shown visually and can be zoomed/panned. Links in the text highlight parts of the flow and a mermaid flowchart tries to visually present the logic behind the router. Finally the various versions of the flow can be visually compared - not that much changed on that particular flow. (Also it's possible to view a particular version of a flow and then download that version.)

All the documentation (i.e. the explanation) is stored in the flow (the flow-tabs info box contains the documentation). So the flow is self-contained. My long term vision is to have an collaborative approach to development of flows that are generally useful and entertaining.

Of course, I might have created an NPM package with subflows but that is for me to static and not really simple. Also it means that I would have had to create all the npm collateral files (license, readme, package.json ....) for something that probably wasn't complete anyway. Plus I can't do that inside Node-RED - my aim is to extend Node-RED using Node-RED!

I know mermaid is coming to Node-RED 3.1.x, but I would - ironically - like to have documentation on flows that works outside of Node-RED. I.e. that works on mobiles and for newbies that might not have Node-RED installed. Besides the documentation for flows works inside Node-RED and at FlowHub - all mermaid diagrams are using "```mermaid" blocks.

Of course all this is a prototype and not designed for permanency rather as a test and tryout (i.e. things will break). It uses a public github repo for flow storage and a Node-RED instance as web server.



Just a short update, I've improved the UI to be more mobile friendly and added some more content. There is a complete list of flows is available as RSS feed. I've been adding flows that I have found interesting but also some learnings I've made:

But also stuff that surprised me:

All-in-all, Node-RED is a really nice tool for all sorts of things.

1 Like