Noisecraft - anyone heard of it?

I would disagree that VP didn't take off. It most certainly did. And in many forms. Blockly, for example is used in many (most?) schools to teach computer logic and programming before moving on to written languages (usually Python). And visual tools are used in hundreds of different products and have been available for decades. Blockly, LabView, Microsoft PowerPlatform (itself several generations down a visual programming path), .... - the list goes on and on.

Currently, I would suggest that AI is perceived as an easy way out of having to think about logic at all! Ask a question, get your answer. No need to map out the logic.

Of course, this is a total fallacy. Since the only logic that LLM tools supply is the logic someone else has already laid out. It is a dead-end. But everyone is excited because they think it is a quick and easy way out of having to actually think for themselves. LLM's are also a somewhat dangerous dead-end in that the cost to both train and run them is enormous and likely to be highly unsustainable. Make use of free ones while you can. (Though maybe someone will invent more efficient runtime models, that's the potential of innovation of course).

Not to say that LLM and ML doesn't have a place - and an important one too. But, as usual, it won't be what most people think.

And, on that we certainly both agree.

There are certainly libraries that do this. Let me check my list. :slight_smile: I believe that there are a number of layout theories - math approaches - that can be used as well though that is way above my head.

OK, apologies for the length of the following. Not all of it will be relavent - it comes from my Obsidian knowledgebase and lists many of the graph-based libraries and tools that I'm aware of. Certainly some of these have auto-layout capabilities. Even the venerable graphviz has several auto-layout options.


Name Descr $ Comments
baklavajs Graph/node editor for VueJs 0 Interesting Unreal engine style flow-based display and processing.
beautiful-react-diagrams React components and hooks to build diagrams
butterfly Renderer for interactive diagrams and flowcharts
cytoscape.js Canvas based renderer with utilities and algorithms blog
diagram-maker Interactive editor for any graph-like data 0 Online editor
Flowy Flowchart library 0 Flowcharts only
flow-builder React-based renderer for workflows and process diagrams
Flume A React-powered node editor and runtime engine 0 Unreal engine style flow-based display and processing.
GoJS Diagramming library with a focus on customization and interactivity $$$ Go library
jointjs JavaScript diagramming library $$$
jsplumb Open source project written in Typescript that gives you the tools you need to visually connect DOM elements 0 (Limited), $$$ Free version is too limiting
kedro-viz Visualises Kedro data and machine-learning pipelines Specialist
litegraph.js A graph node engine and editor 0 Unreal engine style flow-based display and processing.
mermaid JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. 0 Widely embedded in other tools.
ngx-graph Graph visualization library for Angular Angular only
nice-dag Lightweight javascript library, which is used to present a DAG diagram
nodl Framework for computational node graphs 0 Unreal engine style flow-based display and processing.
Pintora Extensible javascript text-to-diagrams library that works in both browser and Node.js. Inspired by Mermaid and PlantUML 0
react-dag-editor React component to create graphic user interface
react-digraph A library for creating directed graph editors
react-flow React library for rendering node-based UIs
reaflow React library for building workflow editors
rete Framework for visual programming and node editors 0 Unreal engine style flow-based display and processing.
sigma.js Visualization framework for large graphs
vue-flow Flowchart component for Vue 3 Simplified graph view
X6 X6 is an HTML and SVG-based graph editing engine that provides low-cost customization capabilities and out-of-the-box built-in extensions to quickly build DAG diagrams, ER diagrams, flowcharts, lineage diagrams, and more. Mostly Chinese.

Apache ECharts

Website Docs GitHub
Includes Graph types.

Arbor.js

arbor.js » introduction (arborjs.org) samizdatco/arbor: a graph visualization library using web workers and jQuery (github.com)

"a graph visualization library built with web workers and jQuery."

D3.js

Website Docs GitHub
Data visualisation

d3-graphviz

magjac/d3-graphviz: Graphviz DOT rendering and animated transitions using D3 (github.com)

Dracula

strathausen/dracula: JavaScript layout and representation of connected graphs. (github.com) Dracula Graph Library – Graph Computation, Layout, Algorithms for JavaScript (graphdracula.net)

G6 (AntV)

Introduction | G6 (gitee.io)

Graphviz (C)

DOT Language. Command line only.

