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 custom styles, full user interaction, Undo/Redo, clipboard, I/O, grouping 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. 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 yfiles.view.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 Input and Output Shows how to use GraphML input and output.
09 Grouped Graphs Shows how to configure support for grouped (or hierarchically organized) graphs.
10 Folding Shows how to enable collapsing and expanding of group nodes.
11 Binding Data to Graph Elements Shows how to bind data to graph elements.
12 Export custom data in GraphML Shows how to read and write data that is bound to graph elements to and from a GraphML file.
13 Automatic Graph Layout Shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.
14 Snapping Shows how to enable snapping (guide lines) for graph elements.
15 Grid Snapping Shows how to enable grid snapping for graph elements.
16 Orthogonal Edge Creation Shows how to enable interactive orthogonal edge creation.
17 Customizing Ports Presents the ILookup interface.
18 Label Text Wrapping Shows how to enable the label text wrapping (or trimming) feature provided by DefaultLabelStyle.
19 Drag and Drop This step shows how to use yfiles.input.NodeDropInputMode for dragging nodes from a separate panel to drop them into the graph component.