Diagramming in the Browser

yFiles for HTML brings diagramming and graph visualization 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!

Features

The yFiles for HTML programming library includes all features of the yFiles product family for creating stunning web diagramming applications.

Versatile Graph Components

  • Powerful Diagramming Features

    Create grouped, nested, and flat diagrams from your data. Add as many nodes, connections, and labels as you need.

  • Rich Visualizations

    Enjoy unlimited visualization possibilities and smooth change animations.

  • Intuitive Interaction

    Easily create, edit, and handle diagrams with simple mouse, keyboard, and touch gestures.

  • Comprehensive Editing Features

    Benefit from support for zooming and panning, selection, undo/redo, copy and paste, "magnetic" guide lines, image export, printing, and more.

Automatic Layout and Graph Analysis

  • World Class Graph Layout

    Create clear and concise diagrams with the automatic graph layout styles, including Hierarchical, Orthogonal, Tree, Organic, Circular, Radial, and more.

  • Sophisticated Routing Algorithms

    Optimize connection lines in existing diagrams.

  • Automatic Label Placement

    Reserve space for your labels or let the algorithms fit them in between the other elements.

  • Adapts to Your Requirements

    Ample configuration possibilities suit even sophisticated and complex demands.

Technical Features

yFiles for HTML not only lets you create new customized applications but integrates well with your existing solutions and dashboards on the web.

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

  • Flexible Loading

    Develop using your favorite toolchain: Use webpack, Rollup.js, ES modules, UMD, AMD, Browserify, angular-cli, loading as Node.js module, simple script loading, and more.

  • Developer Friendly

    Extensive Developer's Guide and API documentation, runtime type-checking, debugging tools, and code completion and quick API lookup in many IDEs.

  • Pure Javascript

    A pure JavaScript solution that works seamlessly with Angular, ReactJS, Vue.js, and basically any other JavaScript framework.

  • TypeScript Support

    Direct TypeScript support with complete TypeScript bindings for all members.

  • Supports Modern ECMAScript

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

  • GWT Overlay

    Develop with the GWT Web Toolkit with the optional GWT overlay.

Add-ons

  • VSDX Export

    Create VSDX diagrams from your data with yFiles' powerful layout and visualization features and share them with users of Microsoft Visio®. Learn more.

  • PDF Export

    Save your diagram as high-quality vector graphics with crisp text.

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 Networks

The Large Graph 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)

yEd Live - Online Diagram Editor

Visit our free yEd Live web application to see yFiles for HTML used in a large real-world graph and diagram editor.
yEd Live lets you easily create, edit, export, and share your diagrams online.

Extensive BPMN Demo Application

See also the Business Process Diagrams Editor demo. This sample application features high-quality BPM visualizations, allows you to create and edit Business Process Diagrams, and arranges your diagrams with a 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