ServicesDownloadsNewsCompanyContact

yFiles for HTML

About yFiles for HTML

yFiles for HTML brings the proven power and ease of yFiles diagramming to your cutting-edge HTML5 applications.

yFiles for HTML has almost all functionality known from our diagramming libraries for the .NET platform. It contains UI controls for viewing and editing diagrams and our layout algorithms for automatically arranging complex graphs and networks at the click of a button.

Can't wait to start graphing in HTML? Evaluate yFiles for HTML 1.1!

For a feature overview, see also our demo applications.
In the release notes you will find all feature enhancements of the latest version.

Unique features of yFiles for HTML:

  • 100% client-side graph editing in HTML5-capable browsers—no server component or browser plugin required
  • leverages both SVG and HTML5 Canvas
  • a pure JavaScript solution that works seamlessly with GWT, Dojo, and other frameworks
  • optional server components (Java/.NET) for layout and computationally-intensive tasks

Demo Applications

The demo applications showcase the visualization and interaction capabilities of the yFiles for HTML diagramming class library.

Technical requirements: an HTML5-capable browser with adequate SVG support (see table)

Organization Chart

The Organization Chart demo application shows how to create an interactive organization chart with data loaded from XML.

Modules

The Modules demo application lets you experience intuitive diagram creation, editing capabilities, and automatic diagram layout:

  • Add, delete, move, and label nodes and edges to create a diagram
  • Interact using zoom and pan, undo/redo, copy/paste, and more
  • Test the different automatic layout algorithms

Graph Viewer

The Graph Viewer demo application demonstrates user interaction possibilities such as zooming, panning, overview, and toggling additional node information.

Collapsible Tree

The Collapsible Tree demo application loads a tree with many nodes, whose branches can be expanded and collapsed. The nodes are rendered with custom icons that indicate their current state. After an expand or collapse operation, the graph is automatically layed out.

Shortest Path

The Shortest Path demo application presents the shortest path search graph analysis algorithm.

Table Editor

The Table Editor demo application demonstrates out-of-the-box support for table nodes that model pools in business process diagrams, for example:

  • Interaction: create and modify the table structure via drag'n'drop, easily re-arrange rows and columns by dragging their headers, resize them by dragging their borders
  • Auto-Layout: calculate a clear routing and placement of the table contents with just the press of a button

Custom Styles

The Custom Styles demo application shows how to easily change the look and feel of nodes, edges, and labels.

Grouped Graph

The Grouped Graph demo application presents the grouping support of yFiles for HTML.

Group nodes can be collapsed and expanded. Whenever this happens, a new incremental layout is calculated and the graph is redrawn.

Documentation

Commercial Information

Learn more about the terms and conditions for the commercial or academic use of the yFiles for HTML library:

For ordering information and prices, please contact: sales@yworks.com.

Evaluate yFiles for HTML

You can test and experience the yFiles for HTML library with a time-limited fully functional evaluation version.