yFiles Online Demos

The yFiles for HTML interactive demos will not run in your browser, as it does not have adequate SVG support.

Please use a modern, HTML5-capable browser with adequate SVG support to run these demos.

See what kind of applications you could create using the yFiles family of diagramming libraries. The yFiles Features page contains more information about the various capabilities it has to offer.

yEd Live

yEd Live is the browser version of the powerful yEd Graph Editor desktop application. You can use this web application to create, import, and share diagrams on all platforms that operate a modern browser, including your favorite mobile devices.

Learn more about yEd Live on the yEd Live home page.

Layout Styles

Showcases the most used layout algorithms of yFiles, including hierarchic, organic, orthogonal, tree, circular and balloon styles.

Organization Chart

An interactive viewer for organization charts with automatic layout updates.

Graph Analysis

Showcases a selection of algorithms such as shortest paths, flows, centrality measures, etc. that help analysing the structure of a graph.

yEd Graph Editor

yEd is a highly flexible graph editor that can be used to create, view, and lay out diagrams and networks. It displays a large number of the features that are available in the yFiles for Java graph visualization library.

To download yEd, simply visit the yEd home page.

The entire source code of yEd Lite, an only slightly stripped-down version of yEd, comes as part of the yFiles for Java library.

Fraud Detection

Example of a fraud detection application for time-dependent data.

BPMN Editor

An editor for Business Process diagrams that features interactive editing, BPMN node styles and a specialized BPMN layout algorithm.

Edge Bundling

Shows how edge bundling can be applied for reducing visual cluttering in dense graphs.

Network Flows

Presents three network flow graph analysis algorithms that are applied on a network of water pipes.

Transitivity

Shows how transitivity graph analysis algorithms can be applied to graphs to answer reachability questions

Mindmap Editor

A Mindmap editor with a tailored node style, custom user interaction, and a specialized layout that automatically arranges new entries.

Network Monitoring

Example of a monitoring tool for computer networks.

Sankey

A diagram used for visualizing flow information in which the thickness of the edges is proportional to the flow quantity.

Tree map

Shows disk usage of a directory tree with the Tree Map layout.

Template Styles

Shows SVG template styles for nodes, labels and ports.

Collapsible Trees

Shows interactive collapsing and expanding of subtrees of a graph.

Rotatable Nodes

Shows nodes that can be rotated with the mouse or touch.

Contextual Toolbar

Shows a contextual toolbar for the current selection that enables fast and easy style changes.

UML Editor

An editor for UML diagrams with a tailored UML node style, automatic layout, and a quick way to create new edges with the mouse or touch.

Flowchart Editor

An editor for Flowchart diagrams that features interactive editing, flowchart node styles, and automatic layout.

Decision Tree

An interactive Decision Tree component that lets you design and explore your own decision graphs.

Logic Gates

An editor for networks of logic gates, with tailored automatic layout.

Graph Editor

Shows the graph editing features of the yFiles graph component.

Table Editor

Shows the support for diagrams that are organized in a tabular way, for example in a grid or a swimlane layout.

Graph Viewer

Displays several sample graphs from various domains.

Large Graphs

Illustrates using WebGL and other techniques for improving rendering performance of large graphs.

Events Viewer

Shows the multitude of events provided by the classes IGraph, GraphComponent, and the Input Modes.

Touch Interaction

Shows how a graph editor application can be optimized for touch devices.

Isometric Drawing

Displays graphs in an isometric fashion to create the impression of a 3-dimensional view.

Neighborhood View

Shows the neighborhood of the currently selected node alongside the graph.

Clustering Algorithms

Showcases a selection of clustering algorithms such as edge-betweenness, k-means, hierarchical and biconnected components clustering.

Edge Label Placement

Shows how to place edge labels at the preferred location with a labeling algorithm.

Node Label Placement

Shows how to place node labels at the preferred location with a labeling algorithm.

Hierarchic Nesting

The hierarchic layout nicely expands and collapses sub-graphs organized in groups.

Incremental Hierarchic Layout

The incremental mode of the hierarchic layout style can fit new nodes and edges into the existing drawing.

Hierarchic Subcomponents

The hierarchic layout can arrange subcomponents with different layout styles.

Critical Paths

The hierarchic and tree layout styles can emphasize critical (important) paths by aligning their nodes.

Interactive Organic Layout

Shows the 'interactive organic' layout algorithm.

Multi-Page Layout

Shows how to divide a large model graph into several smaller page graphs, for example to print to multiple pages.

Tree Layout

Shows how to use different node placer in TreeLayout.

