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

Gantt Chart

An editor for Gantt charts.

Isometric Drawing

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

Network Monitoring

Example of a monitoring tool for computer networks.

Edge Bundling

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

Sankey Diagram

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.

Family Tree

Shows how to visualize genealogical graphs (family trees).

Template Styles

Shows SVG template styles for nodes, labels and ports.

CSS Styling

Shows how to style indicators and other templates.

Metaball Groups

Shows how to render metaball-like background visualizations.

Maze Routing

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

Interactive Map

Draws a graph on top of an interactive map.

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.

Mindmap Editor

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

d3 Chart Nodes

Presents a node style that visualizes dynamic data with d3.js.

Logic Gates

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

Organization Chart Viewer

A viewer for organization charts.

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.

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 sample graphs from various application domains.

Large Graphs

Illustrates improvements in rendering performance for 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.

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.

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 solve reachability problems.

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.

Edge Grouping

The hierarchic layout can group the paths or ports of edges.

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.

Split Edges

Shows how to align edges at group nodes using RecursiveGroupLayout with HierarchicLayout.

Partition Grid

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

Simple Partition Grid

Shows how to create a simple partition grid.

Layer Constraints

Shows how to use layer constraints to prescribe the node layering in hierarchic layouts.

Sequence Constraints

Shows how to use sequence constraints to prescribe the node sequencing in hierarchic layouts.

Interactive Organic Layout

Shows the 'interactive organic' layout algorithm.

Recursive Group Layout

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

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.

Partial Layout

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

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

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.

Structure View

A tree list component that shows the nesting of the groups and nodes.

Graph Builder

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

Adjacent Nodes Graph Builder

Uses class AdjacentNodesGraphBuilder 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.

Angular CLI

Shows how to use yFiles for HTML in an Angular app (Angular 2 and newer) using Angular CLI.

AngularJS 1

Shows how to use yFiles for HTML in an AngularJS 1 app.

Neo4j

Shows how to load data from a Neo4j database and display it with yFiles for HTML.

NodeJS

Shows how to run a yFiles layout algorithm in a Node.js® environment.

React

Shows how to use yFiles for HTML with the React library.

TypeScript

Shows the integration of yFiles for HTML with TypeScript (using the ES module version of yFiles).

Vue.js

Shows how to use yFiles for HTML with Vue.js.

Web Components

Shows how to use yFiles for HTML with Web Components v1.

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 in label text with a custom label style.

HTML Popup

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

Selection Styling

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

Style Decorators

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

Bridges

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

Edge To Edge

Shows edge-to-edge connections.

File Operations

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

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.

AMD Loading

Loads the yFiles module resources using the require function that is defined in the AMD loading standard.

ES Module Loading

Loads the yFiles module resources using ES module imports.

Browserify

Shows how to bundle the yFiles library in a Browserify project.

Rollup.js

Shows how to bundle the yFiles library in a rollup project.

Script Loading

Loads the yFiles modules using plain old <script> tags.

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.

Web Worker UMD

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

webpack

Shows how to integrate the yFiles library in a webpack project using ES modules.

Clipboard

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

Rendering Order

Shows different rendering order settings.

Custom Label Model

Shows how to implement and use a custom label model.

Custom Port Location Model

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

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 drag and drop of nodes, groups and labels.

Edge Reconnection

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

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.

Orthogonal Edges

Shows the customization of orthogonal edge editing.

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.

01 Graph Component

This step introduces class GraphComponent, which is the central UI element for working with graphs.

02 Graph Element Creation

This step shows how to create the basic graph elements.

03 Managing Viewport

This step shows how to work with the viewport.

04 Setting Styles

This step shows how to configure the visual appearance of graph elements using styles.

05 Label Placement

This step shows how to control label placement with the help of so called label model parameters.

06 Basic Interaction

This step shows the default interaction gestures that are provided by class GraphEditorInputMode.

07 Undo Clipboard Support

This step shows how to use the undo and clipboard features.

08 Grouping

This step shows how to configure support for grouped (or hierarchically organized) graphs.

09 Data Binding

This step shows how to bind data to graph elements.

10 Layout

This step shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.

11 Layout Data

This step shows how to configure a layout algorithm using the information stored in the tag of the nodes.

12 Custom Ports

This step presents the ILookup interface.

01 Custom Node Style

This step shows how to create a custom node style.

02 Node Color

