yFiles for HTML Programming Samples

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

Available Demos

The following table lists the relevant files and subdirectories within your yFiles for HTML programming samples and tutorials installation directory.

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 use a specialized BPMN layout algorithm to arrange them.
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.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.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 a graph or part of it to a raster image (PNG) on the client.
demo.yfiles.graph.printing Shows how to export a graph or a part of it to vector graphics (SVG) on the client and how to print this graphic.
demo.yfiles.graph.simpleeditor Exhibits a GraphControl which enables graph editing via the default GraphEditorInputMode.
demo.yfiles.graph.viewer Displays several sample graphs from various domains.
Input Demos
demo.yfiles.input.contextmenu Shows how context menu behavior can be implemented elegantly using GraphEditorInputMode's PopulateItemContextMenu event.
demo.yfiles.input.customsnapping Shows how the snapping feature can be customized.
demo.yfiles.input.draganddrop Shows how to use the NodeDropInputMode class for drag and drop functionality.
demo.yfiles.input.edgeportcandidateprovider Shows how edge port relocation can be customized by implementing the IEdgePortCandidateProvider interface and adding instances to the LookupChain of the edges in the graph via the ILookupDecorator mechanism.
demo.yfiles.input.orthogonaledges Shows how orthogonal edge editing can be customized by implementing the IOrthogonalEdgeHelper interface and adding instances to the LookupChain of the edges in the graph via the ILookupDecorator mechanism.
demo.yfiles.input.portcandidateprovider Shows how edge creation can be customized by implementing the IPortCandidateProvider interface and adding instances to the LookupChain of the nodes in the graph via the ILookupDecorator mechanism.
demo.yfiles.input.positionhandler Shows how node moving can be customized by implementing the IPositionHandler interface and adding instances to the LookupChain of the nodes in the graph via the ILookupDecorator mechanism.
demo.yfiles.input.reparenthandler Shows how reparenting of nodes can be customized by implementing the IReparentHandler interface and setting it as the default handler for the GraphEditorInputMode.ReparentHandler property.
demo.yfiles.input.reshapehandleprovider Shows how node resizing can be customized by implementing the IReshapeHandleProvider interface and adding instances to the LookupChain of the nodes in the graph via the ILookupDecorator mechanism.
demo.yfiles.input.singleselection Shows how to configure GraphEditorInputMode for single selection mode.
demo.yfiles.input.sizeconstraintprovider Shows how node resizing can be customized by implementing the ISizeConstraintProvider interface and adding instances to the LookupChain of the nodes in the graph via the ILookupDecorator mechanism.
Layout Demos
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 various 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.amdloading Loads the yFiles module resources using the require function that is defined in the AMD loading standard.
demo.yfiles.loading.scriptloading Loads the yFiles module resources using the <script> tag.
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 Exhibits a GraphControl that 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.styledecorators Shows how to create styles for nodes, edges, and labels that wrap existing styles and add visual decorators.
Toolkit Demos
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 3.1 (and higher) with yFiles for HTML and PhoneGap.
demo.yfiles.phonegap.ios Shows how to build a mobile application for iOS 5 (and higher) with yFiles for HTML and PhoneGap.
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.

Available Tutorials

Category Description
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.
02 Custom Styles A step-by-step introduction to customizing the visual representation of graph elements. This tutorial is intended for advanced users that want to learn how to create custom styles from scratch.