Home

Welcome to the imnodes wiki!

This is quite WIP 🚧

The immediate mode API

Imnodes extends ImGui with an immediate-mode style node graph editor. The ImGui wiki has a nice discussion on what exactly the "immediate mode" paradigm means and it is also applicable to imnodes. In short,

• The main state, the nodes, pins, and links, lives in the user's data structures.
• Map your internal state to UI elements by using the appropriate BeginNode, EndNode, BeginInputAttribute, BeginOutputAttribute, EndAttribute, and Link functions calls.
• The library is a reflection of the user's state, and does not need to be modified by specific function calls. Nodes and links are created and deleted by simply creating and deleting links from the user's data structures.

Even though the user provides the main state, this does not mean that imnodes is stateless. Behind the scenes, node, pin, and link identity are retained from frame to frame. Node positions, editor panning, as well as the depth order of nodes are tracked to ensure a good user experience.

The Basic Usage section will go over all the available ways to interact with nodes and links which are enabled by default.

More advanced user-interactions are available, if desired, requiring imnodes to expose query functions such as bool IsLinkDestroyed(int* link_id). But these functions don't do anything unless advanced interactions are explicitly enabled via the imnodes API. The Advanced Usage section will go over this additional functionality.

Basic usage

Initialization

Before anything can be done, the library must be initialized. This can be done at the same as ImGui initialization.

ImGui::CreateContext();
imnodes::CreateContext();

// and finally, elsewhere in the code
imnodes::DestroyContext();
ImGui::DestroyContext();

We're ready to create a node editor canvas. The node editor must be instantiated within a window, just like any other ImGui widget.

ImGui::Begin("node editor");

imnodes::BeginNodeEditor();

// the nodes will go here

imnodes::EndNodeEditor();

ImGui::End();

Creating nodes

Creating links

Advanced usage

Snap link to cursor

Detach link from pin by clicking and dragging

Create/destroy links on snap to pin