yFiles interactive demos

Suitable for any kind of directed diagram, like flow charts, BPMN diagrams and more

Suitable for many types of undirected graphs and complex networks, like social networks, WWW visualizations or knowledge representation.

For routing edges in an orthogonal, octilinear or curved style.

Suitable to visualize tree structures like organization charts or for dataflow analysis.

Suitable to visualize tree-like structures in a radial fashion.

Suitable for diagrams with orthogonal edges such as UML, database schemas, system management and more.

Suitable for applications in social networking, for WWW visualization and network management

Suitable to visualize directed diagrams with a certain flow.

Suitable to visualize diagrams with few edges in a compact disk-like fashion.

Suitable for diagrams with a main direction, like flow charts.

For routing edges in an orthogonal bus-style.

For arranging any kind of disconnected diagram components.

Suitable to arrange elements in rows and columns.

Places node and edge labels.

Suitable for incremental scenarios where new elements should be added to an existing diagram layout.

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

Shows how to create an animated visualization of a process flow.

Interactively explore the ownership of companies and their management relationships.

An editor for Gantt charts.

Displays graphs in 3D using an arbitrary projection and WebGL rendering.

Example of a monitoring tool for computer networks.

Shows how to render metaball-like background visualizations.

Draws a graph on top of an interactive map.

Customizes defaults and input gestures to support fast creation of flowcharts.

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

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.

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

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

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

An interactive radial dendrogram visualization of the Tree of Life.

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

Shows how to create a Tag Cloud.

Shows how to perform critical path analysis in project management.

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

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

Shows how an automatic layout makes space for opening groups and reclaims the space of closing groups.

Shows how to display large graphs with both good performance in WebGL2 and high quality in SVG.

Shows how to use the smart node aggregation for drill-down exploration of a large graph.

Shows how to analyze a graph by interactively aggregating nodes with common properties.

Shows a tree graph, where a large number of nodes can be added interactively.

Shows interactive collapsing and expanding of subtrees of a graph.

Illustrates optimizations of the rendering performance for large graphs.

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

Shows the neighborhood of selected nodes arranged on concentric circles.

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

Shows a floating lens that magnifies the cursor's surroundings.

Shows how to style and animate graph items with CSS.

Shows the features of the DefaultLabelStyle class.

Shows the different node shapes that can be implemented with the RectangleNodeStyle class.

Shows the features of the ShapeNodeStyle class.

Shows the group and folder node visualization options offered by the GroupNodeStyle class.

Shows the features of the ArrowNodeStyle class.

Shows the features of the ArrowEdgeStyle class.

Shows howto use WebGL2 animations to highlight interesting parts of a graph.

Shows how to achieve a simple level of detail effect by fading in/out labels at a certain zoom value using WebGL2 rendering.

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

Shows how to compute and highlight intersections between graph items.

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

Shows how transitivity graph analysis algorithms can be applied to solve reachability problems.

Shows the graph editing features of the graph component.

Shows how various cursors can be used to indicate valid gestures at the current location.

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

Displays sample graphs from various application domains.

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

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

Shows different rendering order settings.

Shows how to adjust the z-order of graph elements and to keep this z-order consistent.

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

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

Seamlessly zoom into the contents of deeply nested group nodes, similar to "deep zoom" for images

Shows simple operations for aligning and distributing nodes.

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

Shows SVG template styles for nodes, labels and ports.

Presents a versatile and customizable template node style.

Presents a versatile and easily customizable template node style based on JSX and React.

Presents a versatile and easily customizable template node style based on Vue.

Presents a versatile and easily customizable template node style based on the Lit templating framework.

Shows the various graph element styles available in WebGL2 rendering.

Shows the possible styling configurations for selections in WebGL2 rendering.

Shows how to style indicators and other templates.

Shows various interaction visualization themes simultaneously.

Shows how a node style can be augmented with isometric bars.

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

Shows a path-based node style whose control points can be moved by users.

Shows how to render icon nodes with WebGL2.

Illustrates an approach for handling clicks on specific areas of the style.

Shows how to combine node visualizations from several styles.

