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 comes with pre-configured sophisticated user interaction for
editable and non-editable diagrams.
Since one size rarely fits all, you can fit (almost) all
aspects of user interaction to your needs.
An Overview Component for Quick Navigation
The overview displays a simplified version of the whole graph
and highlights the currently visible area.
Infinite Panning and Configurable Viewport Limitations
Zooming and/or scrolling with the mouse wheel is 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 already predefined, for example for Cut, Copy, 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 one step.
The only limit for the number of undo steps is the available memory.
Versatile Clipboard
Cut, copy, and paste both arbitrary parts of a graph as well as
individual elements.
Sophisticated logic makes sure that pasting just works, for example when pasting nodes into a group.
Drag and Drop Across Components
Drag and drop data from other components of your app, or even other apps,
to your graph. With that, integrating a palette component is no big deal.
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 instead, 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 seemless integration with the look and feel of the rest
of the HTML5 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:
select elements, focus an element, and a generic highlighting of arbitrary sets of elements.
Predefined Visualizations for Elements
The most common, frequently used visualizations for graph elements
are readily usable. 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 as well as 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,
edges 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 away
its content in a single node, and expanding restores that content.Combined with an automatic layout or edge routing and animations, this creates a beautiful
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 style.All of these styles can be applied to your diagram in an animated fashion.
Automatic Edge Routing
Let yFiles for HTML route the edges for your self-defined arrangement of nodes!
Edge routing styles to choose from: polyline (orthogonal), orthogonal bus-like, and organic.Again, all of these styles can be applied to your diagram in an animated fashion.
Automatic Label Placement
Automatic label placement strives 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.
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 the core rendering performance yFiles for HTML can make direct use of the browsers' SVG and HTML5 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 available hardware accelerated graphics performance using CSS3 animations and
transitions on SVG elements.