yFiles for HTML brings the proven power and ease of yFiles diagramming to your cutting-edge HTML5 applications.
yFiles for HTML has almost all functionality known from our diagramming libraries for the .NET platform. It contains UI controls for viewing and editing diagrams and our layout algorithms for automatically arranging complex graphs and networks at the click of a button.
Unique features of yFiles for HTML:
- 100% client-side graph editing in HTML5-capable browsers—no server component or browser plugin required
- leverages both SVG and HTML5 Canvas
- optional server components (Java/.NET) for layout and computationally-intensive tasks
The demo applications showcase the visualization and interaction capabilities of the yFiles for HTML diagramming class library.
Technical requirements: an HTML5-capable browser with adequate SVG support (see table)
The Organization Chart demo application shows how to create an interactive organization chart with data loaded from XML.
The Modules demo application lets you experience intuitive diagram creation, editing capabilities, and automatic diagram layout:
- Add, delete, move, and label nodes and edges to create a diagram
- Interact using zoom and pan, undo/redo, copy/paste, and more
- Test the different automatic layout algorithms
The Graph Viewer demo application demonstrates user interaction possibilities such as zooming, panning, overview, and toggling additional node information.
The Collapsible Tree demo application loads a tree with many nodes, whose branches can be expanded and collapsed. The nodes are rendered with custom icons that indicate their current state. After an expand or collapse operation, the graph is automatically layed out.
The Shortest Path demo application presents the shortest path search graph analysis algorithm.
The Table Editor demo application demonstrates out-of-the-box support for table nodes that model pools in business process diagrams, for example:
- Interaction: create and modify the table structure via drag'n'drop, easily re-arrange rows and columns by dragging their headers, resize them by dragging their borders
- Auto-Layout: calculate a clear routing and placement of the table contents with just the press of a button
The Custom Styles demo application shows how to easily change the look and feel of nodes, edges, and labels.
The Grouped Graph demo application presents the grouping support of yFiles for HTML.
Group nodes can be collapsed and expanded. Whenever this happens, a new incremental layout is calculated and the graph is redrawn.
- yFiles for HTML Developer's Guide: UI Components
- yFiles for HTML Developer's Guide: Analysis and Layout
- yFiles for HTML API documentation
Learn more about the terms and conditions for the commercial or academic use of the yFiles for HTML library:
For ordering information and prices, please contact: firstname.lastname@example.org.
Evaluate yFiles for HTML
You can test and experience the yFiles for HTML library with a time-limited fully functional evaluation version.