Shows a node style that hides details when zooming out.

Shows a node which contains re-arrangeable rows.

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

Shows how to use the curved edge style consisting of Bezier splines.

Shows label styles displaying arrows that always point to the source or target port.

Markup label style lets you use html-like markup to structure and style the label text.

Use markdown to format the label text.

Edit markup labels with a WYSIWYG text editor.

Shows several different rendering techniques and styles for the overview.

Shows how a custom HTML-based node style can be used to create interactive nodes.

Shows how HTML can be used for label rendering with a custom label style.

Shows label styles that are independent of the zoom level.

Shows how to create a simple custom arrow for edges.

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

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

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

Shows a chord diagram that emphasizes the magnitude of connections between nodes.

Shows a non-ribbon chord diagram that emphasizes the traceability of the connections.

Shows how to visualize a graph as an arc diagram.

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

A demo that shows how to clear space for a dropped component in an existing layout.

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

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

Shows how different layout algorithms handle nodes with types.

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

After each edit the edge paths are re-routed if necessary.

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

The EdgeRouter can group the paths or ports of edges.

Shows how to configure organic layout for annotating points on a diagram.

Shows how to configure organic layout to create height profile visualization

Shows how to configure organic layout for visualizing metabolic pathways.

Shows organic layout, and its substructures and node types features.

Shows circular layout, and its substructures and node types features.

Shows how to group edges in bus structures.

Shows how to fill free space after deleting nodes.

Shows how to automatically keep a marquee area clear of graph elements.

Shows how to automatically keep a user-defined rectangular area clear of graph elements.

Shows how an automatic layout can remove node overlaps while a user interactively edits a graph.

Shows how to align nodes on horizontal and/or vertical lines.

Bus structures in the hierarchic layout result in more compact arrangements.

The hierarchic layout can arrange subcomponents with different layout styles.

Shows how to configure the tabular groups feature of the hierarchical layout.

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

Custom layout stages can be used to solve unique layout problems that are not adequately covered by existing layout algorithms.

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

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

Shows how to create a simple partition grid.

Shows how to interactively relocate subtrees from one parent to another.

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

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

Shows the 'interactive organic' layout algorithm.

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

Shows how to use different node placer in TreeLayout.

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

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

Shows how to provide directional ports and demonstrates interactive routing during edge creation.

Shows how to visualize genealogical graphs (family trees).

Shows edge-to-edge connections.

Interactively builds and modifies a graph from JSON business data using class GraphBuilder.

Interactively builds and modifies a graph from JSON business data using class TreeBuilder.

Interactively builds and modifies a graph from JSON business data using class AdjacencyGraphBuilder.

Automatically builds a graph from JSON business data using GraphBuilder, AdjacencyGraphBuilder or TreeBuilder.

Builds a graph using GraphBuilder and connects the items to specific ports.

Builds a graph using AdjacencyGraphBuilder and connects the items to specific ports.

Builds a graph using TreeBuilder and connects the items to specific ports.

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

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

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

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

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

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

Shows how to precompile the WebGL2 styles you want to use

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

Shows how to use an Angular component to visualize graph nodes.

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

Shows how to integrate yFiles in a basic React application with class components.

Shows how to use a React component to visualize graph nodes.

Shows how to integrate yFiles in a basic Preact application with TypeScript.

Shows how to integrate yFiles in a Vue 3 app with TypeScript and Vite.

Shows how to use a Vue component to visualize graph nodes.

Shows how to integrate the yFiles library in a Svelte project.

Shows how to load data from a GraphQL service and display it with yFiles for HTML.

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

Shows how to use yFiles for HTML with the Next.js library.

Shows how to integrate yFiles in a SolidJS app with TypeScript and Vite.

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

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

Loads the yFiles library modules with the AMD loading standard (require.js).

A basic example of loading the yFiles library modules.

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

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

Shows how to run a yFiles layout algorithm in a Web Worker task using Webpack.

Shows how to run a layout in a Web Worker task using module workers.

Shows how to run a yFiles layout algorithm in a Web Worker task using AMD modules.

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

