The graph model supports an unrestricted number of nodes, edges, labels, and ports.
Universal Nodes
Nodes are the central elements of the graph and can model all kinds of business data.
All Kinds of Edges
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.
Rich Rotatable Labels
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.
Optional Port Elements
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.
Unlimited Nested Graph Hierarchies
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.
Using data-binding to external or in-memory data-sources,
graph structures can easily be parsed and imported into yFiles for HTML.
Comprehensive Events for Graph Changes
Clear notifications of structural changes to the graph via a
fine-grained event framework
make it easy to react and execute custom code.
Versatile Component for Graph Visualization
Creating, Editing, and Viewing Graphs Interactively
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.
An Overview Component for Quick Navigation
The overview displays a simplified version of the entire graph
and highlights the currently visible area.
Infinite Panning and Configurable Viewport Limitations
Zooming and scrolling with the mouse wheel are supported by default.
Touch Interaction Gestures
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.
Keyboard Navigation and Editing Commands
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.
Unlimited Undo Stack
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.
Versatile Clipboard
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 Across Components
Drag and drop data from other components of your application, or even other applications,
to your graph. This makes integrating a palette component straightforward.
Flexible GraphML Support
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.
A diagram can be printed after export to an image or vector graphic
and making use of the browsers' printing capabilities.
Tooltip Facility
Tooltips can be shown for any kind of graph element.
Context Menu Support
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.
Selection, Focus, and Highlighting of Graph 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.
Predefined Visualizations for 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.
Customizable Element Visualization
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.
Visualize Crossing Edges as Bridges/Jumps/Hops
Bridges, or line jumps, illustrate the paths of edges at crossings. yFiles for HTML includes common
bridge styles like gap, arc, and rectangle.
Arrows and Other Edge Decorators
Arrows can be shown at each end of an edge. Besides arrowheads, circles, crosses, and custom
visualizations are supported.
Level of Detail Rendering
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.
Customizable Hover Effects
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.
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.
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.
Grid Display and Grid Snapping
The graph component can display a grid, and elements snap to the grid
points if desired.
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.
Comprehensive Events for User Interaction
Events for all kinds of
user interactions allow you to react to user-induced changes and run custom code whenever required.
Custom Animations
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.
High-Quality Automatic Layout
Automatic Layout Styles
yFiles for HTML features efficient and highly customizable algorithms for automatic layout.
A variety of layout styles are included: hierarchic, organic (force-directed), tree, orthogonal, circular, radial, and series-parallel.All of these styles can be applied to your diagram with an animated transition.
Automatic Edge Routing
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
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.
Extensive Graph Analysis Algorithms
yFiles for HTML contains sophisticated algorithms for analyzing graphs, including clustering, centrality, shortest paths, and more.
Extensive Development Utilities
Language Support
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.
Optional Runtime Type Checking
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.
Platform Support
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.
Native Performance
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.