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
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.
Samples in this Tutorial
|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
|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.|