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, 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.
  • 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.

On the Roadmap

The following features of the previous version 1.3 are not yet included in yFiles for HTML 2.0, but will be migrated and added in early 2017:

GWT support
GWT Overlay with bindings for the development with GWT Web Toolkit (GWT).

BPMN support
Support for the Business Process Model and Notation (BPMN) including high-quality node styles and specialized automatic layout.

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)

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.

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