STNodeEditor is a lightweight and powerful node editor, very simple to use. Provides a wealth of properties and events, which can easily complete the data interaction and notification between nodes. A large number of vitual functions are available for developers to use. It is very free.

Download STNodeEditor

STNodeEditor 2.0

In this case, only a node editor control is provided, and the TreeView,PropertyGrid is not included. If I have time later, I will make a complete framework.

The above is what the author of the first version mentioned in the document. NOW it's COME TRUE




STNodeEditorhas a very powerful function. It supports the movement and zooming of the canvas and can lock the position of the node and the connection. When connecting, it will automatically check whether the data type is compatible, and whether the connection is repeated or whether it is a loop path, etc.

  • Drag the title to move the node
  • Right-click the title to pop up the menu (setContextMenuStrip)
  • Drag the connection points to connect
  • Right-click on the connection to disconnect
  • Middle-drag to move the canvas (If the notebook touchpad supports it, it can be dragged with two fingers)
  • CTRL+mouse wheel to zoom the canvas

Note: The operation editor performed in the node client area will not respond, because the operations in the node client area will be converted into node events.

Because the author regards a node as a Form and the editor container is Desktop, the developer can develop a node like a WinForm program.



STNodeHubis a built-in node that can disperse one output to multiple inputs or concentrate multiple outputs on one input point to prevent repeated connections. It can also be used for layout when the node connection is complicated

The input and output of HUB are of object type by default. When a connection is connected, the data type will be automatically changed and a new row will be added.

Note: Only STNodeHub can modify the data type of the connection point. Because the field is marked internal, the data type of the added connection point cannot be modified in the extended STNode.



STNodeTreeView is easy to use, and there is no need to create a tree directory by yourself like System.Windows.Forms.TreeView.

Mark the STNode subclass by STNodeAttribute to set the path you want to display in STNodeTreeView and the information you want to display in STNodePropertyGrid.

Note: If you want nodes to be displayed in STNodeTreeView, you must use STNodeAttribute to mark the STNode subclass.



If the property in STNode is marked by STNodePropertyAttribute, it will be displayed in STNodePropertyGrid. By default, int, float, double, bool, string, enum and Array of the above data types are supported. If the property data type you want to display is not supported, you can extended STNodePropertyDesciptor, please refer to DEMO for details.

You can see that some information about the node can be displayed in the STNodePropertyGrid panel. The author believes that this is a framework, and everyone can build another framework based on this framework. And the Coder that writes the node for the framework can add personal information for this node.



STNodeEditorPannel is a combination control of STNodeEditor STNodeTreeView STNodePropertyGrid.

You can control the layout by dragging the handle

SO what CAN it DO

What's this???flow chart??? SOAR?????

This animation is the best explanation the author can think of

When there are many applications (modules), they need to call each other to transfer data to complete a set of processes.
It is easy to develop a single-function application (module), but it is tedious to develop a whole set of applications that call each other with many functions.
Developers using this framework only need to define the data type, and then develop a single function node, as for the execution process, hand it over to the framework and the user connection.

The process is the program The program is the process, and the function is visualized.


About UI customization

From the picture, you can see that the node UI definition is very free.

STNodeControl provides the same common functions and properties as System.Windows.Forms.Control, so developers only need to develop STNode controls like WinForm controls.

The AttrTestNode node in the picture does not have special UI definition requirements. You only need to provide STNode with the input and output data types and display text. STNode.AutoSize will automatically calculate the size and layout. STNode.AutoSize is true by default.

For more details, please refer to DEMO


About node editor

Maybe you have never used node editing, but node editing is more and more, especially in the design software Blender, C4D, Houdini, Davinci, etc.

The biggest advantage of node editing is the visual operation. A single function is completed in the node and the user can combine the required logic through the node connection to make the process visible, instead of fixing the execution process of the function in the program. Of course, the data type of the node needs to be defined before this. Incompatible data types are not allowed to connect. Normally, the connection points of the same color have the same data type.

Let developers only need to focus on the development of a single function, so that the coupling between functions and functions is reduced. The developer completes the required function in the node without knowing how to call the next program. You only need to pack the result data into the output option, no matter how complicated the node connection is, the node editor will automatically complete the data transfer.

STNodeEditor 3.0

In this case, only a few node control writing examples are provided in the Demo, and the control is not included. If there is time, the author will make some common controls that can be used by the node.

The above is what the author mentioned when this version was released Are you looking forward to completion ???

Fork me on Github
.Net:.Net Framework 3.5
  VS:Visual Studio 20102021-04-27
DebugST is the most handsome programmer in the world!