Versatile user interaction
yFiles features
yFiles offers versatile interaction possibilities. convenient default interaction modes, allow the user to navigate through a diagram via panning and zooming. Or create a complete diagram editor for making and editing graphs, with only a single line of code. Of course, everything about the interaction can be extensively customized to your requirements, and if the built-in gestures don't suffice, it's easy to add ample custom interactions.

We´d love to help you. Reach out and we'll get in touch with you.
Your message has been sent.
Create interactive diagrams with yFiles, the network visualization library
The yFiles diagramming library supports any level, whether exploring its benefits for the first time or developing a complete prototype. With hundreds of source-code demos available, getting started or diving into specific use cases is straightforward. Expert guidance from core developers ensures that challenges can be addressed efficiently.
Start visualizing complex networks and dynamic relationships today with yFiles!
Test yFiles free of chargeNavigation
Zooming, panning, and scrolling are built-in features and work just as well with touch as with a mouse. All of those features can be customized to fit your application perfectly. For instance, you can change whether or how those gestures are invoked, and you can also limit the zoom level or viewable area.
View demoInteractive diagram creation
yFiles includes an interaction mode designed for intuitive and customizable diagram creation, adaptable to various specific domains.
For instance, edge creation can be restricted to only connect compatible entities. Label editing can be disabled for items that should not be labeled. Keep the aspect ratio when resizing certain nodes (e.g. those showing an image should not be distorted) or group items together. The customization possibilities are almost limitless.
All those features work with touch as well as with a mouse, customizable keyboard shortcuts also exist for many common operations.
View demoItem selection
Select items with a single click or use marquee (rubber-band) selection to select multiple items with a single gesture. Selected items can be manipulated and moved as one.
The selection process is highly customizable, allowing for the addition of custom business rules to determine which items can be selected and under what conditions.
Full support for keyboard, mouse, and touch
yFiles provides fine-grained events for everything related to interaction. This includes low-level events like key presses and mouse movements, but also high-level events, for example when an edge creation gesture starts or ends or when items are selected.
Listen to any event and trigger custom actions either as a lightweight way to customize the experience or to keep the diagram in sync with an underlying business model.
View demoDrag and drop
Create drag and drop palettes from which users can drop new elements into the diagram. Dropping diagram items is fully supported by yFiles; the only thing needed is a palette with the desired items.
Dropping a node into a group node will also automatically create the new node as a child of the group. Snap lines during the gesture that help align the new items are supported as well.
View demoSnapping
Manually aligning nodes and edges can be cumbersome and time-consuming and even then it won't be pixel-perfect. Snapping shows visual guides during gestures near other elements to ease alignment. Ensuring that a node has the same height as other nodes in the diagram is just as easy as aligning a node in the exact center of two other nodes or creating edges that are orthogonal.
Another type of snapping is snapping to a grid, which helps align nodes and edges in a regular grid. The grid size and which elements should snap to the grid can be customized.
If all that is not enough, then custom snapping options can be added as well, for instance to implement guidelines.
View demoOrthogonal edge editing
While snapping helps to create edges with only 90° bends, that property is lost when moving the nodes at either end, and snapping also doesn't guarantee that an edge is always orthogonal. Orthogonal edge editing ensures that no matter how the diagram is edited, edges that are orthogonal will stay that way.
Edge segments can also be moved without disrupting their orientation.
View demoUndo and redo
yFiles offers comprehensive support for undoing and redoing diagram modifications. Everything that can be changed in a diagram can also be undone.
Modifications can be single changes, like adding a node or composite changes where many items change at once, e.g. moving multiple items.
There is no limit to how many operations can be undone, except available memory.