Maze Routing

Shows how the automatic edge routing finds routes through a maze.

Interactive Map

Shows how to draws a graph on top of an interactive map.

Recursive Group Layout

Shows how to use different layout styles for the contents of groups and the overall graph.

Partial Layout

Shows how to integrate new graph elements into an existing graph layout.

Sequence Constraints

Shows how to use sequence constraints to restrict the node sequencing in HierarchicLayout.

Partition Grid

Demonstrates the usage of a partition grid for hierarchic and organic layouts.

Layer Constraints

Shows how to use layer constraints to restrict the node layering in HierarchicLayout.

Image Export

Shows how to export the whole diagram or a part of it to a PNG image.

SVG Export

Shows how to export the whole diagram or a part of it to an SVG file.

PDF Export

Shows how to export the whole diagram or a part of it to a PDF.

Printing

Shows how to print the whole diagram or a part of it.

GraphML

Provides a live view of the graph's GraphML representation.

GraphML Compatibility

Shows how to enable read compatibility for GraphML files from older versions.

File Operations

shows various ways to open and save a graph as GraphML.

Adjacent Nodes Graph Builder

Interactively create and modify a graph from business data with class yfiles.binding.AdjacentNodesGraphBuilder.

Graph Builder

Uses class yfiles.binding.GraphBuilder to interactively build and modify a graph from business data.

Simple Graph Builder

Uses GraphBuilder or TreeBuilder to automatically build a graph from business data.

Bridges

Shows the capabilities of the BridgeManager class for inserting bridges into edge paths.

Edge To Edge

Shows edge-to-edge connections.

CSS3 Animations and Transitions

Shows how CSS3 transformations and animations can be applied to graph items.

Custom Styles

Shows how to create custom styles for nodes, edges, labels, ports, and edge arrows.

Vue.js Template Node Style

Presents a very versatile and easily customizable template node style.

Data Table

Shows a node style and a label style that display data in a tabular fashion.

HTML Label

Shows how HTML can be used as the label text using a custom label style implementation.

HTML Popup

Shows HTML pop-up panels that displays additional information about a clicked node or edge.

jQuery Sparklines

Shows how to integrate visualizations generated by a third-party library with a custom node style.

Selection Styling

Shows customized selection painting of nodes, edges and labels by decorating these items with a corresponding\n style.

Style Decorators

Shows how to create styles for nodes, edges, and labels that wrap existing styles and add visual decorators.

Integration Demos

Show how to use yFiles for HTML with: AngularJS, Angular, React, TypeScript, Vue.js, WebComponents, Neo4j

Loading Demos

Show how to use yFiles for HTML with: ES6 modules, Node.js®, AMD Loading, Browserify, Script Loading, webpack 3

Web Worker

Shows how to run a yFiles layout algorithm in a Web Worker task in order to prevent the layout calculation from blocking the UI.

Clipboard

Shows different ways of using the class GraphClipboard for Copy & Paste operations.

Custom Snapping

Shows how the snapping feature can be customized.

Context Menu

Shows how to add a context menu to the nodes of a graph and to the canvas background.

Drag and Drop

Shows how to enable drag and drop functionality for nodes using class yfiles.input.NodeDropInputMode.

Edge Reconnection

Shows how the reconnection of edge ports can be customized and restricted.

Orthogonal Edges

Shows the customization of orthogonal edge editing.

Custom Label Model

Shows how to create and use a custom label model.

Custom Port Location Model

Shows how to implement and use a custom port location model.

Label Editing

Shows customizations of the interactive label editing.

Label Handle Provider

Shows how to implement custom handles that allow interactive resizing and rotation of labels.

Move Unselected Nodes

Shows a special input mode that allows you to move nodes without selecting them first.

Port Candidate Provider

Shows how edge creation can be customized.

Position Handler

Shows how to customize and restrict the movement behavior of nodes.

Reparent Handler

Shows how reparenting of nodes can be customized.

Reshape Handle Provider

Shows how resizing of nodes can be customized.

Lasso Selection

Shows how to configure a lasso tool for freeform selection.

Single Selection

Shows how to configure GraphEditorInputMode for single selection mode.

Size Constraint Provider

Shows how resizing of nodes can be restricted.

Getting Started Tutorial

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.

Custom Styles Tutorial

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.

Contact yWorks

The data you enter will only be used to contact you.
Learn about our privacy policy.

Thank you!
Your message has been sent to contact@yworks.com

We are sorry,
Your request could not be sent to contact@yworks.com. Please reload the page and try again.
If the problem persists, please report the error to contact@yworks.com