Vega - Incl Tree & Network views

A Visualization Grammar | Vega

Vis.js (Community Edition) - Incl Network view

vis.js (visjs.org)

A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

VivaGraphJS

website


Layouting

  • elkjs - A port of the Java ELK layouting library to Javascript
  • d3-hierarchy - Helpers and algorithms for working with hierarchical graphs
  • d3-force - Library for creating interactive force directed graphs
  • d3-dag - D3 plugin to work with DAG data structures
  • dagrejs - Directed graph layout algorithms for Javascript
  • graphology-layout - Layout algorithms
  • springy - Force directed graph layouts

Graph Utilities

  • behave-graph - Extensible behaviour-graph execution engine
  • graphlib - Helpers for directed graphs in JS
  • graphology - Utilities and algorithms for all kinds of graphs

Misc

  • flume - Business logic graph editor
  • mermaid - Flowchart and sequence diagrams generation
  • pintora - Text-to-diagrams library
  • quick-erd - Generate entity-relationship diagrams (ERD) from text, and reverse engineer ERD text from live database

Overview | Welcome to PyFlow homepage! (wonderworks-software.github.io) is a general purpose visual scripting framework for python.

Ryven - Flow-based visual scripting for Python - A simple and powerful visual nodes editor for Python, and a framework for building nodes executing any Python code.

4 Likes

Sure VP is a thing in many places but in your statement before moving on to written languages is partly what I mean: why isn't learning written programming languages before moving to VP. I kind of mean that when I say VP didn't take off.

Another example: if I want to write a node or two for Node-RED, why is that I have to do that in my text editor (ie. emacs)? If I want to extend emacs, I code that extension in emacs. Yet extensions to Node-RED (and I assume all other VP environments) have to be written in an textual environment.

The concept of visual programming is alive and well but that VP becomes the go-to concept for programming hasn't happened. I know many people believe that VP imagery becomes too complex as more functionality comes along, i.e. visual spaghetti code but Node-RED seems to have found good solutions to that (i.e. subflows, link nodes, groups and custom nodes).

Thank you for that list, gave me plenty of food for thought. I was thinking of how to auto layout a Node-RED flow. A dynamically created flow I should say and I want to automagically layout it out. Again one my off-the-wall ideas of how to use Node-RED!

Note that there has been an attempt long time ago (see pull request), but unfortunately it has never been merged...

Ah, sweet! I'll give that a try ... I was playing around with elkjs but it simply won't work in a function node ... I used it directly in node and it worked fine, but as a function node it does nothing.

1 Like

You can also package a Subflow as a node Packaging a Subflow as a module : Node-RED so yes you can almost create nodes for node-red by using node-red. (A la emacs example you gave)

You 'might' also get some ideas from this discussion.

Anyway if you could manage to implement something le that - with your meanwhile already known skills - that would be very welcome...

1 Like

Thanks for that, I got it working in a flow - that uses the ClientCode node that executes frontend Javascript from a backend trigger. So I took what Nick had done and put it in a client-code node with an inject node attached.

Now anyone who wants an initial layout engine can copy the nodes from the flow above. (Sorry for the own advertising but the flow might genuinely help!)

2 Likes

I saw the subflow extra configuration but never got warm to it, if there was a button "Submit here" ok, I'd go for it but there isn't. Hence my playing around with FlowHub and getting flow sharing done via Node-RED only ... admittedly I have no idea how authentication and trust could work but at least sharing is working!

Plus I would also like to have node development in Node-RED - something to manage the package.json, readme, etc ... the .js and .html are easily taken care of as templates.

I think that it seems hard enough to create a computer language, to then abstract that to a visual paradigm is even harder. Which is why VPL's tend to be in specialist areas where it is easier to apply that, such as music, images and video.

To create a general-purpose visual programming environment is extremely hard. Even Node-RED is far from perfect after all though it has proven very useful in many different use-cases, there is still a lot it cannot do. (Not a particular criticism by the way, just an observation).

Visual tools use models and models are, by necessity, somewhat simplified otherwise they become so complex that the visual aspect is no longer so useful.

Written language, on the other hand, can be extremely complex but still comprehensible. I'm sure there are lots of biological and social reasons for this - I'm no expert.

You don't. You can take a sub-flow and turn that into a node.