Shows how to lazily load yFiles in a webpack project with dynamic imports.

Shows how to lazily load selected yFiles modules in a webpack project with dynamic imports.

Shows how to integrate the yFiles library in a Vite project.

Shows how to integrate the yFiles library in a Parcel project.

Shows how to integrate the yFiles library in a Web Dev Server project.

Shows how to test a yFiles for HTML app in multiple browsers using WebdriverIO.

Shows how to test a yFiles for HTML app using Cypress.

Shows how to test a yFiles for HTML app using Jest.

Shows how to test a yFiles for HTML app using Jest with the Puppeteer environment.

Shows how to test a yFiles for HTML app using Vitest.

Shows how to test a yFiles for HTML app using Playwright.

Shows how to test a yFiles for HTML app using Selenium WebDriver.

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

Shows a clipboard which grays elements out upon cut and only removes them when they are finally pasted.

Shows how to reshape a selection of nodes as one unit.

Shows how to implement and use a custom label model.

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

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

Shows how the snapping feature can be customized.

Shows how to drag graph items out of the graph component to another element.

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

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

Shows drag and drop of nodes, groups and labels.

Shows drag and drop of graphs consisting of multiple items.

Shows how to change the color of nodes and edges using drag and drop operations.

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

Shows customizations of the interactive label editing.

Shows how to implement custom handles that allow to interactively change the shape of an ArrowNodeStyle.

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

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

Shows how to customize orthogonal edge editing.

Shows how edge creation can be customized.

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

Shows how reparenting of nodes can be customized.

Shows how resizing of nodes can be customized.

Shows how to add resize handles to ports.

Shows how to restrict interactive editing with GraphEditorInputMode.

Shows how to configure a lasso tool for freeform selection.

Shows how to customize the MarqueeSelectionInputMode class to create new nodes.

Shows how to configure GraphEditorInputMode for single selection mode.

Shows how resizing of nodes can be restricted.

Shows how to use a custom input mode adding temporary buttons for model items.

Shows how to use the graph analysis and layout algorithms without a view and without the IGraph API

Shows how to add a background visualizations to a graph component.

Shows how to build a graph from data in JSON format.

Shows how to build a graph with swimlanes from data in JSON format.

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

Shows how to configure graph filtering.

Shows how to configure filtering and folding in the same application.

Shows how to enable collapsing and expanding of group nodes.

Shows how to copy a graph or parts of a graph.

Shows how to decorate graph items to change their behavior or visualization.

Shows how to highlight nodes and edges when the mouse hovers over them.

Shows how to highlight nodes with different effects based on data stored in their tags.

Shows how to search for specific nodes in a graph.

Shows how to enable grid snapping during interactive changes.

Shows how to use GraphML input and output.

Shows how to read and write additional data from and to GraphML.

Shows how to enable label text wrapping and trimming.

Illustrates how to register native event listeners to a SVG elements of a style.

Shows how to enable interactive orthogonal edge editing.

Shows how to add an interactive rectangular indicator to the graph component.

Shows the how to scroll and zoom to the area of interest by single edge-clicks.

Shows how to enable snapping (guide lines) for interactive changes.

Shows how to subdivide an edge when a node is dragged on it.

Shows how to use a theme to change the look-and-feel of an application.

Shows how to enable tooltips for graph items.

Shows how to use the aria-live region to update screen readers.

Shows how to enable the WebGL2 rendering mode.

Shows how to add an overview component to the application.

Shows common configuration options for hierarchical layout.

Shows how to run the hierarchical layout on a predefined set of nodes.

Shows how to use a PortCandidateSet with hierarchical layout.

Shows how to configure edge grouping for hierarchical layout.

Shows how to configure hierarchical layout with a given layering.

Shows how to use constraints to control layering and sequencing in the hierarchical layout.

Shows how to use constraints to control sequencing in hierarchical layout.

Shows how to use constraints to control layering in hierarchical layout.

Shows how to align a set of nodes with hierarchical layout.

Shows how to configure automatic label placement of hierarchical layout.

Shows how to configure the hierarchical layout such that it yields maximally compact group nodes.