This step shows how to change the style of the nodes based on their tag.

03 Update Visual And Render Data Cache

This step shows how to implement high-performance rendering of nodes.

04 Is Inside

This step shows how to override isInside() and getOutline() of NodeStyleBase.

05 Hit Test

This step shows how to override isHit() and isInBox() of NodeStyleBase.

06 Get Bounds

This step shows how to override getBounds() of NodeStyleBase.

07 Drop Shadow Performance

This step replaces the simple drop shadow in the last steps with a more visually appealing, blurred one.

08 Edge From Node To Label

This step shows how to visually connect a label to its owner node with a line.

09 Is Visible

This step shows how to override the method isVisible() of NodeStyleBase.

10 Custom Label Style

This step shows how a custom label style.

11 Label Preferred Size

This step shows how to set the size of the label based on the size of its text by overriding the LabelStyleBase#getPreferredSize() method.

12 High Performance Label Rendering

This step shows how to implement high-performance rendering for labels.

13 Label Edit Button

This step shows how to display a button on a label that starts the label editor.

14 Button Visibility

This step shows how to hide the 'Label Edit' button based on the zoom level.

15 Using Data In Label Tag

This step shows how to use data from a business object, which is stored in the label's tag, for rendering.

16 Custom Edge Style

This step shows how to create a custom edge style which allows to specify the edge thickness by setting a property on the style.

17 Edge Hit Test

This step shows how to take the thickness of the edge into account when checking if the edge was clicked.

18 Edge Cropping

This step shows how to crop an edge at the node's bounds.

19 Animated Edge Selection

This step shows how to change the style of an edge if the edge is selected.

20 Custom Arrow

This step shows a custom arrow.

21 Edge Performance

This step shows how to optimize rendering performance for edges and arrows.

22 Arrow Thickness

This step shows how to render the arrow based on a property of its edge.

23 Custom Ports

This step shows a custom port style.

24 Style Decorator

This step shows how to enhance an existing node style by adding visual decorators.

25 Custom Group Style

This step shows how to implement a special node style for group nodes.

26 Custom Group Bounds

This step shows how to customize the way that the group insets are calculated by implementing an ILayoutGroupBoundsCalculator.

27 Canvas Painting

This step shows how to implement a zoom-dependent high-performance rendering using HTML5 Canvas painting for nodes.

28 Bridge Support

This step shows how to enable bridges for a custom edge style.

29 Label Line Wrapping

This step shows how to enhance a custom label style to support different line wrapping (trimming) styles as well as text clipping at the label bounds.

Application Features Base

This demo provides the base application for the feature specific demos in this tutorial.

Background Image

This demo shows how to add a background to a graph. The background can be an image or a colored rectangle.

Building Graph From Data

This demo shows how to build a graph using the data stored in JSON-format.

Building Swimlanes From Data

This demo shows how to build a graph with swimlanes using the data stored in JSON-format.

Clickable Style Decorator

This demo illustrates an approach on how to handle clicks on specific areas of the style.

Custom GraphML

This step shows how to read and write data bound to graph elements to and from a GraphML file.

Drag And Drop

This demo shows how to enable dragging nodes from a panel and drop them into the graph component.

External Links

This demo shows how to add labels that act like external links and open in a new window.

Filtering

This demo shows how to configure graph filtering.

Filtering With Folding

This demo shows how to configure filtering and folding in the same application.

Folding

This demo shows how to enable collapsing and expanding of group nodes.

Graph Copy

This demo shows how to copy a graph or parts of a graph.

Graph Search

This demo shows how to search for nodes of a graph using the label texts.

Grid Snapping

This demo shows how to enable grid snapping for graph elements.

Input Output

This demo shows how to use GraphML input and output.

Label Text Wrapping

This demo shows how to enable the label text wrapping and trimming feature provided by yFiles.

Level of Details

This demo shows changing the style of the nodes when we change the zoom level.

Native Listeners

This demo illustrates an approach on how to register native event listeners to SVG-elements on a style.

Orthogonal Edges

This demo shows how to enable interactive orthogonal edge editing.

The Rectangular Indicator

This demo shows how we can apply a rectangular indicator to a graph.

Smart Click Navigation

This demo shows the Transitions to a new zoom level and viewport center

Snapping

This demo shows how to enable snapping (guide lines) for graph elements

Tooltips

This demo show how to enable tooltips to graph items.

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