The yFiles for HTML demos and tutorials are extensive sample applications that present the features of the yFiles for HTML diagramming library.
This Getting Started Tutorial is a step-by-step introduction to the concepts and main features of the yFiles for HTML diagramming library. Topics include basic styling, user interaction, Undo/Redo, clipboard, group nodes and folding.
It is intended for developers who want to get started with the library in an effective way. If you are new to the yFiles for HTML diagramming library, we recommend to start by going through the projects in this tutorial one by one. In addition, have a look at the Getting Started chapter of the developer's guide.
To make full use of the tutorial, we also recommend to review and possibly modify the source code for each sample project.
This tutorial is a step-by-step guide to customizing the visual representation of graph elements. It shows the creation of custom styles for nodes, edges, labels, and ports. Moreover, it presents a custom arrowhead rendering, a customized edge selection, and a visual representation of graph elements that depends on the current application state. Finally, several optimization strategies are discussed.
It is intended for users who want to learn how to create custom styles from scratch. If you are new to styles, in particular to their customization, we recommend to start by going through the tutorial steps that show the basics one by one. Of the specialized topics, you can skip the ones that doesn't apply to your use case. To make full use of the tutorial, we recommend to review and possibly modify the source code of the sample projects.
This tutorial is an introduction to the features of the yFiles for HTML diagramming library for building an application. It covers a broad range of topics including building graphs from JSON data, drag and drop, tooltips, snapping (guide lines), etc.
It is intended for developers who are interested in how to implement specific application features. If you are new to the yFiles for HTML diagramming library, we recommend to start with the Getting Started tutorial. Then, have a look at the samples of this tutorial that cover the features you are interested in.
To make full use of this tutorial, we also recommend to review and possibly modify the source code for each sample project.
The complete source code of all of these samples is part of the yFiles for HTML package and available at GitHub.
To execute a specific sample, click on its card below.
These demos use ECMAScript 6 features that your browser does not support.
Please switch to a browser with support for ECMAScript 6 (Chrome, Firefox, Edge, Safari 10) or use the included deployment tool to convert the demos to ECMAScript 5. The converted demos are also available online.
Note that ECMAScript 6 is a requirement of the demos, only. The yFiles for HTML library itself is compatible with ECMAScript 5.