yFiles for HTML Demo Applications

These demos are outdated!

You probably want to browse the up-to-date yFiles for HTML 2.0 samples and tutorials instead.

The yFiles for HTML demo applications and tutorials are extensive sample applications with HTML/JavaScript sources that present the functionality of the yFiles for HTML diagramming library.

Name Description
Complete Demos
demo.yfiles.algorithms.shortestpath Shows the capabilities of the Shortest Path algorithm of yFiles.
demo.yfiles.graph.bpmneditor Allows you to create Business Process Diagrams and to arrange them with the specialized BPMN layout algorithm.
demo.yfiles.graph.collapse Shows interactive collapsing and expanding of subtrees of a graph.
demo.yfiles.graph.incrementalhierarchicgrouping Shows how to nicely expand and collapse sub-graphs organized in groups.
demo.yfiles.graph.mindmap Shows an interactive Mindmap application.
demo.yfiles.graph.neighborhood Shows the neighborhood of the currently selected node alongside the graph.
demo.yfiles.graph.networkmonitoring Shows a basic network monitoring tool.
demo.yfiles.graph.orgchart Shows how to create an interactive organization chart from JSON data.
demo.yfiles.graph.tableeditor Shows the support for diagrams that are organized in a tabular way, for example in a grid or a swimlane layout.
Databinding Demos
demo.yfiles.binding.graphsource Uses GraphSource to automatically build a graph from business data.
demo.yfiles.binding.interactiveadjacentedges Interactively create and modify a graph from business data with class AdjacentEdgesGraphSource.
demo.yfiles.binding.interactiveadjacentnodes Interactively create and modify a graph from business data with class AdjacentNodesGraphSource.
demo.yfiles.binding.interactivegraphsource Uses class GraphSource to interactively build and modify a graph from business data.
demo.yfiles.binding.treesource Uses TreeSource to automatically build a tree from business data.
Graphviewer Demos
demo.yfiles.graph.bridges Showcases the capabilities of the BridgeManager class for inserting bridges into edge paths.
demo.yfiles.graph.clipboard Shows different ways of using the class GraphClipboard for Copy & Paste operations.
demo.yfiles.graph.events Shows the multitude of events provided by the classes IGraph and GraphControl and the Input Modes.
demo.yfiles.graph.fileoperations Shows various ways to open from and save to a GraphML file.
demo.yfiles.graph.htmlpopup Shows HTML pop-up panels that displays additional information about a clicked node or edge.
demo.yfiles.graph.imageexport Shows how to export the whole diagram or a part of it to a PNG raster image.
demo.yfiles.graph.largegraphs Illustrates improvements in rendering performance for large graphs.
demo.yfiles.graph.pdfexport Shows how to export the whole diagram or a part of it to a PDF.
demo.yfiles.graph.printing Shows how to export the whole diagram or a part of it to vector graphics (SVG) and how to print this graphic.
demo.yfiles.graph.simpleeditor Exhibits a GraphControl which enables graph editing via the default GraphEditorInputMode.
demo.yfiles.graph.svgexport Shows how to export the whole diagram or a part of it to an SVG file.
demo.yfiles.graph.viewer Displays several sample graphs from various domains.
demo.yfiles.graphml.graphml Provides a live view of the graph's GraphML representation.
Input Demos
demo.yfiles.input.contextmenu Shows how to add a context menu to nodes and to the canvas background.
demo.yfiles.input.customsnapping Shows how the snapping feature can be customized.
demo.yfiles.input.draganddrop Shows how to easy it is to enable drag and drop functionality for nodes with the class yfiles.input.NodeDropInputMode.
demo.yfiles.input.edgeportcandidateprovider Shows how the reconnection of edge ports can be customized and restricted.
demo.yfiles.input.orthogonaledges Shows the customization of orthogonal edge editing.
demo.yfiles.input.portcandidateprovider Shows how edge creation can be customized.
demo.yfiles.input.positionhandler Shows how to customize and restrict the movement behavior of nodes.
demo.yfiles.input.reparenthandler Shows how reparenting of nodes can be customized.
demo.yfiles.input.reshapehandleprovider Shows how resizing of nodes can be customized.
demo.yfiles.input.singleselection Shows how to configure GraphEditorInputMode for single selection mode.
demo.yfiles.input.sizeconstraintprovider Shows how resizing of nodes can be restricted.
Layout Demos
demo.yfiles.layout.basiclayouter Shows a small sample graph with group nodes and default user interaction features.
demo.yfiles.layout.incrementalhierarchic Shows the incremental mode of the hierarchic layout algorithm.
demo.yfiles.layout.interactiveorganic Shows the Interactive Organic layout algorithm.
demo.yfiles.layout.layoutstyles Showcases the most used layout algorithms of yFiles, including hierarchic, organic, orthogonal, tree, circular and balloon styles.
demo.yfiles.layout.multipage Shows how to divide a large model graph into several smaller page graphs.
demo.yfiles.layout.preferredlabelplacement Shows how the PreferredPlacementDescriptor for edge labels affects the label placement of layout algorithms.
Loading Demos
demo.yfiles.loading.amdbundle Shows how to create a bundled subset of the yFiles library, and how to use the bundle in an AMD (requirejs) application.
demo.yfiles.loading.amdloading Loads the yFiles module resources using the require function that is defined in the AMD loading standard.
demo.yfiles.loading.browserify Shows how to bundle the yFiles library in a Browserify project.
demo.yfiles.loading.nodejs Shows how to run a yFiles layout algorithm in a Node.js® environment.
demo.yfiles.loading.noglobals Configures the yFiles library to avoid adding properties to the global namespace.
demo.yfiles.loading.scriptbundle Shows how to create a bundled subset of the yFiles library, and how to use the bundle without a module loader.
demo.yfiles.loading.scriptloading Loads the yFiles modules using <script> tags instead of an AMD loader.
demo.yfiles.loading.webworker Shows how to run a yFiles layout algorithm in a Web Worker task in order to prevent the layout calculation from blocking the UI.
Style Demos
demo.yfiles.style.datatable Shows a node style and a label style that display data in a tabular fashion.
demo.yfiles.style.htmllabel Shows how HTML can be used as the label text using a custom label style implementation.
demo.yfiles.style.selectionstyling Shows customized selection painting of nodes, edges and labels by decorating these items with a corresponding style.
demo.yfiles.style.simplecustomstyle Shows how to create custom styles for nodes, edges, labels, ports, and edge arrows.
demo.yfiles.style.sparkline Shows how to integrate visualizations generated by a third-party library with a custom node style.
demo.yfiles.style.styledecorators Shows how to create styles for nodes, edges, and labels that wrap existing styles and add visual decorators.
Toolkit Demos
demo.yfiles.angular Shows how to use yFiles for HTML in an AngularJS app.
demo.yfiles.dojo.simple Shows the integration of yFiles for HTML with Dojo.
demo.yfiles.jquery.simple Shows how to add GraphControls to a HTML page with jQuery.
demo.yfiles.jquerymobile.simple This jQuery Mobile application displays a simple graph, loaded from a GraphML file.
demo.yfiles.phonegap.android Shows how to build a mobile application for Android with yFiles for HTML and Apache Cordova.
demo.yfiles.phonegap.ios Shows how to build a mobile application for iOS with yFiles for HTML and Apache Cordova.
demo.yfiles.react Shows how a React Component can be created that renders the yFiles yfiles.canvas.GraphControl.
demo.yfiles.toolkits.gwt.collapsibletree Shows the integration of yFiles for HTML with GWT, and how to initialize and handle server side requests.
demo.yfiles.toolkits.gwt.simple Shows the integration of yFiles for HTML with GWT, and how to initialize and handle server side requests.
demo.yfiles.typescript.simple Shows the integration of yFiles for HTML with TypeScript.
Tutorial 01: Getting Started Shows both basic concepts as well as how to build a diagramming application that supports custom styles, full user interaction, Undo/Redo, clipboard, I/O, grouping and folding.
Tutorial 02: Custom Styles A step-by-step introduction to customizing the visual representation of graph elements. This tutorial is intended for users who want to learn how to create custom styles from scratch.