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

100% client-side graph drawing and graph editing in HTML5-capable browsers— no server component or browser plugin required.

Latest Drawing Technologies

Leverages both SVG and HTML5 Canvas to draw diagrams.

Optional Server Components

Optional server components (Java / .NET) for automatic diagram layout and computationally-intensive tasks.

Optional GWT Overlay

Optional GWT overlay for the development with GWT Web Toolkit (GWT).

Pure Javascript

A pure JavaScript solution that works seamlessly with AngularJS 1 and Angular 2, ReactJS, and basically any other JavaScript framework.

Supports ECMAScript 6

Requires ECMAScript 5, supports the new features of ECMAScript 6.

TypeScript Support

Direct TypeScript support with TypeScript bindings.

Developer Support

Extensive developer support with Developer's Guide and API documentation viewer, and with debug support, code completion, and quick API lookup in IDEs.

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.

Graph Analysis

The Graph Analysis demo application showcases a selection of algorithms such as shortest paths, flows, centrality measures, etc. that help analysing the structure of a graph.

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)

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