yFiles for HTML Release Notes
yFiles for HTML 2.0 is the newest major release available.
The latest release is version 220.127.116.11.
(See also the entire yFiles for HTML change log.)
For example, IntelliJ WebStorm or IDEA Ultimate, Visual Studio Code, NetBeans, Eclipse.
- To run yFiles for HTML-based web applications, an HTML5-capable browser with adequate SVG support is required (see table).
yFiles for HTML 2.0 - Changes Since 18.104.22.168
New support for Sankey diagrams with thick edges
New edge bundling support
New support for port grouping
Major New Features Added
- The whole API has been thoroughly reviewed and refactored resulting in a massively improved user/developer experience.
New features can be understood more quickly and are easier to implement on top of the existing APIs. Consistent API names and hierarchies
can be memorized more easily. Infrequently used and inconvenient APIs have been removed from the public API which means a leaner
framework. This results in a much improved learning curve.
parameter objects. This adds more flexibility while at the same time enhances developer productivity.
The API´s compatibility to third party class frameworks was improved, enabling convenient and efficient use of
EcmaScript 6 and TypeScript classes. Not having to use the old class-framework anymore improves tooling support
and enhances developer productivity.
The API supports modern EcmaScript concepts and types like Promises and a collections API that is inline with
the most recent EcmaScript Array and Iterable API.
The performance of the view component has been improved on average between 20% and 35% for larger graphs where
previously 60 FPS could not be achieved.
The developer's guide has been rewritten and revised almost entirely. A lot more code examples and a whole set
of new chapters that deal with the customization of the various features provided enable developers to more easily
and more quickly implement their requirements. The layout documentation now also
contains sample graphs that visually show the effects of the various settings.
The yFiles modules have been restructured and are now smaller in total size. The complete layout demo now
requires only slightly more than 1.5 megabytes of compressed code to be transferred to the client when loaded
for the first time. In addition to that module dependencies have been optimized so that for many use-cases
less modules need to be loaded for an application to work, resulting in quicker overall startup times.
Support for Sankey diagrams. These diagrams visualize flow quantity between entities, for example
cost or energy flow.
Support for edge bundling. Bundling together multiple edges means that
their common parts are to some degree merged into a bundled part. Edge bundling is useful to increase the
readability of graph drawings with a high number of edges that connect a comparably small number of nodes. The
following layout algorithms support edge bundling:
Circular Layout: Edge bundling is applied to edges of the same circle.
Radial Layout: Edge bundling is applied to non-tree edges.
TreeReductionStage: Edge bundling is applied to non-tree edges.
HierarchicLayout has now proper support for incremental layouts of groups with changing bounds. This is
especially useful for hierarchic layout of graphs with expandable and collapsible groups. The new
Hierarchic Grouping demo shows the improved behavior.
HierarchicLayout now supports port grouping. Edges are bundled at their ports, but routed
HierarchicLayout now allows to specify the directedness of edges, see
This new feature enables to, for example, support mixed graphs that contain both directed and undirected edges:
While for directed edges the layering step tries to find a solution where the source of an edge is placed above
the target (with respect to the main layout direction), for undirected edges the direction doesn't matter and
the edge may also be inserted as same-layer edge. This feature also enables to force some edges to specifically
point against the main layout direction.
HierarchicLayout now supports edges with specified thickness values. Minimum distances in the
layout will consider these thicknesses, see
HierarchicLayout now supports recursively routed edges. Edges that pass the border of group nodes will
always leave at the bottom side and enter at the top side of the group node. This routing style is specified
Added preferred placement specifiers
LabelLayoutConstants.PLACE_AT_TARGET_PORT for edge labels which express that the label should be
placed directly at the source/target port of the edge. Currently, the specifiers are only considered by the
integrated labeling of the
OrganicLayout now supports the detection of regular substructures in the graph and applies a
specific layout style to them such that they can be better recognized. See
TreeReductionStage now supports the automatic placement of labels of
non-tree edges. Users do not need to take care of such edge labels themselves after using a tree layout
algorithm on a non-tree input graph in conjunction with the reduction stage. See properties
SeriesParallelLayout now supports the automatic placement of labels
of non-series-parallel edges. Users do not need to take care of such edge labels themselves after
running the algorithm with a non-series-parallel input graph. See properties
New API for working with the planar embedding of planar graphs. The API allows for easy iteration of the faces,
darts, and consecutive edges of the embedding.
Major New Demos Added
The 2.0 release contains a sophisticated new demo that shows the graph analysis features provided by yFiles for HTML.
This demo also shows how to use modern CSS animations and transitions to achieve a better user experience.
All provided demos have been refactored to not make use of the old demo framework anymore, making it much easier
to reuse code from the demos in custom applications.
The demos have been rewritten using EcmaScript 6 and a conversion tool has been added that shows how to
code in EcmaScript 6 and deploy to older browsers (only Internet Explorer is affected) that do not support this
level of EcmaScript.