Shows common configuration options for organic layout.

Shows how to run the organic layout on a predefined set of nodes.

Shows how to configure automatic label placement of organic layout.

Shows how to configure the layout of substructures in the organic layout.

Shows how to configure constraints for the organic layout algorithm.

Shows common configuration options for the edge routing algorithm.

Shows how to run the edge router on a predefined set of edges.

Shows how to configure the edge routing algorithm to produce orthogonal bus-style paths.

Shows common configuration options for the tree layout.

Shows how to use different node placers in tree layout.

Shows common configuration options for the orthogonal layout.

Shows how to use different layouts for group nodes using the recursive group layout.

Shows how to configure the cactus group layout to arrange grouped graphs.

Shows how to configure the compact disk layout to arrange children of group nodes.

Shows how to configure the tabular layout to create compact drawings

Introduces the GraphComponent class, the central UI element for working with graphs.

Shows how to create the basic graph elements.

Shows how to work with the viewport.

Shows how to configure the visual appearance of graph elements using styles.

Shows how to control label placement with the help of so called label model parameters.

Shows the default interaction gestures that are provided by class GraphEditorInputMode.

Shows how to use the undo and clipboard features.

Shows how to configure support for grouped (or hierarchically organized) graphs.

Shows how to bind data to graph elements.

Shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.

Shows how to configure individual settings for each node for the automatic layout.

Shows how to use the graph analysis algorithms.

Introduces the GraphBuilder class which helps to transfer business data into a graph.

Shows how to retrieve nodes from different data sources.

Shows how to retrieve edges from different data sources.

Shows how to create group nodes to visualize hierarchy information within the business data.

Shows how to create group nodes implicitly.

Shows how to associate different node and edge styles with the business data.

Shows how to retrieve labels for nodes and edges from the business data.

Shows how to associate different label styles with the business data.

Shows how to provide the business data in the elements' tags.

Shows how to load positions for graph elements from the business data.

Shows how to update the graph after incremental changes in the business data.

Shows how to build a graph from data with implicit relationship information using AdjacencyGraphBuilder.

Shows how to build a graph from tree structured data using TreeBuilder.

Create a simple node style using SVG

Create a simple node style with a custom shape using SVG

Optimize rendering performance of an SVG node style

Make a custom node style configurable by adding properties

Adjust how the node style renders the node using the node business data

Adjust the node style to render text defined by the node business data

Customize which area of a node can be hovered and clicked

Customize where edges at the node are cropped

Adjust the visibility check to parts of the node visualization that lie outside of the node bounds

Adjust the node boundaries to parts of the node visualization that lie outside of the node bounds

Create a basic group node style

Adjust the group node style minimum size and size calculation

Visualize a label using a basic text element

Use convenience functionality to place the text

Add a customized background to the label text

Let the label style set the desired label size

Optimize the render performance of the label style

Configure horizontal and vertical text alignment inside the label bounds

Add automatic line wrapping to the label style

Use data from the label tag in the visualization

Configure which parts of the label visualization are clickable

Adjust the visibility check to parts of the label visualization that lie outside of the label bounds

Adjust the label boundaries to parts of the label visualization that lie outside of the label bounds

Create a simple edge style using SVG

Crop the edge path at the outline of its source and target nodes.

Create parallel polylines for edge visualization.

Optimize rendering performance of an SVG edge style

Make a custom edge style configurable by adding properties

Adjust how the edge style renders the edge using the edge business data

Customize which area of a edge can be hovered and clicked

Adjust the visibility check to parts of the edge visualization that lie outside of the edge bounds

Adjust the edge boundaries to parts of the edge visualization that lie outside of the edge path

Adjust the edge visualization to resolve the visual ambiguity induced by intersecting edge paths

Add arrows to indicate the edge’s direction

Create a custom arrow that matches our edge style

Visualize a port as a basic circle shape

Configuring the port size in the style

Optimize rendering performance of an SVG port style

Set the color of the port based on the number of connected edges

Customize which area of a port can be hovered and clicked

Crop the edge at the port outline