Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xyflow/awesome-node-based-uis

A curated list with resources about node-based UIs
https://github.com/xyflow/awesome-node-based-uis

List: awesome-node-based-uis

awesome-list etl node-based-ui visual-programming workflow-editor

Last synced: 1 day ago
JSON representation

A curated list with resources about node-based UIs

Awesome Lists containing this project

README 

        
# Awesome Node-Based UIs



![node-based ui](https://user-images.githubusercontent.com/2857535/202488299-e2950c46-d861-497a-8398-68eed494e77e.png)



A curated list with resources about node-based UIs.



Check out [CONTRIBUTING.md](/CONTRIBUTING.md) for instructions on how to add a new link to the list.



Curators: Christopher, John and Moritz from [React Flow](https://reactflow.dev) / [Svelte Flow](https://svelteflow.dev)



## Javascript Libraries



### Renderers



- [baklavajs](https://github.com/newcat/baklavajs) - Graph/node editor for VueJs

- [beautiful-react-diagrams](https://github.com/beautifulinteractions/beautiful-react-diagrams) - React components and hooks to build diagrams

- [butterfly](https://github.com/alibaba/butterfly) - Renderer for interactive diagrams and flowcharts

- [cytoscape.js](https://js.cytoscape.org/) - Canvas based renderer with utilities and algorithms

- [diagram-maker](https://awslabs.github.io/diagram-maker) - Interactive editor for any graph-like data

- [Flowy](https://github.com/alyssaxuu/flowy) - Flowchart library

- [flow-builder](https://github.com/bytedance/flow-builder) - React-based renderer for workflows and process diagrams

- [GoJS](https://gojs.net) - Diagramming library with a focus on customization and interactivity

- [jointjs](https://www.jointjs.com) - JavaScript diagramming library

- [jsplumb](https://jsplumbtoolkit.com/community) - Open source project written in Typescript that gives you the tools you need to visually connect DOM elements

- [kedro-viz](https://github.com/kedro-org/kedro-viz) - Visualises Kedro data and machine-learning pipelines

- [litegraph.js](https://github.com/jagenjo/litegraph.js) - A graph node engine and editor

- [mermaid](https://mermaid-js.github.io/mermaid) - Static diagrams for documentation

- [ngx-graph](https://github.com/swimlane/ngx-graph) - Graph visualization library for Angular

- [ngx-vflow](https://github.com/artem-mangilev/ngx-vflow) - An open source library to build node-based UI with Angular

- [nice-dag](https://github.com/eBay/nice-dag) - Lightweight javascript library, which is used to present a DAG diagram

- [nodl](https://github.com/emilwidlund/nodl) - Framework for computational node graphs

- [react-dag-editor](https://github.com/microsoft/react-dag-editor) - React component to create graphic user interface

- [react-digraph](https://github.com/uber/react-digraph) - A library for creating directed graph editors

- [React Flow](https://github.com/xyflow/xyflow) - React library for rendering node-based UIs

- [reaflow](https://github.com/reaviz/reaflow) - React library for building workflow editors

- [rete](https://github.com/retejs/rete/) - Framework for visual programming and node editors

- [sigma.js](https://github.com/jacomyal/sigma.js) - Visualization framework for large graphs

- [Svelte Flow](https://github.com/xyflow/xyflow) - Svelte library for rendering node-based UIs

- [vue-flow](https://github.com/bcakmakoglu/vue-flow) - Flowchart component for Vue 3

- [X6](https://github.com/antvis/X6) - Diagramming library that uses SVG and HTML

- [yFiles](https://www.yworks.com/products/yfiles) - Library for visualizing, editing and analyzing graphs



### Layouting



- [elkjs](https://github.com/kieler/elkjs) - A port of the Java ELK layouting library to Javascript

- [d3-hierarchy](https://github.com/d3/d3-hierarchy) - Helpers and algorithms for working with hierarchical graphs

- [d3-force](https://github.com/d3/d3-force) - Library for creating interactive force directed graphs

- [d3-dag](https://erikbrinkman.github.io/d3-dag/) - D3 plugin to work with DAG data structures

- [dagrejs](https://github.com/dagrejs/dagre) - Directed graph layout algorithms for Javascript

- [graphology-layout](https://graphology.github.io/standard-library/layout.html) - Layout algorithms

- [springy](https://github.com/dhotson/springy) - Force directed graph layouts



### Graph Utilities



- [behave-graph](https://github.com/bhouston/behave-graph) - Extensible behaviour-graph execution engine

  - [behave-flow](https://github.com/beeglebug/behave-flow) - UI for behave-graph using react-flow

- [graphlib](https://github.com/dagrejs/graphlib) - Helpers for directed graphs in JS

- [graphology](https://github.com/graphology/graphology) - Utilities and algorithms for all kinds of graphs



### Misc



- [flume](https://github.com/chrisjpatty/flume) - Business logic graph editor

- [mermaid](https://github.com/mermaid-js/mermaid) - Flowchart and sequence diagrams generation

- [pintora](https://github.com/hikerpig/pintora) - Text-to-diagrams library

- [quick-erd](https://github.com/beenotung/quick-erd) - Generate entity-relationship diagrams (ERD) from text, and reverse engineer ERD text from live database



## C Libraries



### Renderers



- [graphviz](https://graphviz.org/) - Graph visualization software

- [imnodes](https://github.com/Nelarius/imnodes) - Node editor for dear imgui

- [node-editor](https://github.com/thedmd/imgui-node-editor) - Node Editor built using dear imgui

- [nodeeditor](https://github.com/paceholder/nodeeditor) - Dataflow programming framework



## .NET Libraries



- [Blazor.Diagrams](https://github.com/Blazor-Diagrams/Blazor.Diagrams) - A fully customizable and extensible all-purpose diagrams library for Blazor.

- [nodify](https://github.com/miroiu/nodify) - A collection of WPF controls for node based editors designed for MVVM.

- [NodeNetwork](https://github.com/Wouterdek/NodeNetwork) - A C# library with a WPF node editor component based on ReactiveUI.

- [STNodeEditor](https://github.com/DebugST/STNodeEditor) - A node editor based in Windows Forms and GDI that offers extensive properties and events for streamlined data interaction between nodes.

  

## Rust Libraries



- [egui_node_graph](https://github.com/setzer22/egui_node_graph) - Node applications using egui



## Swift Libraries



- [Flow](https://github.com/AudioKit/Flow) - Swift Package Manager-based node graph editor



## Go Libraries



### Diagramming



- [d2](https://github.com/terrastruct/d2) - Scripting language that turns text to diagrams



## Applications



### Workflow & Automation



- [Benthos Studio](https://studio.benthos.dev/) - Visual editing for the Benthos stream processor

- [Cables](https://cables.gl/) - Visual programming environment

- [Carto Workflows](https://carto.com/blog/introducing-carto-workflows/) - Spatial analytics tool

- [Concourse CI](https://github.com/concourse/concourse/) - Container-based continuous thing-doer [OSS]

- [Controller Lab](https://controllerlab.io/) - Drag-and-drop tool for remapping input devices

- [Dopt](https://www.dopt.com) - Visual flow builder + APIs/SDKs for powering user onboarding and engagement experiences

- [Dots](https://dots.community) - No-code bot builder for Discord community onboarding & engagement

- [DoubleLoop](https://doubleloop.app/) - Dashboard builder to monitor business metrics

- [customer.io](https://customer.io/visual-workflow-builder/) - Automated messaging platform

- [FME](https://www.safe.com/fme/fme-desktop/) - ETL tool with spatial data support

- [Flowhub](https://flowhub.io/ide) - Visual programming tool [OSS]

- [Kelp](https://kelp.app/) - Build interactive data-driven apps for operational analytics

- [Kuwala](https://github.com/kuwala-io/kuwala) - Data Pipelines for BI analysists [OSS]

- [Mode](https://mode.com/) - Tool for exploratory analysis

- [n8n](https://n8n.io/) - Workflow automation platform

- [novu](https://github.com/novuhq/novu) - Notification infrastructure for developers [OSS]

- [OneSignal Journeys](https://onesignal.com/journeys) - Workflow builder to automate messaging

- [Patterns](https://patterns.app) - Data processing and automation tool

- [Power Automate](https://powerautomate.microsoft.com/de-de/) - Automation tool

- [Proxeus](https://github.com/ProxeusApp/proxeus-core) - Workflow builder for secure documents and more [OSS]

- [Retool Workflows](https://retool.com/blog/introducing-retool-workflows/) - ETL tool for Retool

- [Stately](https://stately.ai/) - Application logic visualizer [OSS]

- [Tracardi](https://github.com/tracardi/tracardi) - Customer Journey Automation tool [OSS]

- [whenthen](https://whenthen.com/) - Payment orchestration

- [workflow86](https://www.workflow86.com/) - Workspace to document, automate and manage business workflows



### AI



- [Cellulose](https://www.cellulose.ai) - Machine Learning Model visualizer and optimization tool

- [Netron](https://github.com/lutzroeder/netron) - Visualizer for machine learning models

- [ComfyUI](https://github.com/comfyanonymous/ComfyUI) - Stable Diffusion GUI

- [CraftGen](https://craftgen.ai) - Visually build and orchestrate powerful AI agents.



### Diagramming



- [diagrams.net](https://www.diagrams.net/) - also known as draw.io

- [FigJam](https://www.figma.com/figjam/)

- [Flowchart Fun](https://flowchart.fun/) - Generate flowcharts and diagrams from text [OSS]

- [Grapher](https://grapherx.netlify.app/) - Flowchart tool [OSS]

- [Knotend](https://www.knotend.com/) - Keyboard-centric flowchart editor

- [Lucidchart](https://www.lucidchart.com/)

- [Mermaid Live](https://mermaid.live/) - Edit, preview and share mermaid charts/diagrams [OSS]

- [Miro](https://miro.com/)

- [nomnoml](https://nomnoml.com/) - Tool for drawing UML diagrams [OSS]

- [QuikFlow](https://quikflow.app/) - Create flowcharts with a mindmapping workflow

- [Terrastruct](https://terrastruct.com/) - Visualize software architecture



### Data Processing



- [Cascade](https://www.cascade.io/) - Data transformation and visualization

- [CodeNect](https://flamendless.itch.io/codenect) - Visual Programming Software that transpiles to C

- [Datablocks](https://datablocks.pro) - Data transformation and visualization

- [Easy Data Transform](https://www.easydatatransform.com/) - Data transformation tool

- [Enso](https://enso.org/) - Code based automation tool [OSS]

- [Graphqleditor](https://graphqleditor.com/) - Editor for GraphQL

- [jsoncrack](https://github.com/AykutSarac/jsoncrack.com) - JSON data visualizer

- [node-red](https://github.com/node-red/node-red) - Low-code programming for event-driven applications [OSS]

- [Nifi](https://nifi.apache.org/) - Data routing, transformation, and system mediation logic

- [Rapidcanvas](https://rapidcanvas.ai/) - Data science platform

- [Slang](https://bitspark.de/slang/) - Data processing tool

- [Y42](https://www.y42.com/) - Data pipeline tool



### 3D & Visuals



- [Plantarium](https://plant.max-richter.dev) - Procedural browser-based plant modelling [OSS] 

- [Alma](https://www.alma.sh/) - Digital playground for visual experiences

- [Armory3d](https://armory3d.org/features#scripting) - Game engine for Blender

- [Blackjack](https://github.com/setzer22/blackjack) - Procedural modelling application [OSS]

- [Blender](https://www.blender.org/) - 3D graphics suite for multiple rendering engines [OSS]

- [Cascade](https://github.com/ttddee/Cascade) - Image editor [OSS]

- [Chainner](https://github.com/chaiNNer-org/chaiNNer) - Image processing GUI [OSS]

- [ComfyUI](https://github.com/comfyanonymous/ComfyUI) - Design and execute advanced Stable Diffusion pipelines for AI image generation [OSS]

- [Dynamo](https://github.com/DynamoDS/Dynamo) - Open Source Graphical Programming for Design [OSS]

- [FFmpeg Explorer](https://ffmpeg.lav.io/) - Tool for exploring FFmpeg filters 

- [Gaffer](https://github.com/GafferHQ/gaffer) - Application for lookdev, lighting and automation [OSS]

- [Gimel Studio](https://gimelstudio.github.io/) - 2D image editor [OSS]

- [Houdini](https://www.sidefx.com/products/houdini/) - Procedural system for artists

- [Mixture](https://github.com/alelievr/Mixture) - Unity plugin to create textures in realtime [OSS]

- [Natron](https://natrongithub.github.io/) - Compositing software for VFX and motion graphics [OSS]

- [Nodebox](https://github.com/nodebox/nodebox) - App for visualization and generative design [OSS]

- [Nodes.io](https://nodes.io/) - Visual programming environment

- [Nodetoy](https://nodetoy.co/) - Shader tool

- [Notch](https://www.notch.one/) - Motion graphics and interactive VFX in realtime

- [Origami Studio](https://origami.design/) - UI design prototyping tool

- [Polygonjs](https://github.com/polygonjs/polygonjs) - WebGL design tool [OSS]

- [Protongraph](https://github.com/protongraph/protongraph) - Procedural content generation [OSS]

- [Puredata](https://puredata.info/) - Visual programming language for multimedia [OSS]

- [Retrobatch](https://flyingmeat.com/retrobatch/) - Batch image processing for macOS

- [VVVV](https://vvvv.org/) - Visual live-programming environment



### Audio



- [Audio Hijack](https://rogueamoeba.com/audiohijack/) - Audio recording and routing for macOS

- [Audulus](https://audulus.com) - Modular synthesizer and DSP environment

- [Axiom](https://github.com/monadgroup/axiom) - Realtime audio synthesizer [OSS]

- [Bespoke](https://www.bespokesynth.com/) - Modular synthesizer [OSS]

- [Eternal](https://eternal.rob.computer/) - Audio and visual composition [OSS]

- [Kronos](https://kronoslang.io/) - Visual & textual programming language designed for musical signals

- [Max](https://cycling74.com/products/max) - Tool to create your own interactive software

- [Ossia score](https://github.com/ossia/score) - Sequencer for audio-visual artists [OSS]

- [Reaktor](https://www.native-instruments.com/en/products/komplete/synths/reaktor-6/) - Modular digital signal processor

- [Zupiter](https://z.musictools.live) - Synthesizer



### Scripting



- [flojoy](https://www.flojoy.ai/) - No code Python programming

- [Natto](https://natto.dev/) - Javascript environment

- [noflo](https://github.com/noflo/noflo/) - Flow-based programming for Javascript [OSS]

- [PyFlow](https://github.com/wonderworks-software/PyFlow) - Visual scripting framework for python [OSS]

- [Ryven](https://ryven.org/) - Visual scripting for python [OSS]

- [Regex Nodes](https://johannesvollmer.com/regex-nodes) - Analyze and build regular expressions in your browser [OSS]



### Misc



- [Twine](http://www.twinery.org/) - Tool for telling interactive, non-linear stories