Ah, as I said above. :slight_smile:

It is indeed, one of the best in my opinion. But it is still FAR from being a complete, open-ended, programming environment. And there are many tasks that are FAR easier to do in language than visually. I don't think that will ever completely change, I believe it is some aspect of our brains. After all, while visual communication (e.g. cave paintings) massively pre-date written language, it would seem that written language was what really triggered the massive innovation across the world.

Summarized: I love it :heart_eyes:
Thanks for sharing this!! Very useful.

Although your ClientCode node is a very convenient way to implement this, hopefully you (or somebody else) can ever implement this a bit more in the flow editor UI. Not sure if plugins (like this one) can be used for something like that, e.g. to add a new action...

BTW when I imported your flow, it contained a series of html escaped characters:

image

And some escaped characters are no issue for the Monaco code editor, but the browser doesn't like them:

image

After fixing that, it seemed to work fine:

auto-layout

I should qualify my VP expectations: I spend a lot of time typing on the keyboard when I use Node-RED, no question. So yes, I still do a lot of textual coding and yes, that won't disappear anytime soon (perhaps with a Neuromancer-style direct interface we'll get rid of the keyboard).

But I'm firmly a fan of the the old adage a picture is worth a thousand words - somewhere between all text, no visuals and all visuals, no text is the sweet spot. Where? I don't know. I definitely hope that all that we have learned from textual programming doesn't fall by the wayside - as it happening with AI.

1 Like

Argh, I can import all I want, it just works :frowning: - I have had escaped-stuff-problems before in other flows but not in this one - it just works. Using Firefox on Mac ... and those encoding bugs are just rabbit holes (looking at you geolib and the ° symbol).

On the other hand, I wonder why it would do that but not with a normal function node? Perhaps I did code something incorrectly somehow ... I just copied it from the github diff window, nothing special. I'll have an investigate ... thanks for the heads up :+1:

I just want to be able to hit the inject button and have things happen in my editor :slight_smile: Thanks for the link, I was wondering how to get a user-made header onto Node-RED.

Thank you, much appreciated just as much as I enjoyed finding and using your SVG node :+1: Ended up multi-coloured blinking SVGs!

Btw thinking about how to change the code ... first step is width of nodes, the code assumes 200px for all nodes.

1 Like

It might be useful if some settings were (somehow) easily adjustable, because they are user dependent. For example I like to have a smaller distance horizontally between my nodes, while other users like to have them separated widely...

Not sure if this is somehow related to the Node-RED lint tool settings. Never had time to play with it. Just thinking out loud now...

I'm using document.getElementById(id).getBBox().width to get the width of the node, then there needs to be spacer that can/should be adjustable but to avoid overlap the width of the node needs to be known. Also it's the width of the parent node, which is another issue on its own ... :slight_smile:

I also had a look at the flow data for the client-code flow, there is no > in there (for the client code code) - if you edit the node, is there > in the Node-RED editor window?

Yes, a plug in can register actions to be available from the command palette which in turn can be bound to shortcuts

Hey Steve,
That is good to know. Never used it.

So Gregorius could register a auto-layout action via a plugin, so we can call it that way. And if he wants to do auto-layout by injecting a message, he can simply do that with a function node (by executing that action via Js code). Or if he wants he can build a custom node that is dedicated to executing actions, e.g. that he can select an action from his config screen perhaps...

@gregorius: Perhaps if you create a new discussion about auto layouting, you might get some more feedback compared to a discussion about Noisecraft :yum:

3 Likes

I figure I should say thanks here @gregorius. You are really opening up some new ideas and challenging the status-quo. Good for all of us who've been around Node-RED for a long time. :grin:

We still might not always agree, but it is healthy to have the debate regardless.

3 Likes

Thank you all for helping :slight_smile: And above all, thank you all for making Node-RED such a joy to work with :+1:

Much appreciated :blush: and I hope I can continue to be a bit off-the-wall!

3 Likes

For those interested, this flow (new node at the top left) does layouting using elkjs - just a first attempt and the options need finetuning, but it demonstrates how it could be done ... or how it could be done better :slight_smile:

@BartButenaers can you try again please, I think I've found the encoding bug - it seems that the base64 node decodes to string('binary') and it should be string('utf8') (in my case) - the flows are now coming out properly.