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
demo.yfiles.algorithms.shortestpath Shows how to use graph analysis algorithms in yFiles for HTML, specifically, shortest path search, together with the YGraphAdapter analysis adapter class
demo.yfiles.graph.collapse This demo shows how to create collapse/expand functionality for trees with the help of the FilteredGraphWrapper class for filtering subtrees, and the TreeLayouter class for the actual layout
demo.yfiles.graph.incrementalhierarchicgrouping The IncrementalHierarchicGroup Demo demonstrates how to expand and collapse sub graphs organized in groups and folders
demo.yfiles.graph.interactiveorganic This demo shows how to start and use InteractiveOrganicLayouter
demo.yfiles.graph.orgchart This demo implements a complex organization chart example.
demo.yfiles.graph.tableeditor This demo demonstrates how a Table can be modified interactively
demo.yfiles.layout.incrementalhierarchiclayouter This demo interactively demonstrates the usage of IncrementalHierarchicLayouter
demo.yfiles.layout.modules Exhibits a GraphControl which enables graph editing via the default GraphEditorInputMode
 
demo.yfiles.binding.graphsource This demo uses GraphSource to automatically build a graph from business data
demo.yfiles.binding.interactivegraphsource This demo shows how to use GraphSource to interactively create and modify a graph from business data
demo.yfiles.binding.treesource This demo uses TreeSource to automatically build a tree from business data
 
demo.yfiles.io.fileoperation Shows various ways to open from and save to a GraphML file
 
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.simpleeditor Exhibits a GraphControl which enables graph editing via the default GraphEditorInputMode
demo.yfiles.graph.viewer Demonstrates a simple graph viewer
demo.yfiles.imageexport This demo shows how to export a graph or part of it to a raster image (PNG) on the client
demo.yfiles.printing This demo shows how to export a graph or part of it to a vector image (SVG) on the client and how to print this image
 
demo.yfiles.graph.input.contextmenu This demo shows how context menu behavior can be implemented elegantly using GraphEditorInputMode's PopulateItemContextMenu event
demo.yfiles.graph.input.customsnapping This demo shows how the snapping feature can be customized
demo.yfiles.graph.input.draganddrop This demo shows how to use the NodeDropInputMode class for drag and drop
demo.yfiles.graph.input.edgeportcandidateprovider This demo 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.graph.input.orthogonaledges This demo 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.graph.input.portcandidateprovider This demo 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.graph.input.positionhandler This demo 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.graph.input.reparenthandler This demo 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.graph.input.reshapehandleprovider This demo 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.graph.input.sizeconstraintprovider This demo 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
 
demo.yfiles.loading.amdloading This demo loads the yFiles module resources using the require function that is defined in the AMD loading standard
demo.yfiles.loading.scriptloading This demo loads the yFiles module resources using the <script> tag
 
demo.yfiles.contactgraph.android This demo shows how to integrate yFiles for HTML with PhoneGap in order to create a mobile application that runs on Android 3.1 (and higher) and uses the contact information stored on the device to display a graph
demo.yfiles.contactgraph.ios This demo shows how to integrate yFiles for HTML with PhoneGap in order to create a mobile application that runs on iOS 5 (and higher) and uses the contact information stored on the device to display a graph
 
demo.yfiles.graph.simplecustomstyle This demo shows how to create custom styles for nodes, edges, labels, ports, and edge arrows from scratch and how to use them
demo.yfiles.ui.htmllabel Exhibits a GraphControl that shows how HTML can be used as the label text using a custom label style implementation
 
demo.yfiles.mobile.simple This demo displays a simple graph, loaded from a graphml sample, embedded in a jQuery Mobile application
demo.yfiles.toolkits.dojo.simple Shows the integration of yFiles for Html with Dojo 1.7 and later
demo.yfiles.toolkits.gwt.collapsibletree This demo shows how to integrate yFiles for HTML with GWT and how to initialize and handle server side requests
demo.yfiles.toolkits.gwt.simple This demo shows how to integrate yFiles for HTML with GWT and how to initialize and handle server side requests
demo.yfiles.toolkits.jquery.simple This demo shows how you can add GraphControls to a website using jQuery

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.