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.

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, UMD, AMD, Browserify, angular-cli, native ES6 modules, simple script loading, and more.

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

Pure jаvascript
A pure jаvascript solution that works seamlessly with AngularJS, Angular 2+, ReactJS, Vue.js, and basically any other jаvascript 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.

Sophisticated Label Rendering
Easily add text labels to nodes and edges that show additional information. Various placement options, like inside or outside of a node or on an edge near the source or target ensure that labels remain where they should, even if items are moved.

Labels are not limited to short text phrases, they can hold multi-line text as well as show icons.

yFiles offers extensive formatting options, e.g. font, line spacing, and decorations, as well as word wrapping and alignment.

Untangle Edge Crossings with Bridges
Crossing edges can make complex diagrams harder to read. Bridges make clear where those edges go.

yFiles offers several different bridging styles and crossing policies that define which line should bridge which other line.

Custom Visuals to Add Auxiliary Information to Graphs
Nodes, edges, ports, and labels are not the only thing on the canvas. It is possible to add arbitrary other visualizations, either in the background or on top of the other graph items. Adding custom backgrounds, brand logos, legends, rulers or even dynamic helpers like snap lines help make a yFiles-powered application stand out.

Z-Order of Diagram Elements
The drawing of diagram elements relative to each other can easily be changed. For example, changing edges to appear above nodes instead of below can be arranged simply by changing their order.

Custom Styles Tutorial
A step-by-step tutorial guides you through the creation of an entirely custom style.

The tutorial covers style creation for nodes, edges, ports and labels, and will also show you how to create custom decorators for built-in styles. It covers all major topics like hit testing, performance optimization, animation, business data integration and edge bridging support.

Diagram Features
All diagrams consist of nodes and edges, of course. yFiles adds a number of unique features that help working with them, especially when they're getting larger. Grouping and folding lets you collapse and expand parts of the diagram. Swimlanes visually group parts of a diagram into rows and columns. Filtering can temporarily hide elements that are not important in the current view. A variety of import and export features make it easy to get your data into and out of graphs.

Grouping and Folding
yFiles supports grouping of nodes into other nodes. Edges can still connect freely to any of them, including connections between a group and its children or between children of different groups.

Collapsing a group node hides the child elements of that group, they will be restored when the group is expanded again.

Custom actions are possible when groups are collapsed or expanded, such as running an incremental layout algorithm, or fetching data to create child nodes in the expanded group node.

Only for V.I.P