Diagramming in the Browser

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

Our JavaScript / HTML5 solution features advanced UI components for drawing, viewing, and editing diagrams and unequaled graph layout algorithms for automatically arranging complex diagrams at the click of a button.

New major version yFiles for HTML 2.0!

Improved, concise API, ECMAScript 6 and TypeScript 2 support, GWT support, new hierarchic layout features, edge bundling and a ton more. Evaluate now!

Features

yFiles for HTML brings the features of the yFiles product family to the web platform. It features UI components for intuitive user interaction with diagrams and the automatic graph layout algorithms and graph analysis algorithms.

Unique features of yFiles for HTML

  • 100% client-side graph drawing and graph editing in HTML5-capable browsers— no server component or browser plugin required.
  • Leverages both SVG and HTML5 Canvas to draw diagrams.
  • Optional server components (Java / .NET) for automatic diagram layout and computationally-intensive tasks.
  • Optional GWT overlay for the development with GWT Web Toolkit (GWT).
  • A pure JavaScript solution that works seamlessly with AngularJS 1 and Angular 2, ReactJS, and basically any other JavaScript framework.
  • Requires ECMAScript 5, supports the new features of ECMAScript 6.
  • Direct TypeScript support with TypeScript bindings.
  • Extensive developer support with Developer's Guide and API documentation viewer, and with debug support, code completion, and quick API lookup in IDEs.

yFiles for HTML GWT Overlay

Add yFiles diagramming to your GWT-based web application! The yFiles for HTML GWT Overlay provides an API wrapper which integrates the yFiles for HTML JavaScript library with GWT.

This extension brings overlay classes and widgets which enable GWT developers to use yFiles for HTML without the need to write native JavaScript.
The yFiles for HTML functionality can be accessed using Java code and the yFiles for HTML UI controls can be integrated in a GWT UI just like any other GWT widget.

Live Demos

The demo applications showcase the visualization and interaction capabilities of the yFiles for HTML diagramming software library.
See the versatility of the library and the possibilities it offers for your own applications!

Graph Editor

The Graph Editor demo application presents the diagram editing and interaction capabilities of yFiles for HTML:
  • Add, delete, move, and label nodes and edges to create a graph
  • Interact using zoom and pan, undo/redo, copy/paste, and more
  • Load and save graphs from GraphML

Layout Styles

The Layout Styles demo showcases the various automatic diagram layout algorithms of yFiles, including hierarchic, organic, orthogonal, tree, circular and balloon styles. Additionally, it presents the powerful and highly customizable graph editing capabilities of the graph component.

Graph Viewer

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

Organization Chart

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

Collapsible Tree

The Collapsible Tree demo application displays a tree-like structure that can be expanded and collapsed interactively. The nodes are rendered with custom icons that indicate their current state. After an expand or collapse operation, the graph is redrawn using a configurable layout algorithm.

Grouped Graph

The Grouped Graph demo application presents the grouping support of yFiles for HTML. Group nodes can be collapsed or expanded. Additionally, when a group node is expanded or collapsed, a new incremental layout is calculated and the graph is redrawn.

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

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

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

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

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

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

Extensive BPMN Demo Application

See also the Business Process Diagrams demo application with high-quality BPM visualizations and specialized automatic layout for BPMN.
This sample application allows you to create and edit Business Process Diagrams, and to arrange them with the specialized BPMN layout algorithm.

Developer Information

Technical Requirements

Applications based on yFiles for HTML require an HTML5-capable browser with adequate SVG support (see table).

Commercial Information

Need help?

Get in touch with our sales team to learn more about the terms and conditions for the commercial or academic use of the yFiles for HTML library.

Evaluate yFiles for HTML

Test and experience the yFiles for HTML diagramming library with a 60-day, fully functional evaluation version.
Note: The download also includes access to an evaluation version of the yFiles for HTML GWT Overlay.

The evaluation package features:

  • unrestricted yFiles for HTML functionality, including Algorithms and Viewer components
  • step-by-step tutorials: extensive full source code tutorials to teach the essentials
  • source code: full source code of more than two dozens tutorial demo applications
  • developer documentation: Developer's Guide and API documentation, IDE setup tips
  • developer tools: included in the library to ease JavaScript development process

Contact yWorks

If you have any questions about us or our products, just send us a note:
Thank you!
Your message has been sent to contact@yworks.com
We are sorry,
Your request could not be sent to contact@yworks.com. Please reload the page and try again.
If the problem persists, please report the error to contact@yworks.com