yFiles for HTML Demos Tutorial 3 - Application Features

Tutorial 3 - Application Features

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.

Running a Feature Sample

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.

Samples in this Tutorial

Name Description
Base Application The base application for the feature specific samples in this tutorial.
Background Image Shows how to add an image as background to the graph.
Building Graph from Data Shows how to create nodes and edges using data stored in JSON format.
Building Swimlanes from Data Shows how to create swimlanes with nodes and edges using data stored in JSON format.
Save and Load GraphML Shows how to enable basic serialization and deserialization of the graph as GraphML file.
Custom Data in GraphML Shows how to read and write data that is bound to graph elements to and from a GraphML file.
Drag and Drop Shows how to drag nodes from a separate panel into the graph component by using the NodeDropInputMode class.
Filtering Shows how to enable filtering to temporarily hide elements from the graph.
Folding Shows how to enable folding.
Filtering with Folding Shows how to enable filtering and folding in the same graph.
Orthogonal Edges Shows how to enable interactive orthogonal edge editing.
Snapping Shows how to enable snapping (guide lines) for graph elements.
Grid Snapping Shows how to enable grid snapping for graph elements.
Rectangular Indicator Shows how to add rectangular indicator to the graph.
Tooltips Shows how to enable tooltips for graph items.
External Links Shows how to add labels that act like external links and open in a new window.
Clickable Style Decorator Shows how to handle clicks on specific areas of an item style.
Native Listeners This demo illustrates an approach on how to use native listeners on SVG-elements in the style.
Label Text Wrapping Shows how to enable the text wrapping (or trimming) feature provided by the default label style.
Graph Search Shows how to search for nodes of a graph using the label texts.