documentationfor yFiles for HTML 3.0.0.3

Introduction yFiles for HTML Features Getting Started Demos and Tutorials Working with yFiles The Graph Model Displaying the Graph Visualizing Graph Elements User Interaction Graph I/O and Printing Automatic Layouts Automatic Layout Features Graph Analysis Creating a Graph from Business Data Customizing the Graph Customizing the View Customizing Styles Customizing User Interaction Customizing Graph I/O Customizing Automatic Layout General Concepts for Customization Advanced Concepts Deployment Known Issues and Workarounds Glossary Migration Guide

Use arrow keys to navigate

Introduction Graphs and Diagrams About yFiles for HTML Technical Requirements During Development Deployed Applications Supported Browsers Server-Side Requirements yFiles for HTML Product Types About this Developer’s Guide yFiles for HTML Features Getting Started Setting up Your Development Environment Creating a Project Using the npm Package Including the License Creating a Web Application TypeScript Support Runtime Developer Tools Creating a Simple Web Application Creating the GUI Creating Graph Elements User Interaction Setting Styles Placing Graph Elements Automatic Graph Layout Loading and Saving Graphs Next Steps Demos and Tutorials Running the Demos The Demo Server Working with yFiles Working with the yFiles npm Module Installing from the Local Filesystem Installing from a Remote Filesystem Installing from a Local or Private npm Registry Installing from a Local git Server The Version Number of the yFiles npm Package Development Mode Setup Type Checking Graph Inspection and Status Information Custom Formatters TypeScript Augmenting the tag property Tagged and typed visuals Interfaces Implementing Interfaces Option Overloads Extra Properties in Option Overloads Automatic Type Conversion Enums Colors, Fills, and Strokes Fonts Rectangles, Points, Sizes, and Insets Arrows Cursors TimeSpan Enumerables, Collections, and Lists ItemMapping, ItemCollection, SingleItem IMapper The Graph Model IGraph Nodes Edges Bends Self-loops Edge to Edge Connections Labels Ports Grouping Nodes Traversing the Hierarchy Adjusting the Size of a Group Node Setting Defaults for New Items Finding Adjacent Nodes and Edges Storing Business Data for Graph Elements Displaying the Graph The Component for Displaying Graphs Managing the View Item Layout Nodes Edges Labels Ports Selection, Focus, and Highlight Component for Graph Outline Visualizing Graph Elements Node Styles Predefined Shapes Images Polygons Rectangles Arrow Shapes Groups and Folders Custom Styles Invisible Nodes Edge Styles PolylineEdgeStyle BezierEdgeStyle ArcEdgeStyle BridgeEdgeStyle ArrowEdgeStyle Custom Styles Invisible Edges Decorations: Arrows Decorations: Bridges Label Styles Default Label Style IconLabelStyle Using a node style as label background Custom Styles Invisible Labels Port Styles Predefined Shapes Using a node style as port visualization Custom Styles Invisible Ports CSS Item Styles CSS Item Style Synchronize fill and stroke with currentColor CSS Item Style Transitions Exporting Graph Items Styled by CSS No CSS transform Changes Allowed Caveats User Interaction Editing Graphs Non-Editable Graphs Supported User Interactions Zooming, Panning, and Scrolling Creating Nodes Creating Edges Reconnecting Edges Adding and Editing Labels Creating Bends Deleting Items Moving Items Resizing Nodes Grouping Keyboard Input Mouse Clicks, Taps, Stylus Clicks Selection Focus Tooltips Context Menus Drag and Drop Clipboard Undo and Redo Snapping Orthogonal Edge Editing List of Keyboard Shortcuts Graph I/O and Printing Loading and Saving Graphs JSON GraphML Image Export Bitmap Export PDF Export VSDX Export Printing Automatic Layouts Applying an Automatic Layout Layout Data Configuring the Layout Executor Using Asynchronous Layout Calculation Migrating from Synchronous to Asynchronous Layout Calculation Aborting Layout Calculations Edge-to-Edge Connections Circular Layout Basic Options Partition Arrangement Options Edge Routing Policy Tree Arrangement Options Labeling Node Margins Edge Bundling Optimizing Compactness Returning Circle Indices Layout of Star Substructures Clear and Fill Area Layout Input Basic Options Compact Disk Layout Minimum Node Distance From-Sketch Node Types Node Margins Labeling Edge Routing Relevant Classes Basic Options Advanced Options Labeling Grouped Graphs Incremental Layout Port Candidates Edge Grouping Bus-style routing Tables Node Margins Hierarchical Layout Terminology Application Areas Relevant Classes Basic Options Labeling Grouped Graphs Non-incremental Layout Incremental Layout Layer Constraints Sequence Constraints Layer Assignment with Undirected Edges Custom Subcomponents Port Candidates Edge Grouping Grid Components Grid Spacing Tables and Swimlanes Tabular Groups Critical Paths Edge Crossing Costs Node Margins Multi-page Layout Terminology Relevant Classes Running a Multi-Page Layout Processing the Result Organic Layout Application Areas Relevant Classes Basic Options Labeling Grouped Graphs Incremental Layout Tables Substructures Node Margins Edge Orientation Edge Lengths Constraints Interactive Organic Layout Organic Edge Routing Basic Options Orthogonal Layout Basic Options Labeling Grouped Graphs Substructure Support Oriented Edge Drawings Partial Layout Relevant Classes Subgraph Components Basic Options Edge Routing Options Grouped Graphs Radial Layout Terminology Relevant Classes Basic Options Labeling Node Margins Edge Bundling Radial Group Layout Basic Options Collapse Groups Labeling Edge Bundling From-Sketch Node Margins Series-parallel Layout Terminology Relevant Classes Basic Options Labeling Grouped Graphs Incremental Layout Handling Non-Series-parallel Graphs Tabular Layout Relation to Layout Grid Layout Modes Basic Options Tree Layouts Tree Layout Radial Tree Layout Tree Layouts in Non-Tree Graphs Tree Map Layout Terminology Input Basic Options Automatic Layout Features Edge and Port Grouping Edge Bundling Configuration Sample Layout Grouped Graphs Incremental Layout Label Placement Labeling Scenarios: Generic vs. Integrated Labeling Defining Valid Positions Generic Labeling Integrated Labeling Layout Stages The Layout Stage Concept Layout of Unconnected Components Wrapping Wide or High Layouts Alignment Stage Node Margins Node Types Hierarchical Layout Organic Layout Orthogonal Layout Tree Layout Circular Layout Component Layout Radial Tree Layout Radial Layout Port Placement Automatic Port Handling by LayoutExecutor Restricting Port Locations Tables and Swimlanes Graph Analysis Using Graph Analysis Analyzing Only Part of a Graph Centrality Measures Clustering BiconnectedComponent KMeans EdgeBetweenness LouvainModularity LabelPropagation Hierarchical Connectivity Connected Components Independent Sets K-Core Components Paths Shortest Path Reachability Trees Tree Characteristics Querying Tree Structures Finding trees Example: Create a Directed Tree Network Flows Maximum Flow Minimum Cost Flow Transitivity Node Aggregation Intersections Considered Item Types Working with the Result Independent Items Considering the Actual Item Geometry Creating a Graph from Business Data Common Features Binding the Business Data to the Graph Builders Configuring the Visual Appearance of Graph Items Creating And Updating Graphs Grouping GraphBuilder TreeBuilder AdjacencyGraphBuilder Specifying Adjacent Nodes Directly Using Creators Without a Builder Customizing the Graph Decorating Graph Elements Setting a Decoration Removing a Decoration Examples Associating Data with Graph Elements Reacting to Graph Changes Reacting to Element Creation Reacting to Element Removal Reacting to Grouping Related Changes Reacting to Other Structural Changes Reacting to Tag Changes Reacting to Layout and Geometry Changes Reacting to Other Property Changes Copying Elements of a Graph Customizing the View The Scene Graph The IVisualCreator Visualizing Arbitrary Objects Changing the Z-order General Thoughts The Default Z-order of Edges and Groups The Z-order of Graph Elements Re-ordering Model Items Z-order Commands The Z-order of Indicators Completely Customize the Z-order Styling Selection, Focus, and Highlight Using Different Theme Colors for the Indicators Using CSS Styling for the Indicators Styling of Selection, Focus and Highlight Zoom-invariant rendering Custom Item Indication Model Manager Application Resources Custom Decoration Renderer Adding an Additional Indicator Building Indicators into your Styles Restricting the Viewport Customizing the Graph Outline GraphOverviewRenderer Second GraphComponent Viewport Rectangle Animations Predefined Animations Animation Framework Support for Colors and Fills Themes Using a Custom Theme Selection Focus Highlight Lasso and Marquee Overview Handles Label Candidates Port Candidates CSS Styling Default Look and Feel Styling of Scrollbars Styling of Handles Styling of Port Candidates Styling of Marquee Rectangle Styling of Lasso Selection Styling of Overview Viewport Rectangle Styling of Table Indicators Styling Snap References Styling the Grid Visual Styling of Selection, Focus, and Highlight Indicators Styling of the Label Position Suggestions Styling of the Label Input Element Styling of the Tooltip Element Customizing Styles Basic Style Implementation Predefined Visuals Implementing the IVisualCreator Interface Efficient Style Implementation Delegating Styles Composing Styles Refining a Style’s Behavior IHitTestable IMarqueeTestable ILassoTestable IBoundsProvider IVisibilityTestable IShapeGeometry IPathGeometry Separating Style and Renderer The Preferred Label Size Using Data Binding in Node Styles Using Node Styles for Labels and Ports Customizing Arrows Customizing the Standard Arrows Creating a Custom Arrow Customizing Bridges Crossing Styles Crossing Determination Custom Obstacle Provider Bridges for Custom Edge Styles Customizing User Interaction Adding Custom Input Modes Coordinating Different Kinds of User Interactions Priorities and Exclusiveness Event Recognizers Native Listeners for Custom Styles Customizing Cursors Zooming, Panning, and Scrolling Mouse Wheel and Scroll Bars Panning Creating Nodes Creating Edges Changing the Appearance of the Edge to be Created Port Candidates and Port Candidate Providers Showing Port Candidates while Creating Edges Creating Edge-to-Edge Connections Example: Triggering Edge Creation Gesture Programmatically Example: Starting Edge Creation Inside the Source Node Example: Configuring CreateEdgeInputMode to Create Subtrees Reconnecting Edges Providing Port Candidates Customizing the Reconnection Gesture Adding and Editing Labels Validating Label Text The Actual Text Editor: TextEditorInputMode CSS Transition or Animation for the Input Element The IEditLabelHelper Deleting Items Moving Items Moving Labels Resizing Nodes IReshapeHandleProvider IHandleProvider IHandle IReshapeHandler INodeSizeConstraintProvider Grouping Keyboard Input Pointer Handling Selection Marquee selection Lasso selection Single Item Selection Tooltips Styling of the Tooltip Element CSS Transition or Animation Integrate Custom Components Context Menus Drag and Drop General Drag and Drop Support Drag and Drop of Graph Items Drag and Drop of INodes Drag and Drop of ILabels Drag and Drop of IPorts Undo and Redo Custom Undo Units Built-in Undo Units Merging Changes into One Undo Unit Remembering States for Undo (Memento Design Pattern)Clipboard Defining Items to be Copied and Pasted Customizing the Items to be Cut, Copied, Pasted, or Duplicated Customizations for Paste Customizing the Clipboard for Individual Items: IClipboardHelper Snapping Adding Custom Snap References Adding Custom Snap Results Orthogonal Edge Editing IOrthogonalEdgeHelper Resource Keys Customizing String Resources Resources Defaults Commands Custom Command Bindings Commands and HTML Widgets Customizing Graph I/O The GraphML File Format The GraphMLIOHandler Adding Custom Data for Serialization Automatically Serialized Types Map the Namespace of Your Custom Types Serializing Complex Types Markup Extension Serialization Event Listeners Serialization with Symbolic Names Low-level Customizations Implementing Custom I/O Handlers Registering Custom I/O Handlers Specifying Additional Type Information Additional Information for Custom Types Additional Information for Properties Customizing Automatic Layout The LayoutGraph API - Part 1: Structure Creating and Removing Graph Elements Group Nodes Hiding Graph Elements Binding Data to Graph Elements Time Complexity The LayoutGraph API - Part 2: Layout Nodes Edges Labels Applying a Layout on LayoutGraph Writing a Custom Layout Stage Common Purposes of a Layout Stage Example: Decorating a Graph Example: Pre-Processing Providing Data for Custom Layout Stages Customizing Table Layout Customizing Graph Analysis Structure Graph Adapter Depth-First Search General Concepts for Customization Configuration Properties Logic Abstraction Service Locator Pattern: Lookup Using Lookup The Lookup Chain Examples for Lookup Decoration Events Advanced Concepts Filtering: Hiding Graph Elements Folding Working with Folding Styles for Folding User Interaction Advanced Insights on Folding Working with Master and View The State of Folded Elements Tables Concepts Table Model Visual Representation User Interaction Automatic Layout Tutorial Demo Code Large Graph Performance General Considerations Styles Virtualization Selections Static Graphs WebGL2 Rendering Enabling WebGL Rendering WebGL Styles Directing Attention with Animations Level of Detail Rendering WebGL Support WebGL Troubleshooting HTML Rendering Using HtmlVisual When should I use HTML rendering?When should I avoid HTML rendering?Canvas Rendering The Canvas Rendering API When should I use Canvas rendering?When should I avoid Canvas rendering?Using Projections Understanding Projections Drawing Elements in World Coordinates Drawing Elements in Intermediate Coordinates Drawing Elements in View Coordinates Interacting with Projected Graphs Scrollbars and Content Fitting Image Export Printing Unsupported Functionality Deployment Licensing General Concept Registering the License Development vs. Distribution License Licenses in Evaluation Packages Licenses for Purchased Packages Resolving License Errors Redistributables Redistributables in Evaluation Packages Redistributables in Purchased Packages Deployment of a Development Mode Library yWorks Optimizer Good Practices for Deployment HTTP Compression Toolkit-specific Advice Vite Webpack Angular CLI Vue.js React Known Issues and Workarounds Known Issues of the yFiles Library Multilevel inheritance of JavaScript classes, yFiles class framework Content-Security-Policy (CSP)Graph panning and drag operations lag, Chrome Missing visualizations when using SvgExport.encodeImagesBase64, Firefox Incorrect positioning of exported HtmlVisuals, Safari Label text flickers or looks fragmented during zooming, Safari Unexpected mousemove events in Meta Quest browser Broken Web Components 1.0 implementation, Safari 10 and newer WebGL2 Rendering is not supported in old browsers WebGLGroupNodeStyle and WebGLBridgeEdgeStyle are not rendered on iPad 6 WebGLPolylineEdgeStyle cannot render smooth bends, Android WebGL2 items are sometimes invisible on Safari 14 Label text may occasionally fail to render when using WebGL2 rendering.Fast zooming and scrolling on precision touchpads, Firefox Known Vulnerabilities Known Issues of Third-party Toolkits Possible Performance Issues in Large Angular Applications UglifyJS May Corrupt Unicode Characters in the Library Code Known Issues of the Demos Unresponsive Script Warning Grid Visualization Operation Not Permitted During Installation on macOS Glossary Migration Guide Migrating from an Evaluation Version to a Distribution Version Migration Tool Migration from an Older Version to a More Recent Version Migrating to 3.0 from 2.6 New RenderTree and IObjectRenderer API Events and Event Registration Mouse and Touch Events User Interaction Changes Theming Migrating WebGL2 Styles Clipboard API Folding API GraphML Noteworthy Layout Changes Layout Data Layout Scope and Affected Items Ports in Layout Layout Duration and Aborting Layout Stages and Multi-Stage Layouts New Layout Graph API Labeling Binding Data to a LayoutGraph Grouping in the LayoutGraph Analysis Algorithms on the LayoutGraph Hierarchical Layout Organic Layout Orthogonal Layout Tree Layout Radial Tree Layout (formerly: Balloon Layout)Radial Layout Radial Group Layout (formerly: Cactus Group Layout)Circular Layout Compact Disk Layout Tabular Layout Series-parallel Layout Edge Router Organic Edge Router Generic Labeling Partial Layout Clear Area Layout Fill Area Layout Multi-Page Layout Migrating to 2.6 from 2.5 API Changes Changes of Default Behavior Removed unused methods and properties Deprecations Migrating to 2.5 from 2.4 Changes in the library files Clickable Handles and Handle Behavior ModelManagers must be installed now Interactive node and edge creation can be asynchronous WebGL2 Other API Changes Changes of Default Behavior Removed unused methods and properties Deprecations Migrating to 2.4 from 2.3 Changed Text Clipping Behavior Renamed Types and API Members Removed API Members Other API Changes Changes of Default Behavior Deprecations Migrating to 2.3 from 2.2 yfiles-typeinfo.js and Development Mode The New Graph Builder Classes Changes When using a Projection Renamed Types and API Members Removed API Members Other API Changes Changes of Default Behavior Deprecations Migrating to 2.2 from 2.1 Examples License File Changes Renamed API Members Renamed Types Renamed API Members in ECMAScript Modules Removed API Members Other API Changes Migrating to 2.1 from 2.0.1 Changed Module Dependencies Renamed API Members Removed API Members Deprecated API Members Other API Changes TypeScript Definition File Changes Migrating to 2.0.1 from 2.0 Renamed API Members Removed API Members Other API Changes Behavior Changes

Welcome to the yFiles for HTML Documentation

Search the API and Documentation?

More search results (Press enter)

Quick Links

Getting Started

Developer's
Guide

Demos and
Tutorials

PRODUCTS

yFiles
yFiles for HTML
yFiles for Java
yFiles for JavaFX
yFiles.NET
yFiles WPF
yEd
yEd Live

yWORKS

Services
Blog
Downloads
References
Jobs
Contact

FOLLOW US

Copyright © 2025 yWorks GmbH

Legal Disclosure
Terms of Use
Privacy Policy