yFiles for HTML Release Notes

yFiles for HTML 2.0 is the newest major release available. The latest release is version (See also the entire yFiles for HTML change log.)

Technical Requirements

  • An IDE with dedicated support for JavaScript development is strongly recommended. 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

Hide Description
Open in yEd LiveDownload
yFiles for HTML 2.0 Release Notes
New support for Sankey diagrams with thick edges
yFiles for HTML 2.0 Release Notes
New edge bundling support
yFiles for HTML 2.0 Release Notes
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.
  • Improved the overall JavaScript experience throughout the API with function overloads, optional arguments, and option 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 independently. See PortConstraintKeys.SOURCE_PORT_GROUP_ID_DP_KEY and PortConstraintKeys.TARGET_PORT_GROUP_ID_DP_KEY.
  • HierarchicLayout now allows to specify the directedness of edges, see HierarchicLayout.EDGE_DIRECTEDNESS_DP_KEY. 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.EDGE_THICKNESS_DP_KEY.
  • 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 using EdgeLayoutDescriptor.RecursiveEdgeStyle.
  • Added preferred placement specifiers LabelLayoutConstants.PLACE_AT_SOURCE_PORT and 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 HierarchicLayout.
  • 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 OrganicLayout.ChainSubstructureStyle, OrganicLayout.StarSubstructureStyle, OrganicLayout.CycleSubstructureStyle, and OrganicLayout.ParallelSubstructureStyle.
  • 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 TreeReductionStage.NonTreeEdgeLabelingAlgorithm and TreeReductionStage.NonTreeEdgeLabelSelectionKey.
  • 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 SeriesParallelLayout.NonSeriesParallelEdgeLabelingAlgorithm and SeriesParallelLayout.NonSeriesParallelEdgeLabelSelectionKey.
  • 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.