Show HN: Flyde – an open-source visual programming language

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • flyde

    ⚡️⚡️⚡️ Open-source, visual programming for developers. Includes a VS Code extension, integrates with existing TypeScript code, browser and Node.js.

  • Yes! As a big fan of functional-reactive programming, it was important to me that Flyde builds on that foundation, and doesn't fall into more imperative paradigms.

    With that being said, Flyde does offer an easy way for node authors to set local and global state, but in a functional way - you can pass your own map as the global state, and do whatever you want with it. It's not properly documented yet, but here's the code - https://github.com/flydelabs/flyde/blob/main/core/src/execut...

  • openscad-graph-editor

    OpenSCAD Graph Editor

  • As a visual person (traditionally trained as a graphic artist), I've wanted this sort of thing for a long while, and I've been trying to use it for 3D.

    Surprisingly, there are multiple specialized tools for this:

    - https://www.blockscad3d.com --- an adaptation of Google's Blockly to OpenSCAD

    - https://github.com/derkork/openscad-graph-editor --- wires and nodes, it has the advantage of exposing _all_ of OpenSCAD's commands (the above has a subset)

    - https://github.com/Tanneguydv/Pythonocc-nodes-for-Ryven --- a module for using PythonOCC in Ryven --- when I finally succeeded, I found the language inscrutable, even when provided w/ quite nice examples (definitely a failing on my part, not that of the tool)

    - https://github.com/graphscad/graphscad --- it took a long while for the source code for this to be made available, and for a while it had compatibility problems (why was "cube" redefined?) --- probably defunct for political reasons, it had some interesting ideas, in particular the ability to have custom icons for modules

    - https://www.nodebox.net --- if memory serves I got hung up by not easily being able to do 3D, and when doing 2D having precision problems (or maybe that was Processing.org)

    and I've been using these tools to make various things:

    https://willadams.gitbook.io/design-into-3d/3d-project

    (and maybe eventually I'll finish something)

    The problem I've been running into is there doesn't seem to be an answer to the question:

    "What does an algorithm look like?"

    I recently had occasion to mention Herman Hesse's _The Glass Bead Game_ (also published as _Magister Ludi_) and I'll bring it up again --- what is a meaningful graphical representation of a program?

    The Drakon folks argued that there should be one true path but that's not really communicative and I would note that if this was a simple thing it wouldn't be decades since I last saw a physical Flowcharting Template:

    https://americanhistory.si.edu/collections/object-groups/flo...

    (and it's pretty rare to even see a well-done electronic drawing of a flowchart since Visio made its splash and vanished into the bowels of Microsoft)

    The main problem seems to be one of expressiveness not scaling up well, hence:

    https://blueprintsfromhell.tumblr.com/

    https://scriptsofanotherdimension.tumblr.com/

    Presumably, one doesn't want to define modules/variables unnecessarily --- but the question becomes where is that boundary?

    If you define too many, then you're back to the "wall of text" which one was trying to avoid (but wrapped up in nice boxes with some lines or shapes), and if one doesn't use them (well, look at the pretty/awful images in the links above).

    Ideally, a well-coded visual program would have a pleasing aesthetic appearance which is expressive and communicates flow and function, and I've tried for that at:

    https://willadams.gitbook.io/design-into-3d/programming

    (though I wish that there was an easy way to export an SVG version of a program)

    I believe that what is needed here is some graphical equivalent to Literate Programming: http://literateprogramming.com

    Is there a nice GUI toolkit integration which would allow making a graphical application with this? I have an idea I want to try it which might be a good fit.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • Pythonocc-nodes-for-Ryven

    Pythonocc nodes for Ryven

  • As a visual person (traditionally trained as a graphic artist), I've wanted this sort of thing for a long while, and I've been trying to use it for 3D.

    Surprisingly, there are multiple specialized tools for this:

    - https://www.blockscad3d.com --- an adaptation of Google's Blockly to OpenSCAD

    - https://github.com/derkork/openscad-graph-editor --- wires and nodes, it has the advantage of exposing _all_ of OpenSCAD's commands (the above has a subset)

    - https://github.com/Tanneguydv/Pythonocc-nodes-for-Ryven --- a module for using PythonOCC in Ryven --- when I finally succeeded, I found the language inscrutable, even when provided w/ quite nice examples (definitely a failing on my part, not that of the tool)

    - https://github.com/graphscad/graphscad --- it took a long while for the source code for this to be made available, and for a while it had compatibility problems (why was "cube" redefined?) --- probably defunct for political reasons, it had some interesting ideas, in particular the ability to have custom icons for modules

    - https://www.nodebox.net --- if memory serves I got hung up by not easily being able to do 3D, and when doing 2D having precision problems (or maybe that was Processing.org)

    and I've been using these tools to make various things:

    https://willadams.gitbook.io/design-into-3d/3d-project

    (and maybe eventually I'll finish something)

    The problem I've been running into is there doesn't seem to be an answer to the question:

    "What does an algorithm look like?"

    I recently had occasion to mention Herman Hesse's _The Glass Bead Game_ (also published as _Magister Ludi_) and I'll bring it up again --- what is a meaningful graphical representation of a program?

    The Drakon folks argued that there should be one true path but that's not really communicative and I would note that if this was a simple thing it wouldn't be decades since I last saw a physical Flowcharting Template:

    https://americanhistory.si.edu/collections/object-groups/flo...

    (and it's pretty rare to even see a well-done electronic drawing of a flowchart since Visio made its splash and vanished into the bowels of Microsoft)

    The main problem seems to be one of expressiveness not scaling up well, hence:

    https://blueprintsfromhell.tumblr.com/

    https://scriptsofanotherdimension.tumblr.com/

    Presumably, one doesn't want to define modules/variables unnecessarily --- but the question becomes where is that boundary?

    If you define too many, then you're back to the "wall of text" which one was trying to avoid (but wrapped up in nice boxes with some lines or shapes), and if one doesn't use them (well, look at the pretty/awful images in the links above).

    Ideally, a well-coded visual program would have a pleasing aesthetic appearance which is expressive and communicates flow and function, and I've tried for that at:

    https://willadams.gitbook.io/design-into-3d/programming

    (though I wish that there was an easy way to export an SVG version of a program)

    I believe that what is needed here is some graphical equivalent to Literate Programming: http://literateprogramming.com

    Is there a nice GUI toolkit integration which would allow making a graphical application with this? I have an idea I want to try it which might be a good fit.

  • graphscad

  • As a visual person (traditionally trained as a graphic artist), I've wanted this sort of thing for a long while, and I've been trying to use it for 3D.

    Surprisingly, there are multiple specialized tools for this:

    - https://www.blockscad3d.com --- an adaptation of Google's Blockly to OpenSCAD

    - https://github.com/derkork/openscad-graph-editor --- wires and nodes, it has the advantage of exposing _all_ of OpenSCAD's commands (the above has a subset)

    - https://github.com/Tanneguydv/Pythonocc-nodes-for-Ryven --- a module for using PythonOCC in Ryven --- when I finally succeeded, I found the language inscrutable, even when provided w/ quite nice examples (definitely a failing on my part, not that of the tool)

    - https://github.com/graphscad/graphscad --- it took a long while for the source code for this to be made available, and for a while it had compatibility problems (why was "cube" redefined?) --- probably defunct for political reasons, it had some interesting ideas, in particular the ability to have custom icons for modules

    - https://www.nodebox.net --- if memory serves I got hung up by not easily being able to do 3D, and when doing 2D having precision problems (or maybe that was Processing.org)

    and I've been using these tools to make various things:

    https://willadams.gitbook.io/design-into-3d/3d-project

    (and maybe eventually I'll finish something)

    The problem I've been running into is there doesn't seem to be an answer to the question:

    "What does an algorithm look like?"

    I recently had occasion to mention Herman Hesse's _The Glass Bead Game_ (also published as _Magister Ludi_) and I'll bring it up again --- what is a meaningful graphical representation of a program?

    The Drakon folks argued that there should be one true path but that's not really communicative and I would note that if this was a simple thing it wouldn't be decades since I last saw a physical Flowcharting Template:

    https://americanhistory.si.edu/collections/object-groups/flo...

    (and it's pretty rare to even see a well-done electronic drawing of a flowchart since Visio made its splash and vanished into the bowels of Microsoft)

    The main problem seems to be one of expressiveness not scaling up well, hence:

    https://blueprintsfromhell.tumblr.com/

    https://scriptsofanotherdimension.tumblr.com/

    Presumably, one doesn't want to define modules/variables unnecessarily --- but the question becomes where is that boundary?

    If you define too many, then you're back to the "wall of text" which one was trying to avoid (but wrapped up in nice boxes with some lines or shapes), and if one doesn't use them (well, look at the pretty/awful images in the links above).

    Ideally, a well-coded visual program would have a pleasing aesthetic appearance which is expressive and communicates flow and function, and I've tried for that at:

    https://willadams.gitbook.io/design-into-3d/programming

    (though I wish that there was an easy way to export an SVG version of a program)

    I believe that what is needed here is some graphical equivalent to Literate Programming: http://literateprogramming.com

    Is there a nice GUI toolkit integration which would allow making a graphical application with this? I have an idea I want to try it which might be a good fit.

  • enso

    Hybrid visual and textual functional programming.

  • skastic

    Visual programming language: SKetches of Abstract Syntax Trees. I. C.

  • I always wanted to love ProGraph - I played with it back in the pre-OSX Mac days. But I found it's very hard to "read" ProGraph code, which it would seem is the thing that visual languages are supposed to enable. It could be that my brain had already been shaped into text based programming for too long to adapt.

    That said, I did create a visual toy language demo a few years back for the fun of it. It's kinda like a visual Lisp, or maybe upside-down ProGraph: https://github.com/mypalmike/skastic

  • flyde-vscode

    Flyde VSCode Extension

  • FWIW your VSCode Repository link <https://marketplace.visualstudio.com/items?itemName=flyde.fl...> is 404, it should be https://github.com/flydelabs/flyde-vscode but is https://github.com/flydehq/flyde-vscode

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • flyde-vscode

    Discontinued Flyde VSCode Extension [Moved to: https://github.com/flydelabs/flyde-vscode] (by flydehq)

  • FWIW your VSCode Repository link <https://marketplace.visualstudio.com/items?itemName=flyde.fl...> is 404, it should be https://github.com/flydelabs/flyde-vscode but is https://github.com/flydehq/flyde-vscode

  • visual-programming-codex

    Waypoints to the past and future of visual programming.

  • Nice! Have you explored showing live values flowing through the nodes? This seems like a good use of animation.

    I'll also take a moment to plug my Visual Programming Codex[1], which collects VPLs as though they're butterflies. I'm adding Flyde to the backlog of projects to document, but I'd also suggest looking around there for ideas. There are a ton of valuable new things you can do once you start visualizing programming, especially if you're visualizing the execution behaviour. I'd love to see you push this further.

    [1] https://github.com/ivanreese/visual-programming-codex/issues...

  • multiwoven

    🔥 Open Source Reverse ETL and Customer Data Platform (CDP). An open-source alternative to Hightouch, Census, and RudderStack.

  • This is interesting, we are building https://github.com/Multiwoven/multiwoven an open-source ReverseETL and workflow orchestration is a big part of our platform, maybe I ca experiment with small use-case like setting up backend tests using flows.

  • c4-notation

    Technical resources for using the C4 model for visualizing software architecture.

  • What you are describing sounds a lot like C4: https://c4model.com/

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts