yFiles for HTML Release Notes

yFiles for HTML 2.2 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.2 - Changes Since

Hide Description
Open in yEd LiveDownload
yFiles for HTML 2.2 Release Notes
Improved coding assistance
yFiles for HTML 2.2 Release Notes
New support for bus-like arrangement in HierarchicLayout
yFiles for HTML 2.2 Release Notes
Greatly enhanced support for CSS styling

Major New Features

npm package of the library
The yFiles library now comes as a local npm package. This makes it much easier to include yFiles in projects with third-party tools and frameworks like webpack and Angular. In addition to the library, the npm module installs the typings that come with yFiles. Thus, code completion and documentation lookup work in JavaScript IDEs like JetBrains WebStorm and Visual Studio Code without further configuration.

Since the format for the documentation is slightly different for WebStorm and VS Code, a tool is included that tailors the typings for your preferred IDE.

Improved coding assistance and 1000 new code snippets

The typings that provide code completion for JavaScript IDEs like JetBrains WebStorm and Visual Studio Code have been reworked to be more precise and extensive. For example, they now contain the static members of interfaces, support type conversion, and specify whether properties, parameters, and return values can be null or not and whether they must be an object or can be of any type. Of course, TypeScript projects benefit from these improvements, too.

In addition, the documentation viewer has more than 1000 new code snippets and shows the new information, too.

CSS styling for handles etc.
All visualizations of handles and indicators for interactive editing have now CSS classes to allow styling with CSS rules. This includes the selection, focus, and highlight templates, resize and move handles, snap lines and grids, the visualization of port candidates, marquee and lasso selection, and the viewport rectangle in the overview. The documentation and the Developer's Guide contain extensive lists of all available classes.

In addition, the edit label input box and the tooltips now have dedicated CSS classes during entering and leaving of the DOM. Also, a subtle fade animation was added to these elements that is enabled by default.

The new CSS Styling Demo shows this new styling feature.

WebGL and HTML Canvas rendering

WebGL and HTML Canvas rendering are now supported for the visualization of handles and grids, and for the overview component. These rendering techniques provide significant performance improvements especially for large graphs. The rendering technique is specified by the new property renderMode of HandleInputMode, GridVisualCreator, and GraphOverviewComponent, respectively.

Note that WebGL and HTML Canvas rendering for the visualization of graph items like nodes and edges is already supported.

Bus-like placement in hierarchic layouts
The HierarchicLayout class is now able to arrange children of a specified root node in a bus-like way. This results in a very compact and uniform arrangement if a node has many successors. The bus sub-structures are defined by the HierarchicLayoutData.buses property, and the new BusDescriptor class provides more individual settings for the buses.
Label placement, bus routing, and port grouping for EdgeRouter

The EdgeRouter class now features integrated edge label placement. Labels are automatically placed when the new property integratedEdgeLabeling is enabled. The placement considers the optional PreferredPlacementDescriptor of a label.

Also, it now supports port grouping of edges at their source and target and orthogonal bus routing. To specify the port group IDs or the bus affiliation, use the associated properties in the PolylineEdgeRouterData class.

Analysis wrapper

The powerful analysis algorithms got a new API that is based on the IGraph interface and streamlines working with the results. In particular, it makes working with a special analysis graph class obsolete. The algorithms that are available with the new API include centrality measures, clustering, flow calculation, rank assignment, spanning tree, shortest path, and more.

This is accompanied by the new GraphStructureAnalyzer class that provides methods to check structural properties of a given graph.

The new Analysis Algorithms Step of the Getting Started Tutorial shows how to run an algorithm. The existing Graph Analysis Demo allows you to interactively explore all the algorithms.

Demos use ES module imports

Using ES modules makes it easier to re-use demo code in your own project since many third-party frameworks and tools work with ES modules, too, most notably webpack and Angular. In addition, the source code is now more concise due to the absence of fully-qualified names and can be better analyzed by IDEs for code completion and documentation lookup.

In addition, we provide several tools that help existing customers in either migrating to ES modules or converting new demo code with ES modules syntax back to the previous require.js and UMD usages.

New and improved demos

This release contains the following new demos:

  • Metaball Groups Demo: Shows how to render metaball-like background visualizations where nodes can be associated to zero or more groups.
  • Web Worker Demo: There are now two versions of this demo, one with UMD loading and one with import statements.
  • d3 Node Style Demo: Presents a node style that visualizes dynamic data with d3.js.
  • Family Tree Demo: Show the automatic layout for genealogical graphs.
  • Simple Partition Grid Demo: Shows how to manually create a PartitionGrid for the automatic layout.
  • Overview Styles Demo: Shows several different rendering techniques and styles for the overview.

The Application Features Tutorial has the following new demos which concentrate on a single feature and make it particularly easy to re-use their code:

The new Layout Data Step of the Getting Started Tutorial shows how to configure individual settings for each node for the automatic layout.

In addition, we refactored several of the demos to make it easier to re-use their yFiles-specific code. These demos include, amongst others, Organization Chart Demo, Hierarchic Grouping Demo, and Sankey Demo.

New Features


  • The new yFiles for HTML Optimizer replaces the previous deployment tool. It is available as npm package. The optimizer can be seamlessly integrated into JavaScript deployment setups as a webpack plugin or using its JavaScript API.
  • Many types now support parameter objects in their constructors and we added several new type conversions for frequently used types like the ones used in LayoutData. This allows you to write more concise code.


  • The DefaultLabelStyle class got some new features:
    • Support for insets that specify a distance between the label border and the label content.
    • New properties for minimum and maximum size to restrict the size of the label.
    • The ability to quantify the preferred size to avoid unnecessary floating point precision when saving.
    • New static properties to enlarge the preferred size which can be useful when converting graphs between different platforms.
  • The CreateEdgeInputMode class can now create edges in reversed direction, i.e., starting from the target port.
    • The new EdgeDirectionPolicy supports starting creation at the source, at the target, in the last direction, or depending on the port candidate.
    • A configurable ToggleDirectionRecognizer allows changing the edge direction during creation.
  • The new property MoveLabelInputMode.allowUnselected enables moving labels without having to select them first.
  • The MoveInputMode and the CreateEdgeInputMode classes now use Promises in doStartDrag and doStartEdgeCreation. These Promises return either the affected/new items or null if the gesture was canceled.
  • The GraphModelManager class has the new methods raise, lower, toFront and toBack that allow changing the z-order of IModelItems. All new z-order-related methods can also be triggered by the new commands RAISE, LOWER, TO_FRONT and TO_BACK.

    In addition, the GraphEditorInputMode class provides the new methods RaiseSelection, LowerSelection, SelectionToFront and SelectionToBack that change the z-order of all selected IModelItems.

  • The new PortStyleDecorationInstaller class allows the use of an IPortStyle to render the selection, highlight, or focus indicator of ports.


  • The HierarchicLayout class is now able to uniformly distribute ports at group nodes - with a few restrictions. The new property HierarchicLayoutData.uniformPortAssignmentGroups. defines the groups for which the feature should be enabled.
  • The HierarchicLayout class is now able to consider individual crossing costs for edges and for crossing a group node border. These can be defined with the HierarchicLayoutData.edgeCrossingCosts and the HierarchicLayoutData.groupBorderCrossingCosts properties.

    In addition, the new callback method DefaultLayerSequencer.getCrossingCost allows to define an individual crossing cost value for a specific pair of edges when using this sequencer for the HierarchicLayout. In order to easily retrieve the original edge instance when customizing the hierarchic layout, the HierarchicLayout.getOriginalEdge method was added.

  • The LeftRightNodePlacer class now supports layouts with multiple branches. With this feature, subtrees can not only be placed left/right of a single vertical bus, but left/right of multiple vertical buses (the branches). The new property BranchCount allows to configure the number of branches.
  • The tree node placer GridNodePlacer offers the following new features:
    • The placement of the bus for routes to its children can now be configured using the new enumeration BusPlacement. Available placements are LEADING, TRAILING and CENTER.
    • Child sub-trees can be assigned to rows automatically using the new property GridNodePlacer.automaticRowAssignment.
    • The new alignment policy GridNodePlacer.BUS_ALIGNED aligns the root node with the bus.
  • The OrganicLayout class is now able to consider user-specified inertia and stress values for nodes.
  • The OrthogonalLayout class is now able to consider custom crossing and bend costs for edges. They can be specified using the new properties OrthogonalLayoutData.edgeCrossingCosts and OrthogonalLayoutData.edgeBendCosts respectively.
  • The new InteractiveOrganicLayout.compactnessFactor property specifies the compactness of the result. If the graph contains several components, this feature can prevent that the components drift apart.
  • The new GivenCoordinatesStage class changes node locations and edge paths to user-specified values before invoking the core layout algorithm. To specify locations and paths, use the new GivenCoordinatesStageData class.
  • The new GenericPartitionGridSupportStage class offers generic support for partition grid structures.
  • The OrganicLayout class is now able to produce 3D layout results.
  • The new ChannelRoutingTool class brings back the features of the ChannelRouter class that was removed in version 2.0.



  • We identified and changed the (valid) code in the library that was previously broken by certain build optimizers, e.g., the production build of Angular CLI (ng build --prod). Thus, you no longer need to disable it or work around this issue.
  • Incorrect usage of $class before calling lang.util.fixType() on ES6 classes will now throw a TypeInfoError with typeinfo enabled.
  • The new function yFiles.help(object) provides information about the given instance if it is a yFiles class, namely the class name, the implemented interfaces, and the base class.
  • The constructors of most types now support parameter objects, e.g. the GraphBuilder class, label models, layout algorithms, and layout helper classes.
  • Improved performance with the webcomponents polyfill by working around its performance bottlenecks.

Graph and Collections

  • The properties rows and columns of class PartitionGrid are now of type IEnumerable<RowDescriptor> and IEnumerable<ColumnDescriptor> instead of an un-typed YList.
  • Point, Size, Rect, Insets, and IEnumerable now have a static from function that converts objects that are similar in shape to the corresponding type.
  • Each of the methods concat, filter, map, selectMany, takeWhile, and reversed of IEnumerable now return a dynamic enumerable, i.e., if the original enumerable changes the returned enumerable changes, too. Previously, the enumerables returned by map, takeWhile, and reversed were a copy of the state of the original enumerable at the time of invocation.
  • In addition, the IEnumerable interface now provides lazily evaluated prepend, append, flatMap, from, ofRange, ofRepeat, take, reduceRight, skip, skipWhile, groupBy, orderBy, orderByDescending, and distinct methods, similar to what other platforms offer.
  • The List class now supports the methods push, pop, slice, splice, shift, unshift, and fill as known from plain JavaScript Arrays.


  • The type conversion for Color now supports the CSS4 syntax.
  • Adding and removing visualizations from the GraphComponent is now much faster in Chrome when there are more than 12000 elements.
  • If the content of a tooltip changes while it's visible, the new method ToolTip.updateLocation can be called to trigger an update of the location to reflect the changed size.
  • The default CSS rule for the tooltip now sets a large value for the z-index. To override it, set a different value to the yfiles-tooltip class.
  • The TextRenderSupport.measureText method now returns the result as Size. Previously, it returned a Rect.
  • The constructors of CanvasComponent, GraphComponent, and GraphOverviewComponent now throw an error if the specified <div> element is already in use by another component.
  • The CanvasComponent class no longer prevents external drag and drop handling by calling stopPropagation and preventDefault on all drop events. Instead, such an event is now handled by a corresponding (drop) input mode if such an input mode is enabled and responsible for the event's data type.
  • The new property SvgDefsManager.cleanUpDuration sets a soft limit for the runtime of the SvgDefsManager.cleanUpDefs method.
  • A component with zero size now updates its internal size automatically if its container <div> element gets a non-zero size. This can happen for example if the <div> element is not part of the DOM during initialization.
  • GraphOverviewComponent no longer draws nodes and edges that are hidden via VoidNodeStyle and VoidEdgeStyle.
  • NodeStylePortStyleAdapter and PortControlPortStyle now have an offset property that allows to shift the port visualization so that it no longer is centered over the port.
  • The GraphModelManager class has new factory methods for creating the ItemModelManager of each item group.
  • DefaultEdgePathCropper's methods cropEdgePath and cropEdgePathAtArrow have been made virtual.
  • The GraphModelManager.getModelItem method now always returns the IModelItem for an ICanvasObject retrieved for it via getMainCanvasObject. Previously this only worked in all cases for the ICanvasObject retrieved via getCanvasObject.
  • Added the GraphClipboard.getId method to facilitate retrieving the original item from which an item to be pasted has been copied from.
  • The new property GraphClipboard.clipboardContext provides access to the current IGraphClipboardContext during a clipboard operation.
  • The GraphMLIOHandler class now supports reading and writing arbitrary objects at graph level.
  • The properties RectangleIndicatorInstaller.template and OrientedRectangleIndicatorInstaller.template now return always the value that has been set by client code and are not modified by internal code anymore.
  • The type conversion of DashStyle now supports the constant names of DashStyle, like real enums do.
  • The type conversion of Stroke can now create dashed and dotted lines similar to CSS border.
  • The CanvasComponent.exportContent method now always returns an <svg> element with proper size declaration that can be embedded into a document.


  • In Microsoft browsers, the selection gesture is now much faster if selecting many items at once.
  • New overloads for the KeyboardInputMode.addKeyBinding and addRecognizerBinding methods make it easy to register key bindings and key recognizer listeners.
  • The new property CreateEdgeInputMode.showTargetHighlight specifies whether to enable or disable highlighting of potential targets for edge creation. Also, the method updateTargetHighlight has been added to allow for further customization of the highlight.
  • The new properties PortRelocationHandler.showTargetHighlight and PortRelocationHandlerProvider.showTargetHighlight specify whether to enable or disable highlighting of potential targets for edge creation. Also, the method updateHighlight has been added to the PortRelocationHandler class to allow for further customization of the highlight.
  • The new properties PortRelocationHandler.showPortCandidates and PortRelocationHandlerProvider.showPortCandidates specify whether to enable or disable showing port candidates during edge relocation.
  • The GraphEditorInputMode.DeletedItem event provides now context information about the state before the item has been deleted. For example, if a label has been deleted you now can get its old owner.
  • The method GraphEditorInputMode.onDeletedItem is now virtual.
  • Mouse move and drag events now correctly report the changed modifier keys.
  • Snaplines are now infinitely long by default.
  • The classes NodeDropInputMode, LabelDropInputMode, PortDropInputMode, and StripeDropInputMode now also support the simple type name as expected type. This type is set by user code on drag start.
  • The properties GraphInputMode.clickHitTestOrder and GraphInputMode.doubleClickHitTestOrder which are of type GraphItemTypes[] now support type conversion and can be specified as arrays of strings. Each of the string values is converted to GraphItemTypes with the existing type conversion of that enum.
  • The drag and drop behavior when multiple input devices are used simultaneously has improved.


  • Combining multiple LayoutData classes is now easier:
    • The base class LayoutData offers a new method combineWith that combines the current instance with another LayoutData instance.
    • The class CompositeLayoutData has an additional constructor that takes a variable number of LayoutData instances.
  • The classes ItemMapping, ContextItemMapping, IncrementalHintsItemMapping, ItemCollection, DpKeyItemCollection and SingleItem now support type conversion which makes it easier to configure layout data.
  • The new PortAdjustmentPolicy property of LayoutExecutor and LayoutGraphAdapter replaces the previous ImprovePortAssignment boolean property. The new property is of type PortAdjustmentPolicy and offers more options for adjusting the port locations after a layout calculation.
  • The viewport animation of the LayoutExecutor class considers now the value of the LimitFitContentZoom property of the corresponding GraphComponent.

Hierarchic Layout

  • The HierarchicLayout class now also considers critical edge priorities for grouped edges.
  • The HierarchicLayout class now also considers sequence constraints for grouped edges.
  • The HierarchicLayout class now uses the specified layer alignment to align sub-components (see HierarchicLayoutData.subComponents).
  • With HierarchicLayout, the number of edges crossing through group nodes without starting or ending in them when using the default algorithm settings was reduced. Furthermore, the behavior can be customized using the new group node border crossing costs (see property HierarchicLayoutData.groupBorderCrossingCosts).
  • The HierarchicLayout class no longer inserts superfluous bends for edges between group nodes if the input graph contains grouped edges.
  • The layering of HierarchicLayout was improved with respect to the resulting edge lengths if the recursive group layering feature is enabled.
  • The HierarchicLayout class now produces less overlapping elements for graphs with fixed coordinate hints.
  • The HierarchicLayout class now correctly calculates the group node bounds. Previously, the groups' insets were slightly too large (up to one pixel).
  • The HierarchicLayout class now always places a port label in the middle of a node side, if it is the only port on that side. Previously it was only centered if the label was additionally placed on the edge.
  • The HierarchicLayout class now requires less memory for graphs with sequence constraints.

Edge Routing

  • The EdgeRouter now supports edge grouping on both endpoints. Previously, an edge could only be part of either a source or a target group.
  • The EdgeRouter class now generates less edge-edge overlaps and a better distribution of edge segments when the EdgeRouter.maximumDuration is strongly restricted or set to zero, or when the algorithm is stopped via the AbortHandler.stop method.
  • The EdgeRouter class now avoids superfluous bends that were in some cases caused by group nodes with (small) inset values.
  • The path search performance of the EdgeRouter class has been improved for cases where an edge has a strong, external PortConstraint or a fixed, external PortCandidate.
  • The EdgeRouter class now generates a proper routing from a group node border to a port location inside this group node defined by a strong PortConstraint or a fixed PortCandidate. Previously, the route was only calculated to the border and then the last segment was extended without consideration of obstacles and other elements.
  • The new properties abortHandler, sourcePortConstraints, targetPortConstraints, sourcePortCandidates, and targetPortCandidates of ChannelEdgeRouterData facilitate using these features with ChannelEdgeRouter.


  • The performance of the GenericLabeling algorithm and the quality of the label placements were improved.
  • The quality of edge label placement of the GenericLabeling class was improved in case that there are multiple labels with a source or target preference near the same node. They may now be placed further away but avoid undesired overlaps.

Other Layouts

  • The new OrthogonalLayout.preferParallelRoutes property allows for controlling how parallel edges (multi-edges) are routed.
  • New options of the PlaceNodeAtBarycenterStage class allow for specifying the size of affected nodes, considering the grouping structure when calculating the barycenter of nodes as well as removing the bends of edges incident to affected nodes.
  • The TreeReductionStage now marks non-tree edges if an IDataAcceptor is registered with the input graph with key TreeReductionStage.nonTreeEdgeSelectionKey. This way a user is able to query which edges the algorithm determined to be the non-tree edges.
  • The RecursiveGroupLayout class now allows to define a local PartitionGrid structure for each recursively handled group node. See the new property RecursiveGroupLayoutData.groupNodePartitionGrids for details.
  • If the master edge is clipped on the bounds of its source or target, the ParallelEdgeRouter class now always clips the associated parallel edges on that bounds, too.
  • The RemoveCollinearBendsStage.scale property now also allows zero and negative numbers as its value. This makes it possible to internally round coordinates to full integer values for the comparison of bend points and, thus, the stage can be made more fuzzy.
  • The PartitionGridData class has new properties optimizeRowOrder and optimizeColumnOrder to indicate whether or not the order of the rows respectively columns should be chosen automatically to minimize edge lengths.

    In addition, the rowIndices and columnIndices properties of the PartitionGridData class can now also be used in combination with the grid property.

  • The PortCalculator class now considers edge label positions such they are not affected by whether this stage is applied or not (see property LayoutExecutor.portAdjustmentPolicy). Previously, label positions could be changed if the label position was stored relative to the first or last segment or the port.



  • Fixed a bug in the graph implementation that sometimes lead to a runtime that was quadratic in the number of nodes when creating large graphs.
  • Fixed a bug in the UndoEngine class that resulted in memory leaks if the tokens returned by getToken were not disposed when the UndoEngine got cleared.


  • Tooltips can now correctly flow out of the area of the graph component.
  • The TextRenderSupport.addText method now takes into account existing x attribute values of the text element and places the text relatively to this value.
  • The EdgeStyleDecorationInstaller class no longer causes an error when used on edges that attach to other edges.
  • A template style with an unresolved template now creates a visual with an empty SVG <g> element instead of null. This avoids seemingly unrelated errors later on.
  • Fixed a memory leak and possible UI freezes that could occur in certain circumstances when using template styles.
  • If the SvgExport.shouldEncodeImageBase64 property is enabled, images that use data URIs and are not already encoded are now Base64 encoded during export as well.
  • Parsing a GraphML file with a folding edge state with a label without a preferred size no longer throws an error.
  • In rare cases, saving a graph that uses folding to GraphML threw an error.
  • Newline and tab characters in GraphML attribute values were written as-is, but replaced with whitespaces when reading the GraphML back in. These characters are now written as character entity references and correctly restored.
  • The null check for the GridVisualCreator.stroke property works correctly now.
  • Setting an ICanvasObjectGroup to invisible now clears all containing visuals. As a consequence, child visuals are correctly initialized when the group is set to visible again.
  • A grid with crosses using a stroke with a large thickness is now rendered correctly.
  • It is now possible to change only the color of a grid after the grid was initialized.


  • The speed of pinch zooming on certain trackpads is no longer way to fast.
  • Reparenting an expanded group node into a collapsed group node no longer throws an error.
  • With SmartEdgeLabelModel, it was impossible to move a label from the left side of an edge to the right side. Instead, the label stopped at the edge.
  • The promises returned by the label editing methods in GraphEditorInputMode now provide null when canceled instead of the dummy label.
  • The parentInputMode property of the context of the InputModeEventArgs class now contains the input mode which has raised the event. Previously, some input modes erroneously set this property to the containing GraphEditorInputMode or GraphViewerInputMode.
  • The type IGridConstraintProvider cannot be used in lookup methods since it has a generic type parameter. Therefore, new specific interfaces have been added for each item type (for example INodeGridConstraintProvider).
  • The CreateEdgeInputMode class now considers the value of the CanvasComponent.hitTestRadius property when its startOverCandidateOnly property is enabled.
  • GraphClipboard's methods onElementCut and onElementCopied are no longer called for graph items which are not copied themselves but are owners of copied items.
  • When an edge is duplicated using GraphClipboard and a port is newly created during this operation, the new port now gets the old port's style and tag.
  • The visualization of source port candidates by the CreateEdgeInputMode class does not flicker, anymore.
  • The classes MarqueeSelectionInputMode and OverviewInputMode now install new visual templates correctly when they are set through the corresponding template property.

Hierarchic Layout

  • The HierarchicLayout class now correctly considers the group insets for input graphs with nested group nodes. Previously, it sometimes produced too large insets for inner groups.
  • The HierarchicLayout class no longer throws an error if it is wrapped by an instance of RecursiveGroupLayout and the input graph contains layering constraints between elements of different groups.
  • The HierarchicLayout class no longer throws an ArgumentError for some rare cases in incremental layout mode.
  • The HierarchicLayout class now produces shorter, more direct edge routes for edges connecting at a group node and leaving on the the left/right group side. This only affects cases where the relevant group node also contains direct-content edges (see EdgeLayoutDescriptor.directGroupContentEdgeRouting).
  • Self-loop segments generated by the HierarchicLayout class are now shorter and take up less space if possible. Previously, segments were sometimes unnecessarily long even though the minimum length settings allowed shorter segments.
  • The HierarchicLayout class now produces less superfluous crossings if there are same-layer edges with PortConstraints or PortCandidates.
  • The HierarchicLayout class now correctly handles port labels with zero height or width. Previously, such labels may have caused very large distances between some nodes.
  • The HierarchicLayout class sometimes threw an ArgumentError for input graphs that contained incremental elements in combination with groups.
  • The HierarchicLayout class now places sloped segments of grouped octilinear edges such that they are perfectly overlapping each other. Previously, it could happen that segments were slightly displaced with respect to each other.
  • The HierarchicLayout class no longer causes non-orthogonal segments when the input contained port labels in conjunction with edge grouping.
  • The HierarchicLayout class sometimes threw an ArgumentError for input graphs that contained fixed elements in combination with both swimlanes and groups.
  • The HierarchicLayout class now correctly considers fixed nodes with layering constraints. In previous versions there were some rare cases where such inputs caused infinite looping issues.
  • The HierarchicLayout class no longer produces intersections between edges and elements of a sub-component (see HierarchicLayoutData.subComponents). Note that this fix may sometimes cause less compact results within a layer.

Tree Layout

  • The CompactNodePlacer class no longer throws an error for input graphs with specified memento strategies (see TreeLayoutData.compactNodePlacerStrategyMementos or CompactNodePlacer.STRATEGY_MEMENTO_DP_KEY).
  • The CompactNodePlacer class now correctly considers the specified values of the verticalDistance and horizontalDistance properties.
  • The CompactNodePlacer class no longer throws an error for some inputs with specified strategy memento information.
  • The SimpleNodePlacer class no longer produces unnecessarily long horizontal edge segments.

Edge Routing

  • The EdgeRouter class now correctly routes direct content edges with strong port constraints at the group nodes. Previously, the algorithm sometimes produced weird routes for such edges.
  • Fixed a bug in the EdgeRouter class that sometimes caused a non-deterministic behavior.
  • The EdgeRouter class now correctly handles edges with external ports. Previously, such inputs may have caused an error.
  • The EdgeRouter class now correctly groups edges associated with equal group IDs that have a different object ID.
  • A rare error that was triggered by the EdgeRouter class during routing when a grid is defined on which edges need to be routed is now fixed.
  • The EdgeRouter class now avoids unnecessary bends in cases that contain PortCandidates with fixed offsets (or strong PortConstraints) where the fixed port locations have a very similar x- or y-coordinate such that the path must consist of three segments with a single, very short middle segment. Previously, five segments in total were generated.
  • The PolylineLayoutStage class no longer generates overlaps between sloped, polyline segments created by the stage and unrelated other obstacles (e.g. nodes).
  • Fixed a rare error that was triggered by the EdgeRouter class during routing in cases where the input contained grouped edges.
  • The EdgeRouter class no longer throws an error if the EdgeRouter.polylineRouting property is enabled and the input contains fixed, grouped edges.
  • The EdgeRouter class now considers the correct NodeHalo associated with the target node when handling the minimum last segment length setting. Previously it incorrectly considered the halo of the source node which could lead to unnecessarily long or too short last segments.
  • The EdgeRouter class now correctly considers intersections between edges and labels of fixed edges if property considerEdgeLabels is enabled.
  • The EdgeRouter class no longer throws an error during routing in cases where the source or target node is covered by obstacles (i.e. by other nodes or labels).
  • The EdgeRouter class now correctly considers intermediate routing points when using the polyline routing style. Previously, it could happen that intermediate points were not part of the final polyline edge path.
  • The EdgeRouter class no longer considers all PortCandidates with multiple directions as fixed PortCandidates.
  • Fixed two issues that induced the violation of a PortCandidate with fixed offsets (or a strong PortConstraint) by the EdgeRouter class. The first was only triggered for constraints at the target side and only when the target node was additionally partly or fully covered by other obstacles (e.g. node labels). The second issue appeared in cases with the source and target node fully overlapping (e.g. an edge from a group to a child node).
  • Improved the path search performance of the EdgeRouter class for cases where a large number of fixed and overlapping edge segments exist. Previously, the search could become very slow in such scenarios.
  • The EdgeRouter class now correctly handles cases where the maximum duration is exceeded and where previously an error was triggered.
  • Fixed a StackOverflowError in EdgeRouter.


  • The GenericLabeling class now produces better results for edge labels that have a preferred distance to the edge (PreferredPlacementDescriptor.distanceToEdge) and at the same time multiple sideOfEdge preferences (e.g. left of edge and on the edge). Previously, the algorithm sometimes violated the preferred distance even though it would have been possible to keep it.
  • The GenericLabeling class now correctly places labels of direct content edges (edges that directly connect a group node with a descendant, without leaving the group) with a free edge label model.
  • The GenericLabeling class no longer calculates wrong label profit values for some edge labels. Previously, edges that had a PreferredPlacementDescriptor were sometimes affected.
  • The GenericLabeling class now always prefers LabelCandidates with higher profit values over others with lower profit. Previously, this sometimes happened even though both candidates did not intersect with other elements.
  • The GenericLabeling class no longer assumes that all LabelCandidates associated to a label have the same size. Previously, this caused unexpected labeling results if custom candidates with different sizes were given.
  • We fixed a rare bug in the GenericLabeling that may have caused an ArgumentError for some input graphs that contain edges with zero length segments and labels associated with a free edge label model.

Other Layout Styles

  • The OrthogonalLayout class no longer throws an error when property OrthogonalLayout.uniformPortAssignment is enabled and the input contains parallel edges.
  • The OrthogonalLayout class no longer causes an error for some input graphs when property faceMaximization is enabled.
  • The OrthogonalLayout class no longer runs into an infinite loop for some input graphs that are tree structures with mixed edge directedness. Note that the problem only occurred if property OrthogonalLayout.treeStyle is not set to TreeLayoutStyle.NONE.
  • The OrganicLayout class no longer throws an error when using CycleSubstructureStyle.CIRCULAR and arranging a cycle structure where at least one cycle node is also connected to a group node outside the cycle.
  • The OrganicLayout class now produces deterministic results for group nodes if its property deterministic is enabled.
  • When using RecursiveGroupLayout, the values of the properties computedWidth, computedHeight and computedPosition of the classes ColumnDescriptor and RowDescriptor are now correctly set after the layout if EdgeRouter is the corresponding interEdgeRouter.
  • The ComponentLayout class now correctly handles input graphs with user-specified components that contain nodes with null as their component ID (see property ComponentLayoutData.componentIds). Previously, such inputs may have caused an error.
  • The SeriesParallelLayout class now correctly handles input graphs with groups that only contain disconnected nodes. Previously, such inputs caused an error.
  • The PartialLayout class now correctly considers the specified PortCandidates during orthogonal or octilinear routing of edges.
  • The PartialLayout class does no longer reduce the size of fixed group nodes if the option PartialLayout.resizeFixedGroups is disabled.
  • The OrganicRemoveOverlapsStage no longer produces infinite loops in some rare cases.
  • Fixed a bug in YGraphAdapter that could trigger an error when boolean, integer or double values were requested from registered IMapper but no value had been set beforehand.
  • The GraphStructureAnalyzer.hasMultipleEdges method now returns the correct result for input graphs with self-loops.
  • The PathAlgorithm.findAllChains method now correctly calculates the chains for input graphs with cycles.
  • The BfsAlgorithm.getLayers method now correctly stores the layer indices in the specified INodeMap. Previously, the maximum layer index stored in the map exceeded the number of returned layers.

Incompatible Changes

See the Migration Guide document (of your local yFiles for HTML installation) for more details and advice on migrating.

Incompatible API Changes

  • In the ECMAScript module variant of the library, the names of some types have been changed to make it more clear to which layout style they belong. The new names include a 'Layout' part, for example HierarchicLayeringStrategy is now HierarchicLayoutLayeringStrategy.

    In addition, the existing analysis algorithm classes got a Algorithm postfix since the canonical short names are now used by the new IGraph-based analysis classes and YMap has been renamed to HashMap. See the migration guide for a complete list of these changes.

  • The IEnumerable.selectMany method has been renamed to IEnumerable.flatMap.
  • The GraphOverviewComponent.svgRendering property has been removed in favor of the new GraphOverviewComponent.renderMode property.
  • The IGraph.portLabels property replaces the getPortLabels method. The similar API members for other item types already are properties.
  • The methods ITable.getDecorator and ITable.getAccumulativeInsets have been replaced by the corresponding properties ITable.decorator and ITable.accumulativeInsets.
  • The resource keys of the SnapLine class have been removed. They are replaced by the new SnapLineVisualizationType enum.
  • The TextRenderSupport.measureText method now supports the parameters maximumSize and textWrapping to measure the size of wrapped text. The method parameter order was changed to fit the TextRenderSupport.addText method.

    In addition, the TextRenderSupport.measureText method now returns the result as Size. Previously, it returned a Rect.

  • The MouseHoverInputMode.toolTip property was removed to support separate fade out animations for tooltips. To specify a tooltip overwrite the MouseHoverInputMode.createToolTip method instead.

    In addition, some properties of the ToolTip class have been made read-only because changes to these properties had no effect anyway.

  • The improvePortAssignment boolean property of LayoutExecutor and LayoutGraphAdapter has been replaced by the portAdjustmentPolicy property.
  • SingleItemCollection's item property has been pulled up to ItemCollection. Class SingleItemCollection has been removed, its usages have been replaced by ItemCollection.
  • The following properties of specific layout data types now have a name with the correct plural or singular usage.
    • HierarchicLayoutData.alternativeEdgePath has been renamed to alternativeEdgePaths.
    • TreeLayoutData.leftRightPlacersLeftNodes has been renamed to leftRightNodePlacerLeftNodes.
    • TreeLayoutData.delegatingNodePlacersPrimaryNodes has been renamed to delegatingNodePlacerPrimaryNodes.
    • FixNodeLayoutData.fixedNode has been renamed to fixedNodes.
  • The type of the properties BalloonLayoutData.treeRoot and TreeLayoutData.treeRoot has been changed to SingleItem<INode>.
  • The property HierarchicLayoutData.alternativeEdgePaths now expects IEnumerable<IPoint> instead of YPointPath as mapped values.
  • The property HierarchicLayoutData.alternativeGroupBounds now expects IRectangle instead of YRectangle as mapped values.
  • The properties rows and columns of class PartitionGrid are now of type IEnumerable<RowDescriptor> and IEnumerable<ColumnDescriptor> instead of an un-typed YList.
  • The properties sourceGroups and targetGroups of RadialLayoutData have been removed since edge grouping is not supported by the RadialLayout class.
  • The PenaltySettings.invalidEdgeGroupingPenalty property has been removed. If edge groups are defined, the EdgeRouter class now always considers them. Therefore, this setting no longer applies.
  • Implementing yFiles interfaces in TypeScript now requires to specify the intersection type of all implemented interfaces. See the Developer's Guide for an example.
  • The BfsDirection enum has been renamed to TraversalDirection since it is now used for other graph traversal algorithms, too.

Changes of Default Behavior

  • The SimplexNodePlacer.barycenterMode property is now enabled by default. Thus, the HierarchicLayout class with default settings now produces different (usually more symmetric) layouts.
  • The CanvasComponent class no longer calls preventDefault on all 'drop' events. Instead, this is now called only for events for which an enabled and responsible (drop) input mode exists.
  • The methods map, takeWhile, and reversed of IEnumerable now return a dynamic enumerable, i.e., if the original enumerable changes, the returned enumerable changes, too. Use the toArray or toList method if you want to store the current state of an enumerable.
  • GraphClipboard's methods onElementCut and onElementCopied are no longer called for graph items which are not copied themselves but are owners of copied items. As a consequence, the methods cut and copy of the IClipboardHelper implementations of these elements are no longer called, either.
  • The Promise returned from the GraphEditorInputMode.editLabel method now resolves with null if the edit was canceled or did not validate successfully.
  • The default tooltip of the ToolTipQueryEventArgs class is now set to null. Thus, the tooltip is not displayed when the event is handled without setting the tooltip content.
  • The properties RectangleIndicatorInstaller.template and OrientedRectangleIndicatorInstaller.template now return always the value that has been set by client code and are not modified by internal code anymore.
  • Newline and tab characters in GraphML attribute values are now written as character entity references instead of writing actual newline or tab characters.
  • The SvgExport.shouldEncodeImageBase64 method is now only called for images that are not already Base64 encoded.
  • The GroupingSupport class no longer throws an ArgumentError if there is a node without associated ID. Instead the class uses the node itself as ID.
  • The HierarchicLayout class now uses a higher crossing cost for group node borders. To specify custom values, use the property HierarchicLayoutData.groupBorderCrossingCosts.
  • If the master edge is clipped on the bounds of its source or target, the ParallelEdgeRouter class now always clips the associated parallel edges on that bounds, too.
  • The default value of the property GridNodePlacer.rootAlignment was changed to GridNodePlacer.BUS_ALIGNED from RotatableNodePlacerBase.RootAlignment.TRAILING.

Minor Incompatible Changes

  • The CanvasComponent.exportContent method now always returns an <svg> element instead of either an SVG group <g> element for SVG-only rendering and a <div> element with <canvas> and <svg> children otherwise.
  • The method LayoutData.apply is now protected instead of public.
  • The YList.subList method was removed since it was not implemented at all and is not used by the library.
  • The clone methods of the geometric types Point, Rect, Size, and Insets was removed since these types are immutable and the methods just returned this.
  • The classes GeneralPath and GeneralPathCursor are now sealed.
  • The protected DefaultLabelStyleRenderer.measureText method got an additional parameter for the maximum size.
  • The following changes regarding the expert API related to the EdgeRouter class were made:
    • The first parameter of the constructors in class SegmentInfoBase is now of type object instead of Edge. The provided type should be either PathRequest for affected edges or Edge for non-affected, fixed ones. Furthermore, the property SegmentInfoBase.edge has been removed as the info is not necessarily associated with an edge anymore.
    • Similarly, the first parameter of the constructor in class EdgeCellInfo is now of type Object instead of Edge. The provided type should be either PathRequest for affected edges or Edge for non-affected, fixed ones.
    • The constructor of class EdgeInfo now additionally takes a parameter of type Edge.
    • The parameter of type Edge from the constructor of Path as well as the respective property were removed. A path is now not necessarily associated with an edge but only with the newly introduced PathRequest.
    • The method PathSearchResult.getEdgeInfo was removed.