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
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.
Due to strict cross domain policies in both Internet Explorer and Google Chrome, some demos work only partially or not at all when viewed from a filesystem location in these browsers. Therefore, it is recommended to access the demos through a Web server. Install and start scripts for a local Node.js Express server are included:
> cd %YFILES_HTML_DISTRIBUTION_DIR%/demos/demo-server/ > npm install > npm start
Google Chrome can also be instructed to use a more tolerant policy by starting
chrome.exe with the
--allow-file-access-from-files command line option. In addition, all demos are available online.
In Firefox, the demos should run well from a filesystem location, since its cross domain policy is tolerant by default.
Steps in this Tutorial
|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.|