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

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

Layout Styles

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

Organization Chart

An interactive viewer for organization charts with automatic layout updates.
Graph Analysis

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 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

Fraud Detection

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

BPMN Editor

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

Edge Bundling

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

Network Flows

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

Transitivity

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

Mindmap Editor

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

Network Monitoring

Example of a monitoring tool for computer networks.
Sankey

Sankey

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

Tree map

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

Template Styles

Shows SVG template styles for nodes, labels and ports.
Collapsible Trees

Collapsible Trees

Shows interactive collapsing and expanding of subtrees of a graph.
Rotatable Nodes

Rotatable Nodes

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

Contextual Toolbar

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

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

Flowchart Editor

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

Decision Tree

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

Logic Gates

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

Graph Editor

Shows the graph editing features of the yFiles graph component.
Table Editor

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

Graph Viewer

Displays several sample graphs from various domains.
Large Graphs

Large Graphs

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

Events Viewer

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

Touch Interaction

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

Isometric Drawing

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

Neighborhood View

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

Clustering Algorithms

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

Edge Label Placement

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

Node Label Placement

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

Hierarchic Nesting

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

Incremental Hierarchic Layout

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

Hierarchic Subcomponents

The hierarchic layout can arrange subcomponents with different layout styles.
Critical Paths

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

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

Tree Layout

Shows how to use different node placer in TreeLayout.
Maze Routing

Maze Routing

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

Interactive Map

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

Recursive Group Layout

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

Partial Layout

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

Sequence Constraints

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

Partition Grid

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

Layer Constraints

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

Image Export

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

SVG Export

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

PDF Export

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

Printing

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

GraphML

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

GraphML Compatibility

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

File Operations

shows various ways to open and save a graph as GraphML.
Adjacent Nodes Graph Builder

Adjacent Nodes Graph Builder

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

Graph Builder

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

Simple Graph Builder

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

Bridges

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

Edge To Edge

Shows edge-to-edge connections.
CSS3 Animations and Transitions

CSS3 Animations and Transitions

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

Custom Styles

Shows how to create custom styles for nodes, edges, labels, ports, and edge arrows.
Vue.js Template Node Style

Vue.js Template Node Style

Presents a very versatile and easily customizable template node style.
Data Table

Data Table

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

HTML Label

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

HTML Popup

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

jQuery Sparklines

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

Selection Styling

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

Style Decorators

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

Integration Demos

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

Loading Demos

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

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

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

Context Menu

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

Drag and Drop

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

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

Custom Label Model

Shows how to create and use a custom label model.
Custom Port Location Model

Custom Port Location Model

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

Label Editing

Shows customizations of the interactive label editing.
Label Handle Provider

Label Handle Provider

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

Move Unselected Nodes

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

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

Reparent Handler

Shows how reparenting of nodes can be customized.

Reshape Handle Provider

Shows how resizing of nodes can be customized.
Lasso Selection

Lasso Selection

Shows how to configure a lasso tool for freeform selection.
Single 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

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

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.

If you have any questions about us or our products, just send us a note:
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