Context menu
yFiles supports context menus on arbitrary diagram items that can be dynamically populated. That way every item can have a context menu specific to that item.
View demoClipboard
A clipboard is available out of the box supporting all common clipboard operations, like cut, copy, paste and duplicate. The clipboard can also handle a number of advanced scenarios, such as copying a label to a different item or copying edges between copied nodes automatically.
All aspects of the clipboard can be customized and it's even possible to add custom actions when certain items are copied or pasted.
View demo
Tooltips
Easily add tooltips to diagram items that show when hovering the mouse pointer over the respective item. Tooltips can be generated dynamically based on business data tied to an item and don't have to be static.
Edges connecting to other edges
Usually edges in graphs only connect nodes to other nodes. However, yFiles also supports connecting edges to other edges. This is directly supported by the yFiles diagram model, ensuring that connection points adjust accordingly when edges are modified or moved.
View demoyFiles Playground: User interaction
This sandbox allows you to interact with a dynamically generated graph using yFiles. You can create and modify nodes and edges, and observe how the graph layout automatically updates. Toggle features such as automatic layout and snapping to see how they affect the organization and alignment of your diagram. Experiment with different interactions to understand the powerful capabilities of yFiles for creating and managing complex graph structures effortlessly.
graphComponent.fitGraphBounds()
/**
* The yFiles graph component is already set up in this playground, and you can access
* it via the globally available variables 'graph' and 'graphComponent'.
*/
const nodeCount = 100
// Create a random graph with a tree structure
const nodes: INode[] = [graph.createNode()]
for (let i = 1; i < nodeCount; i++) {
nodes.push(graph.createNode())
graph.createEdge(nodes[Math.floor(Math.random() * (i - 1))], nodes[i])
}
// the default input mode is a GraphViewerInputMode, already
const inputMode = graphComponent.inputMode as GraphViewerInputMode
// Click a node to zoom in
inputMode.addEventListener('item-clicked', evt => {
const { item, pointerButtons } = evt
if (pointerButtons !== PointerButtons.MOUSE_RIGHT && item instanceof INode) {
evt.handled = true
graphComponent.zoomToAnimated(7, item.layout.center)
}
})
// Click anywhere to zoom out
inputMode.addEventListener('canvas-clicked', ({ pointerButtons }) => {
if (pointerButtons === PointerButtons.MOUSE_LEFT) {
graphComponent.fitGraphBounds({ animated: true })
}
})
inputMode.addEventListener('populate-item-context-menu', evt => {
const item = evt.item
if (item instanceof INode) {
evt.contextMenu = [
{
label: 'Zoom me close!',
action: () => graphComponent.zoomToAnimated(item.layout.toRect().getEnlarged(5)),
},
{
label: 'Add label',
action: () => graph.addLabel(item, 'Label'),
},
]
}
})
inputMode.toolTipItems = ['node', 'edge']
inputMode.addEventListener('query-item-tool-tip', evt => {
if (evt.item instanceof INode) {
evt.toolTip = `I am a node at ${evt.item.layout.center.toString()}`
}
if (evt.item instanceof IEdge) {
evt.toolTip = `I connect two nodes!`
}
})
// Apply a tree layout. Other layouts to try are for example OrganicLayout or Hierarchic Layout
await graphComponent.applyLayoutAnimated(
new OrganicLayout({ defaultPreferredEdgeLength: 37 }),
'1s'
)
User interaction is not everything
Check out what else can be done with yFiles
yFiles provides rich visualizations for nodes, edges, labels, and ports along with options for styling selection and highlighting. If the desired visualization is not covered by the default ones, you can easily create completely custom visualizations.
yFiles features efficient and highly customizable algorithms for automatic layouts. A variety of layout styles are included: Hierarchic, organic (force-directed), tree, orthogonal, circular, radial and series-parallel. Almost all aspects of each layout algorithm can be customized to fit a specific domain and use case.
yFiles allows you not only to create, edit, display, and arrange graphs. There are also a number of analysis algorithms to determine common structural traits (such as connectivity, cycles, whether a graph is a tree and much more), pathfinding and reachability, clustering and centrality measures, graph traversals and many others.