Diagramming in the Browser

yFiles for HTML brings diagramming and graph visualization functionality to your HTML5 applications.

This solution for the web platform features the most advanced UI components for drawing, viewing, and editing diagrams and unequaled graph layout and analysis algorithms for automatically arranging complex diagrams at the click of a button.

What's new in yFiles for HTML 2.2?

More compact layout algorithm options for the hierarchic and tree styles. Improved rendering performance for large graphs with WebGL and Canvas rendering options for handles, overview, and grid. Easier CSS3 styling and animations of UI elements. Literally hundreds of new code samples. ES modules everywhere. Loading yFiles as an NPM module for easier integration into build systems. Improved graph analysis API and even better code completion. Read the blog entry to learn more and see some of these features in action! Evaluate now!


yFiles for HTML brings the features of the yFiles family of diagramming programming libraries to the web platform. It features UI components for the display and 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, WebGL, and HTML5 Canvas to draw diagrams. The three technologies may be combined and used at the same time for the ultimate user experience.

Optional Server Components

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

Flexible Loading

Develop using your favorite tool-chain: Use Webpack, Rollup.js, UMD, AMD, Browserify, angular-cli, native ES6 modules, loading as node module, simple script loading, and more.

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, Angular 2+, ReactJS, Vue.js, and basically any other JavaScript framework.

Supports ECMAScript 6

Requires ECMAScript 5 at minimum at runtime, but the API supports the new features of ECMAScript 6 like async functions and Promises, classes, ES6-modules, iterators, etc. at compile time.

TypeScript Support

Direct TypeScript support with complete TypeScript bindings for all members.

Developer Support

Extensive developer support with Developer's Guide and API documentation viewer, and with debug support, runtime type-checking, code completion, and quick API lookup in many 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!

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 Analysis

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

Large Network Visualization

The Large Graph Visualization demo application compares the and presents the three different supported rendering technologies of yFiles for HTML and shows how to combine them:
  • Switch between WebGL, HTML5 Canvas, and SVG rendering
  • See level of detail rendering and mixing technologies
  • Benchmark visualization performance of larger networks.

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.

Graph Viewer

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

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)

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

Generic Online Graph Editor Application

Be sure to also visit the homepage of our free web application yEd Live to see yFiles for HTML used in a big real-world generic graph editing application.
yEd Live is a sophisticated graph and diagram editor application which lets you easily create, edit, export, and share your diagrams online.

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.

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 ~100 tutorial demo applications
  • developer documentation: Developer's Guide and API documentation, IDE setup tips
  • developer tools: included in the library to ease JavaScript and TypeScript development process
  • integration examples: Angular, angular-cli, Webpack, ReactJS, Vue.js, Neo4j, WebComponents, ...

Contact yWorks

The data you enter will only be used to contact you.
Learn about our privacy policy.

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