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
index.html in the specific demo directory. It is also possible to deploy the samples to a web
server and load them from there.
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.
Steps in this Tutorial
|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.|