I'm creating a visual programming language. I base on functional programming paradigm, because I believe that declarative thing should be mapped to visual more easily. I mostly done with conceptual design but there is one thing that I need to make that language full-featured and I still can't come to the solution: higher-order functions (the functions that take one or more other functions as its arguments and do whatever it wants but mostly apply that functions to some data and do something with their outputs).

The best solution I found is one by Autodesk's Max Creation Graph (there is also a good article explaining HOF's). Here is how it looks:
(source: autodesk.com)

Here Map is a higher-order function, stuff in white dashed border is its function argument, orange dot with hint - argument of that "child" function, and the rightmost dark-cyan is the output of "child" function. This solution, however, have some obvious weak points. First of all you need a hand-drawn hint, to figure out where input is. Second - what if you have more than one such unconnected orange dots (e.g. optional arguments)? Or more than one unconnected outputs (e.g. some side-effect functions are used)? And finally, what if "child" function need more then one argument (e.g. for Map it can be element and index so you can not only transform an element of the array but also do something based on it's position in that array) - it's kind of ಠ_⊙ what the heck will happen in that situation at all...

So, maybe you have some kind of hints, insights or better examples? Or... fresh eye at least.

closed as too broad by Mayo, Devin, Graham Herrli, JohnGB Feb 24 '16 at 12:23

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


I feel like this question might be best suited for another stack site but I will try to address this on a UX approach alone.

Firstly, if this is a language you are building yourself, I would suggest highlighting the aspects that make your language unique, as to help people better understand it.

If there's nothing unusual about the way higher-order functions operate, and your attached diagram is how you want things to be laid out, try nesting your functions visually instead connecting them via a tangle of lines.

Thus, your language would look a bit more like XML, or a dropdown menu, than it would circuitry --in that parts of your function would toggle to show the functions nested within it.

Another approach would be to use those lines more intelligently. Is there a reason why they are a certain color? Could it be that those colors could represent Map, element, array, or object? Could the dots at the end have a variety of shapes to show what is being implemented and where? For example, if a function takes an object and a string, and outputs an array, have that function input a yellow triangle, a green square, and output an orange circle.

Not the answer you're looking for? Browse other questions tagged or ask your own question.