Building Your First Graph

The Graph Panel is your primary interactive workspace. It operates as an infinite, scalable canvas where you will construct structural hierarchies, link entities, and visualize complex relationships.

Navigating the Canvas

Before placing elements, it is important to familiarize yourself with the viewport controls. The canvas leverages a dynamic coordinate system that updates in real-time.

Panning:Left-click and hold anywhere on the empty grid backdrop, then drag your mouse to move around the workspace.
Zooming:Use your mouse wheel to scale the canvas in and out (ranging from 0.2x to 10x magnification).

Creating and Managing Nodes

Nodes are the foundational structural elements of your architecture.

Spawn a Node:Right-click anywhere on the empty grid to open the context menu, then select "Create Structural Node". The node will instantly appear at your cursor's exact coordinates.
Inspect Data:A standard left-click on any node instantly selects it and triggers the right-hand Mashup Panel, allowing you to edit its underlying data definitions.
Reposition:To move a node, hold down the Ctrl key, left-click the node, and drag it to its new location.

Deletion:Right-clicking a specific node opens an element-specific context menu where you can permanently remove the entity from the graph.

Establishing Relationships (Edges)

Relationships are built sequentially. You do not need to drag lines between nodes; instead, you build a "linking sequence."

Click the origin node (it will begin to pulse green to indicate an active linking chain).
Click the target node to finalize the connection. An arrow will automatically generate between them.
To cancel an active sequence, simply click the pulsing origin node a second time.

Figure 2.1: Canvas execution showing active node interaction and real-time edge offsetting.

Smart Routing:If you connect two nodes in both directions, the engine automatically offsets the lines by a few pixels so both paths remain clearly visible without overlapping.

Navigating Hierarchical Layers

EdgeNode supports multi-layered architectures, meaning any node can act as a container or "parent" to a completely new, isolated graph layer.

Dive Deeper:Double-click the tiny center point (which highlights on hover) of any node to enter its internal graph layout.
Go Back Up:Right-click the empty canvas and select "Go Up Hierarchical Layer" to return to the parent graph.

Boundaries and Simulations

As your architecture grows, the canvas automatically visualizes groupings and real-time paths. Because the frontend inherently defines the spatial limits of the diagram based on node coordinates, the workspace seamlessly renders both structural boundaries (polygons) and dynamic data flows (dashed paths) without requiring explicit type differentiation from the core engine.

Subgraphs:Formed automatically around grouped nodes using a Monotone Chain algorithm. They appear as visually padded, colored zones behind your architecture.
Simulation Paths:Animated, dashed streams that flow along your edges to represent data or logic movement.