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.

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

Shows how to create an interactive organization chart from JSON data.

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.

» start interactive demo

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

Shows how to detect fraud cases in time-dependent data.

BPMN Editor

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

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 layoutthat automatically arranges new entries.

Network Monitoring

Example of a monitoring tool for computer networks.

Collapsible Trees

Shows interactive collapsing and expanding of subtrees of a graph.

Logic Gates

Visualizes a digital system consisted of logic gates.

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

Events Viewer

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

Isometric Drawing

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

Neighborhood View

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

Edge Label Placement

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

Hierarchic Nesting

Shows how to nicely expand and collapse sub-graphs organized in groups.

Incremental Hierarchic Layout

Shows the incremental mode of the hierarchic layout algorithm.

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.

Sankey

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

Maze Router

Shows how the yfiles.router.EdgeRouter can be used for finding routes through a maze.

Mixed Layout

Shows how to use the RecursiveGroupLayout to apply different layouts to the contents of group nodes.

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.

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 export a graph or a part of it to vector graphics (SVG) on the client and how to print this graphic.

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.

Custom Styles

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

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, Vuejs, WebComponents

Loading Demos

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

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 Model

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

Label Editing

Shows customizations of the interactive label editing

Label Handle Provider

Shows how to implement custom yfiles.input.IHandles that allow interactive resizing and rotation of labels.

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.

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

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