yFiles for HTML Features

The graph model supports an unrestricted number of nodes, edges, labels, and ports.

Nodes are the central elements of the graph and can model all kinds of business data.

The graph model supports both directed and undirected edges, self-loops (edges starting and ending at the same node), multiple edges between the same pair of nodes, and any number of bends per edge.

Labels may contain text and icons at the same time. A label can have any size and orientation, for example, to perfectly align itself with an edge segment.

Ports model the connecting points of edges to other graph items. Ports can be used to specify the exact location an edge connects to another graph item. They can also be used to restrict the possible connection points for edges in an interactive scenario.

Nodes that belong together can be part of a group. Groups are nodes, too, and thus, a group can be part of another group, potentially forming a nested hierarchy of arbitrary depth.

Bind related business data to each element and access it whenever needed.

Make large graphs more comprehensible by dynamically filtering the important parts and showing them to the user.

The graph model supports you in all graph-related tasks. You can easily navigate through the graph structure: determine neighbors, outgoing edges, the labels of an element, etc.

Using data-binding to external or in-memory data-sources, graph structures can easily be parsed and imported into yFiles for HTML.

Clear notifications of structural changes to the graph via a fine-grained event framework make it easy to react and execute custom code.

yFiles for HTML offers pre-configured, sophisticated user interaction for editable and non-editable diagrams. Since one size rarely fits all, you can adapt almost all aspects of user interaction to your specific needs.

The overview displays a simplified version of the entire graph and highlights the currently visible area.

The drawing area of the graph component is unlimited by default. However, you can easily restrict the accessible viewport, for example, to the content bounds.

Zooming and scrolling with the mouse wheel are supported by default.

Zooming and panning as well as multi-touch pinch-zoom and swipe is supported out of the box. All major user interaction gestures for viewing, modifying and creating graphs are also available via intuitive and configurable touch interaction gestures.

Most user actions can be triggered with both the mouse and the keyboard. Well-established shortcuts are predefined, for example, for Cut, Copy, and Paste.

Undoing and redoing all modifications is readily available. The undo engine can be easily configured to support custom user interactions or to merge multiple operations into a single step. The only limitation on the number of undo steps is the available memory.

Cutting, copying, and pasting arbitrary parts of a graph, as well as individual elements, is possible. Sophisticated logic ensures that pasting works seamlessly, for example, when pasting nodes into a group.

Drag and drop data from other components of your application, or even other applications, to your graph. This makes integrating a palette component straightforward.

GraphML is the default implementation for serializing and deserializing graphs of yFiles for HTML to an XML-based representation. All aspects of your diagram, its structure, the visualizations, and custom data, can be stored in GraphML. Of course, you can also use your own format if desired. GraphML support is mainly used for interoperability with other products that use this format. For communication with the server or short-term storage, other, more lightweight techniques can and often should be used.

Diagrams can be exported to bitmap or vector based images.

A diagram can be printed after export to an image or vector graphic and making use of the browsers' printing capabilities.

Tooltips can be shown for any kind of graph element.

Context menus can be implemented easily, reusing third-party context menu toolkit implementations. The yFiles for HTML library detects the corresponding user gestures and forwards the display of the menu to the third-party toolkit. This results in a seamless integration with the look and feel of the rest of the web application. Context menus can be shown for any combination of selected or unselected elements.

The graph component provides three different ways to accentuate graph elements: selecting elements, focusing on an element, and generically highlighting arbitrary sets of elements.

The most common and frequently used visualizations for graph elements are readily available. This includes straight or polygon lines for edges (with and without arrows), text rendering for labels (with and without frames), and premade WebGL node and edge styles.

If the desired visualization is not covered by the predefined visualizations, yFiles for HTML supports custom visualizations. The extensive API supports full customization and re-using parts of existing implementations.

Bridges, or line jumps, illustrate the paths of edges at crossings. yFiles for HTML includes common bridge styles like gap, arc, and rectangle.

Arrows can be shown at each end of an edge. Besides arrowheads, circles, crosses, and custom visualizations are supported.

The graph component supports level of detail rendering: You can display a coarse overview of the graph at low zoom levels and present more details when zooming in.

Hover effects are easy to implement and supported for all graph element types. Where available, platform support for SVG animations and CSS transitions can be leveraged to get great looks and performance at the same time.

Label text is edited in place. Users can move labels freely or to restricted locations only.

Adding new elements to the graph is very easy with the mouse. By default, nodes are created with a single mouse click, and edges are created by dragging from the source to the target node.

Drag and move all kinds of elements with the mouse. Drag a resize handle to change the size of nodes.

Snap lines, or guides, help users to align and arrange the elements of a diagram. You can specify which elements should snap and even define custom snap locations.

The graph component can display a grid, and elements snap to the grid points if desired.

Orthogonal edge editing facilitates creating and editing orthogonal diagrams.

yFiles for HTML supports collapse and expand actions for groups. Collapsing a group hides its content in a single node, and expanding restores that content.

Combined with an automatic layout or edge routing and animations, this creates a visually appealing transition effect.

Events for all kinds of user interactions allow you to react to user-induced changes and run custom code whenever required.

yFiles for HTML includes an extensible animation framework. Animations for typical actions like changing the viewport, translating graph elements, and applying an automatic layout or edge routing are ready to use.

yFiles for HTML features efficient and highly customizable algorithms for automatic layout. A variety of layout styles are included: hierarchical, organic (force-directed), tree, orthogonal, circular, radial, and series-parallel.

All of these styles can be applied to your diagram with an animated transition.

Let yFiles for HTML route the edges for your self-defined arrangement of nodes! Edge routing styles include polyline (orthogonal), orthogonal bus-like, and organic.

Again, all of these styles can be applied to your diagram with an animated transition.

Automatic label placement aims for a label arrangement without overlaps. Optionally, you can specify placement preferences for the elements and customize various aspects of the algorithm.

yFiles for HTML contains sophisticated algorithms for analyzing graphs, including clustering, centrality, shortest paths, and more.

Write your code using modern JavaScript, TypeScript, or CoffeeScript, or any other language that can compile to ECMAScript Level 5 or ES2015-compatible code. We provide code completion and library definition files for major IDEs for JavaScript and TypeScript.

An optional JavaScript module can be loaded to check API calls at runtime for the correct number of arguments, the correct argument types, and return types. Also, type construction can be validated at type creation time, detecting missing members for implemented interface members and abstract base type members.

yFiles for HTML is platform and framework agnostic. It does not depend on any third-party library or framework but integrates well with all major JavaScript frameworks.

For core rendering performance, yFiles for HTML can directly use the browsers' SVG and HTML Canvas implementations (either/or and both at the same time). No wrapping code is required, and adding third-party libraries for rendering item visualizations is easy. This makes hardware-accelerated graphics performance available using CSS3 animations and transitions on SVG elements.