The yFiles for HTML 2.6.0.4 demo applications are available in both JavaScript and TypeScript.
The complete source code of all of these demos is part of the yFiles for HTML package and available at GitHub.
These demos are an introduction to the features of the yFiles for HTML diagramming library for building an application. They cover a broad range of topics including building graphs from JSON data, drag and drop, tooltips, snapping (guide lines), etc.
They 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 Basic Features tutorial. Then, have a look at the samples of this tutorial that cover the features you are interested in.
To make full use of these demos, we also recommend to review and possibly modify the source code for each sample project.
This collection of demos showcases important features of the layout algorithms of the yFiles for HTML library and provides guidance for each feature on how to configure the algorithm properly.
It is intended for developers who are interested in how to implement specific layout features. If you are new to the yFiles for HTML diagramming library, we recommend to start with the Basic Features tutorial. Then, have a look at the samples of this tutorial that cover the features you are interested in.
To make full use of these demos, we recommend to review and possibly modify the source code for each sample project. The source code for layout configurations shown in a demo application can often be directly reused in another application.
Tutorial: Basic Features
This Basic Features 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.
Tutorial: Node Style Implementation
This tutorial is a step-by-step guide to customizing the visual representation of nodes. Moreover, it presents a visual representation of nodes 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.
Tutorial: Label Style Implementation
This tutorial is a step-by-step guide to customizing the visual representation of labels. 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.
Tutorial: Edge Style Implementation
This tutorial is a step-by-step guide to customizing the visual representation of nodes. 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.
Tutorial: Port Style Implementation
This tutorial is a step-by-step guide to customizing the visual representation of nodes. 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.
Tutorial: Graph Builder
This tutorial is a step-by-step guide to configuring the GraphBuilder class which helps to conveniently transfer business data into a graph that you can display, manage and explore. It shows how to load data from different data sources and how to customize the visualizations of the graph elements and/or how to add labels.
It is intended for users who want to learn how to convert their data into a graph. To make full use of the tutorial, we recommend to review and possibly modify the source code of the sample projects.
