yFiles for HTML Demos Tutorial 1 - Getting Started

Tutorial 1 - Getting Started

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

Running a Tutorial Step

To execute a specific programming sample, either follow the corresponding link from the table below or open the file index.html in the specific demo directory. It is also possible to deploy the samples to a web server and load them from there.

Steps in this Tutorial

Name Description
01 Creating the View Introduces class GraphComponent, which is the central UI element for working with graphs.
02 Creating Graph Elements Shows how to create the basic graph elements.
03 Managing the Viewport Shows how to work with the viewport.
04 Customizing Styles Shows how to configure the visual appearance of graph elements using styles.
05 Placing Labels Shows how to control label placement with the help of so called label model parameters.
06 Basic Interaction Shows the default interaction gestures that are provided by class GraphEditorInputMode.
07 Undo and Clipboard Support Shows how to use the undo and clipboard features.
08 Grouped Graphs Shows how to configure support for grouped (or hierarchically organized) graphs.
09 Binding Data to Graph Elements Shows how to bind data to graph elements.
10 Automatic Graph Layout Shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.
11 Layout Data Shows how to configure a layout algorithm using the information stored in the tag of the nodes.
12 Customizing Ports Presents the ILookup interface.