Node-based editor/blueprints for ImGui

Create your custom nodes and their logic... ImNodeFlow will handle connections, editor logic, and rendering.

image

• Support for Zoom
• Built-in Input and Output logic
• Built-in links handling
• Customizable filters for different connections
• Built-in customizable pop-up events
• Appearance 100% customizable

1. Add the following lines to your CMakeLists.txt:

   include(FetchContent)
   FetchContent_Declare(ImNodeFlow
    GIT_REPOSITORY "https://github.com/Fattorino/ImNodeFlow.git"
    GIT_TAG "v1.2.1"
    SOURCE_DIR "${CMAKE_CURRENT_LIST_DIR}/includes/ImNodeFlow"
   )
   FetchContent_MakeAvailable(ImNodeFlow)
   

   add_compile_definitions(IMGUI_DEFINE_MATH_OPERATORS)
   target_link_libraries(YourProject ImNodeFlow)
   

1. Download and copy, or clone the repo (or the latest release) inside your project
2. Add the following lines to your CMakeLists.txt:

   add_subdirectory(path/to/ImNodeFlow)
   . . .
   add_compile_definitions(IMGUI_DEFINE_MATH_OPERATORS)
   target_link_libraries(YourProject ImNodeFlow)
   

1. Make sure you have the following dependencies available for find_package():
   • Dear ImGui

class SimpleSum : public BaseNode
{
public:
 SimpleSum()
 {
 setTitle("Simple sum");
 setStyle(NodeStyle::green());
 addIN<int>("IN_VAL", 0, ConnectionFilter_Int);
 addOUT<int>("OUT_VAL", ConnectionFilter_Int)
 ->behaviour([this](){ return getInVal<int>("IN_VAL") + m_valB; });
 }
 void draw() override
 {
 ImGui::SetNextItemWidth(100.f);
 ImGui::InputInt("##ValB", &m_valB);
 }
private:
 int m_valB = 0;
};

image

For a more detailed explanation please refer to the documentation

• ocornut for Dear ImGui
• thedmd for imgui_bezier_math.h
• nem0 for helping with Zoom support