Live Demo — yFiles in Action
30–45 min | Online | No install required
For Developers, Product Mangers & Executives
- Interactive graph visualization in real time
- Integration example
- Live Q&A and next step recommendations
30–45 minutes | 1:1 or team session | Online (Zoom / Teams)
No install required | We show live code
Book a free live demo
Octilinear Edge Editing
This demo shows how to implement interactive editing of octilinear edges.
OCTILINEAR is a routing style where
each edge consists of vertical, horizontal, and diagonal segments. This edge routing style
is preserved throughout all interactive editing operations.
The demo combines several techniques:
- A custom edge style that renders bends as octilinear segment cuts.
- Specialized interaction handlers for dragging octilinear segments.
-
A layout post-processing stage that prepares the routed edges for the custom edge style.
Things to Try
- Drag a diagonal segment to adjusts its length.
-
Drag a diagonal segment while holding Ctrl to adjust the length of all
diagonal segments along the entire edge.
-
Drag a diagonal segment while holding Shift to move the segment while keeping
neighboring segments orthogonal.
- Select an edge to highlight the center of diagonal segments.
-
Click a segment's center to show a handle that allows moving the segment or deleting its
corresponding bend.
-
Drag the slider in the toolbar to adjust the length of diagonal segments in the entire
graph.
-
Click the "Apply Layout" button to run a hierarchical layout with an octilinear edge
routing style.
-
Click the "Apply Router" button to only route edges with an octilinear routing style.
Demos
Documentation