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, balloon, and several edge routing 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.
Layout Styles: Hierarchic
Suitable for any kind of directed diagram, like flow charts, BPMN diagrams and more
Layout Styles: Organic
Suitable for many types of undirected graphs and complex networks, like social networks, WWW visualizations or knowledge representation.
Layout Styles: Edge Router
For routing edges in an orthogonal, octilinear or curved style.
Layout Styles: Tree
Suitable to visualize tree structures like organization charts or for dataflow analysis.
Layout Styles: Balloon
Suitable to visualize tree-like structures in a radial fashion.
Layout Styles: Orthogonal
Suitable for diagrams with orthogonal edges such as UML, database schemas, system management and more.
Layout Styles: Circular
Suitable for applications in social networking, for WWW visualization and network management
Layout Styles: Radial
Suitable to visualize directed diagrams with a certain flow.
Layout Styles: Series-Parallel
Suitable for diagrams with a main direction, like flow charts.
Layout Styles: Bus Router
For routing edges in an orthogonal bus-style.
Layout Styles: Components
For arranging any kind of disconnected diagram components.
Layout Styles: Tabular
Suitable to arrange elements in rows and columns.
Layout Styles: Labeling
Places node and edge labels.
Layout Styles: Partial
Suitable for incremental scenarios where new elements should be added to an existing diagram layout.
BPMN Editor
An editor for Business Process diagrams that features interactive editing, BPMN node styles and a specialized BPMN layout algorithm.
Process Mining
Shows how to create an animated visualization of a process flow.
Gantt Chart
An editor for Gantt charts.
Isometric Drawing
Displays graphs in 3D using an arbitrary projection and WebGL rendering.
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.
Large Graphs
Shows how to display large graphs with both good performance in WebGL2 and high quality in SVG.
Large Graph Aggregation
Shows how to use the smart node aggregation for drill-down exploration of a large graph.
Interactive Aggregation
Shows how to analyze a graph by interactively aggregating nodes with common properties.
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.
WebGL2 Styles
Shows the various graph element styles available in WebGL2 rendering.
CSS Styling
Shows how to style indicators and other templates.
Bezier Edge Style
Shows how to use the curved edge style consisting of Bezier splines.
Overview Styling
Shows several different rendering techniques and styles for the overview.
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.
Component Drag and Drop
A demo that shows how to clear space for a dropped component in an existing layout.
Large Collapsible Tree
Shows a tree graph, where a large number of nodes can be added interactively.
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 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.
Organization Chart Viewer
A viewer for organization charts.
Rendering Optimizations
Illustrates optimizations of the rendering performance for large graphs.
Events Viewer
Shows the multitude of events provided by the classes
IGraph, GraphComponent, and the Input Modes.
Z-Order
Shows how to adjust the z-order of graph elements and to keep this z-order consistent.
Custom Edge Creation
Shows how to provide directional ports and demonstrates interactive routing during edge creation.
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.
Node Types
Shows how different layout algorithms handle nodes with types.
Markdown Label
Use markdown to format the label text.
Rich Text Label
Edit markup labels with a WYSIWYG text editor.
Hierarchic Nesting
The hierarchic layout nicely expands and collapses sub-graphs organized in groups.
Folding With Layout
Shows how an automatic layout makes space for opening groups and reclaims the space of closing groups.
Incremental Hierarchic Layout
The incremental mode of the hierarchic layout style can fit new nodes and edges into the existing drawing.
Interactive Edge Routing
After each edit the edge paths are re-routed if necessary.
Edge Grouping
The hierarchic layout can group the paths or ports of edges.
EdgeRouter Grouping
The EdgeRouter can group the paths or ports of edges.
Organic Substructures
Shows organic layout, and its substructures and node types features.
Bus Routing
Shows how to group edges in bus structures.
Fill Area Layout
Shows how to fill free space after deleting nodes.
Clear Marquee Area
Shows how to automatically keep a marquee area clear of graph elements.
Clear Rectangle Area
Shows how to automatically keep a user-defined rectangular area clear of graph elements.
Node Overlap Avoiding
Shows how an automatic layout can remove node overlaps while a user interactively edits a graph.
Hierarchic Bus Structures
Bus structures in the hierarchic layout result in more compact arrangements.
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.
Custom Layout Stage
Custom layout stages can be used to solve unique layout problems that are not adequately covered by existing layout algorithms.
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.
Interactive Graph Restructuring
Shows how to interactively relocate subtrees from one parent to another.
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.
VSDX Export
Shows the VSDX Export functionality that comes with the separately available VSDX Export for yFiles for HTML add-on.
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
Interactively builds and modifies a graph from JSON business data using class
GraphBuilder.
Tree Builder
Interactively builds and modifies a graph from JSON business data using class
TreeBuilder.
Adjacency Graph Builder
Interactively builds and modifies a graph from JSON business data using class
AdjacencyGraphBuilder.
Simple Graph Builder
Automatically builds a graph from JSON business data using
GraphBuilder, AdjacencyGraphBuilder or TreeBuilder.
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.
GraphQL
Shows how to load data from a GraphQL service and display it with yFiles for HTML.
Neo4j
Shows how to load data from a Neo4j database and display it with yFiles for HTML.
React
Shows how to use yFiles for HTML with the React library.
React With TypeScript
Shows how to integrate yFiles in a basic React application with TypeScript based on Create React App.
Electron
Shows how to create a desktop app with Electron and yFiles for HTML.
Dojo
Shows the integration of yFiles for HTML in a basic Dojo app based on Dojo's cli-create-app.
Vue.js
Shows how to use yFiles for HTML with Vue.js.
Vue-CLI
Shows how to integrate yFiles for HTML in a basic Vue-CLI setup.
Web Components
Shows how to use yFiles for HTML with Web Components v1.
HTML Popup
Shows HTML pop-up panels that displays additional information about a clicked node or edge.
CSS3 Animations and Transitions
Shows how CSS3 transformations and animations can be applied to graph items.
WebGL2 Animations
Shows howto use WebGL2 animations to highlight interesting parts of a graph.
Editable Path Node Style
Shows a path-based node style whose control points can be moved by users.
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.
WebGL2 Icon Node
Shows how to render icon nodes with WebGL2.
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.
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.
Zoom-invariant Label Style
Shows label styles that are independent of the zoom level.
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 library modules with the AMD loading standard (require.js).
ES Module Loading
Loads the yFiles module resources using ES module imports.
Browserify
Shows how to bundle the yFiles library in a Browserify project.
Script Loading
Loads the yFiles modules using plain old <script> tags.
Web Worker Webpack
Shows how to run a yFiles layout algorithm in a Web Worker task using Webpack.
Web Worker Modules
Shows how to run a layout in a Web Worker task using module workers.
Web Worker UMD
Shows how to run a yFiles layout algorithm in a Web Worker task using AMD modules.
Webpack Lazy Load yFiles
Shows how to lazily load yFiles in a webpack project with dynamic imports.
Webpack Lazy Load Layout
Shows how to lazily load selected yFiles modules in a webpack project with dynamic imports.
Clipboard
Shows different ways of using the class GraphClipboard for Copy & Paste operations.
Rendering Order
Shows different rendering order settings.
Node Selection Resizing
Shows how to reshape a selection of nodes as one unit.
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 Configuration
Shows how resizing of nodes can be customized.
Reshape Handle Provider
Shows how to add resize handles to ports.
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.
WebdriverIO
Shows how to test a yFiles for HTML app in multiple browsers using WebdriverIO.
Jest
Shows how to test a yFiles for HTML app using Jest.
Jest Puppeteer
Shows how to test a yFiles for HTML app using Jest with the Puppeteer environment.
Layout Without View
Shows how to use the graph analysis and layout algorithms without a view and without the IGraph API
01 Creating the View
Introduces the GraphComponent class, the central UI element for working with graphs.
02 Creating Graph Elements
Shows how to create the basic graph elements.
03 Managing Viewport
Shows how to work with the viewport.
04 Setting Styles
Shows how to configure the visual appearance of graph elements using styles.
05 Label Placement
Shows how to control label placement with the help of so called label model parameters.
06 Basic Interaction
Shows the default interaction gestures that are provided by class GraphEditorInputMode.
07 Undo Clipboard Support
Shows how to use the undo and clipboard features.
08 Grouping
Shows how to configure support for grouped (or hierarchically organized) graphs.
09 Data Binding
Shows how to bind data to graph elements.
10 Layout
Shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.
11 Layout Data
Shows how to configure individual settings for each node for the automatic layout.
12 Analysis Algorithms
Shows how to use the graph analysis algorithms.
01 Custom Node Style
Shows how to create a custom node style.
02 Node Color
Shows how to change the style of the nodes based on their tag.
03 Update Visual And Render Data Cache
Shows how to implement high-performance rendering of nodes.
04 Is Inside
Shows how to override isInside() and getOutline() of NodeStyleBase.
05 Hit Test
Shows how to override isHit() and isInBox() of NodeStyleBase.
06 Get Bounds
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
Shows how to visually connect a label to its owner node with a line.
09 Is Visible
Shows how to override the method isVisible() of NodeStyleBase.
10 Custom Label Style
Shows how a custom label style.
11 Label Preferred Size
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
Shows how to implement high-performance rendering for labels.
13 Label Edit Button
Shows how to display a button on a label that starts the label editor.
14 Button Visibility
Shows how to hide the 'Label Edit' button based on the zoom level.
15 Using Data In Label Tag
Shows how to use data from a business object, which is stored in the label's tag, for rendering.
16 Custom Edge Style
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
Shows how to take the thickness of the edge into account when checking if the edge was clicked.
18 Edge Cropping
Shows how to crop an edge at the node's bounds.
19 Animated Edge Selection
Shows how to change the style of an edge if the edge is selected.
20 Custom Arrow
Shows a custom arrow.
21 Edge Performance
Shows how to optimize rendering performance for edges and arrows.
22 Arrow Thickness
Shows how to render the arrow based on a property of its edge.
23 Custom Ports
Shows a custom port style.
24 Style Decorator
Shows how to enhance an existing node style by adding visual decorators.
25 Custom Group Style
Shows how to implement a special node style for group nodes.
26 Custom Group Bounds
Shows how to customize the way that the group insets are calculated by implementing an ILayoutGroupBoundsCalculator.
27 Canvas Painting
Shows how to implement a zoom-dependent high-performance rendering using HTML5 Canvas painting for nodes.
28 Bridge Support
Shows how to enable bridges for a custom edge style.
29 Label Line Wrapping
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 is the base for the feature-specific demos of this tutorial.
Background Image
Shows how to add a background visualizations to a graph component.
Building Graphs From Data
Shows how to build a graph from data in JSON format.
Building Swimlanes From Data
Shows how to build a graph with swimlanes from data in JSON format.
Clickable Style Decorator
Illustrates an approach for handling clicks on specific areas of the style.
Drag And Drop
Shows how to enable dragging nodes from a panel and drop them into the graph component.
External Links
Shows how to add labels that act like external links and open in a new window.
Filtering
Shows how to configure graph filtering.
Filtering With Folding
Shows how to configure filtering and folding in the same application.
Folding
Shows how to enable collapsing and expanding of group nodes.
Graph Copy
Shows how to copy a graph or parts of a graph.
Graph Decorator
Shows how to decorate graph items to change their behavior or visualization.
Simple Highlight Decorator
Shows how to highlight nodes and edges when the mouse hovers over them.
Complex Highlight Decorator
Shows how to highlight nodes with different effects based on data stored in their tags.
Graph Search
Shows how to search for specific nodes in a graph.
Grid Snapping
Shows how to enable grid snapping during interactive changes.
Save and Load GraphML
Shows how to use GraphML input and output.
Custom Data in GraphML
Shows how to read and write additional data from and to GraphML.
Label Text Wrapping
Shows how to enable label text wrapping and trimming.
Level of Detail Style
Shows a node style that hides details when zooming out.
Markup Labels
Markup label style lets you use html-like markup to structure and style the label text.
Native Listeners
Illustrates how to register native event listeners to a SVG elements of a style.
Orthogonal Edges
Shows how to enable interactive orthogonal edge editing.
Rectangular Indicator
Shows how to add an interactive rectangular indicator to the graph component.
Smart Click Navigation
Shows the how to scroll and zoom to the area of interest by single edge-clicks.
Snapping
Shows how to enable snapping (guide lines) for interactive changes.
Tooltips
Shows how to enable tooltips for graph items.
Accessibility
Shows how to use the aria-live region to update screen readers.
WebGL2 Rendering
Shows how to enable the WebGL2 rendering mode.