yFiles for HTML Release Notes

The newest available bugfix and maintenance release of yFiles for HTML is version

Technical Requirements

  • For development, we strongly recommend an IDE with dedicated support for JavaScript, for example WebStorm and IDEA Ultimate from JetBrains, or Visual Studio Code.
  • yFiles for HTML-based web applications require an HTML5-capable browser with adequate SVG support. See the browser compatibility list for more details.

yFiles for HTML – Changes Since

This is the second bugfix release for yFiles for HTML 2.3. There are only a few error corrections but several new demos.

There are no incompatible API changes in this release.


Graph and View

  • For all three graph builder and tree builder classes, the GraphBuilderItemEventArgs.dataItem property of the NodeRemoved and EdgeRemoved events no longer contains an outdated object in some cases.
  • The GraphBuilder class no longer fails if an edge and its source or target node are removed by the same updateGraph call.
  • The TypeScript definitions and the documentation of the GraphOverviewCanvasVisualCreator, GraphOverviewSvgVisualCreator, and GraphOverviewWebGLVisualCreator classes now contains the previously missing methods createVisual and updateVisual.
  • The ViewportLimiter class now queries the getCurrentBounds method if the ViewportLimitingPolicy property is set to ViewportLimitingPolicy.TOWARDS_LIMITS, too.


  • The HierarchicLayout, EdgeRouter, and CurveRoutingStage classes now avoid unnecessary, consecutive Bezier segments for modeling larger straight-line parts of an edge path. The resulting reduced bend count improves the user experience when working with the BezierEdgeStyle.
  • Curved edge routes generated by the HierarchicLayout,EdgeRouter, and CurveRoutingStage classes are now more symmetric and smoother in cases where a large number of edges connect to the same node side. Previously, non-curved artifacts could appear.
  • The HierarchicLayout class does not crash anymore when defining different edge routing styles for different edges where at least one of the styles is HierarchicLayoutEdgeRoutingStyle.CURVED.
  • The EdgeRouter class no longer has a problem that occasionally resulted in bad edge routing artifacts if edge grouping is enabled and non-affected edges are grouped at both end points.
  • The EdgeRouter class no longer occasionally throws an exception if the input contains bus edges
  • Resolved a potential null-reference error caused by the ChannelEdgeRouter class when using the OrthogonalPatternEdgeRouter class as path finder strategy.

New Demos

Process mining visualization
The new Process Mining Visualization Demo shows how to create an animated visualization of a process flow. The diagram shows the various steps in a processing pipeline and how entities move through the pipeline. A heat map shows which elements in the graph are nearing their capacity limit.
Aggregating nodes with common properties
The new Interactive Aggregation Demo shows how to analyze a graph by interactively aggregating nodes with common properties.
A node style with a modifiable shape
The new Editable Path Node Style Demo shows a path-based node style whose control points can be moved by users.
Avoiding node overlaps while editing graphs
The new Node Overlap Avoiding Demo shows how an automatic layout can remove node overlaps while a user interactively edits a graph.
Folding with layout
The new Folding With Layout Demo shows how to automatically trigger a layout that clears or fills the space when opening or closing groups.
Clear an area of graph items
Two new, similar demos show how the clear and fill area layout can be used to keep an area clear of graph elements during user interaction. The new Clear Marquee Area Demo automatically keeps a marquee area clear of graph elements, and the new Clear Rectangle Area Demo keeps a user-defined rectangular area clear of graph elements.

Noteworthy Demo Improvements

  • In large Angular apps, especially ones with many components, performance can go down due to Angular's extensive and expensive change detection. To prevent this, the yFiles GraphComponent should run 'outside of Angular'. Details are explained in the corresponding knowledge base article and shown by the updated Angular Demo.
  • The BPMN Editor Demo now contains a parser for the BPMN Diagram Interchange format.
  • The React Demo now comes with a template node style that makes use of React's data binding to automatically update its visualization when the corresponding data changes.
  • We removed the previous Isometric Drawing Demo. Since the introduction of the Projection feature in version 2.3, the approach shown in this demo is no longer recommended. It is replaced by the new demo that was introduced in 2.3 with the name Isometric WebGL Rendering Demo.

yFiles for HTML - Changes Since 2.3

This is the first bugfix release for yFiles for HTML 2.3. In addition to the usual error corrections, there is a new demo and a noteworthy correction in demo code.

There are no incompatible API changes in this release.



  • In the UMD variant of the library, the layout-area module now correctly includes all types that belong to the ClearAreaLayout and FillAreaLayout APIs.
  • The layout-only yFiles for HTML packages now contain the library module layout-area that was missing before.
  • The AdjacencyGraphBuilder and TreeBuilder classes now properly remove references to edges whose source or target node has been removed.

    In addition, these classes no longer create incomplete graphs when an invalid parentId was specified for a node.

View and Styles

  • In version 2.3, the SvgExport class did not inline external Bitmap images anymore. This has been fixed and the documentation has been improved.
  • Several problems related to the text measuring performance improvements of version 2.3 are now fixed. Effectively, these improvements have an effect only now.
  • The MarkupLabelStyle class now places text that starts or ends with some empty lines correctly when using the option VerticalTextAlignment.TOP.
  • If the preferred label size is too small to even render wrapped text, the MarkupLabelStyle class does not throw an error anymore. In addition, if the remaining text of a line doesn't fit in the next line after cropping, text rendering will now end at this text position instead of continuing with the next line.
  • Measuring text with the TextRenderSupport class is now more exact. Previously, the determined width of a line was one pixel to small (except for lines that ended with an ellipsis). Especially, this problem affected the text placement of the built-in label styles.
  • Edges styled with BezierEdgeStyle now remain smooth during layout animations and are now properly cropped at nodes whose IShapeGeometry implementations return null as outline.
  • The bounds and the hit testing of the BezierEdgeStyle class now consider the entire edge, regardless of the number of bends, and performance problems in the isVisible, isHit, and getBounds methods have been fixed.
  • Due to better null checks, several styles and input modes no longer throw an error in the rare case that an IRenderContext doesn't provide a CanvasComponent instance.
  • The ViewportAnimation no longer throws an error when applied on a zero-size GraphComponent.


  • The ICommand.SET_CURRENT_ITEM command can now also be used to “reset” the current item to null by passing null as the command parameter. This also fixes that the NavigationInputMode.setCurrentItem and GraphInputMode.setCurrentItem methods did nothing when null was passed as an argument.
  • The TextEditorInputMode class now correctly queries the ViewportLimiter if its textBoxPlacementPolicy property is set to TextBoxPlacementPolicy.SCROLL_CANVAS. Now, if a text box is not visible at its original location because it's outside the limited viewport, the viewport only scrolls to its limits and then the text box is moved instead.
  • The GraphClipboard.paste method is now called from the paste command, thus overriding it will now have the expected effect.

Layout and Analysis

  • The IGraph.morphLayout and LayoutExecutor.start methods no longer throw an error when applied on a zero-size GraphComponent.
  • GraphCentrality and ClosenessCentrality no longer calculate infinite or NaN centrality values on single-node graph subsets. Moreover, these classes no longer include results for a single node if the original graph has a single node and the subset filters that node away.

New Demos and Noteworthy Demo Improvements

  • The new Layout Without View Demo shows how to run graph analysis and layout algorithms without a view and without the IGraph API.
  • A problem in the context menu implementation that is used by several demos is now fixed. It prevented the opening of all context menus in demos. Now, context menus in demos show again as expected.