yFiles interactive demos

Online demos

See what kind of applications you could create using the yFiles diagramming library. 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, that help analyzing 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: Compact Disk

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

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.

Company Ownership Chart

Interactively explore the ownership of companies and their management relationships.

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.

Metaball Groups

Shows how to render metaball-like background visualizations.

Map

Draws a graph on top of an interactive map.

GraphWizard for Flowchart

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

Flowchart Editor

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

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.

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.

Sankey Diagram

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

Tree of Life

An interactive radial dendrogram visualization of the Tree of Life.

Tree Map

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

Tag Cloud

Shows how to create a Tag Cloud.

Critical Path Analysis (CPA)

Shows how to perform critical path analysis in project management.

Logic Gates

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

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.

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.

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.

Rendering Optimizations

Illustrates optimizations of the rendering performance for large graphs.

Neighborhood View

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

Neighborhood Circles

Shows the neighborhood of selected nodes arranged on concentric circles.

Contextual Toolbar

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

Magnifying Glass

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

CSS Item Style

Shows how to style and animate graph items with CSS.

Default Label Style

Shows the features of the DefaultLabelStyle class.

Rectangle Node Style

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

Shape Node Style

Shows the features of the ShapeNodeStyle class.

Group Node Style

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

Arrow Node Style

Shows the features of the ArrowNodeStyle class.

Arrow Edge Style

Shows the features of the ArrowEdgeStyle class.

WebGL2 Animations

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

WebGL2 Label Fading

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

Clustering Algorithms

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

Intersection Detection

Shows how to compute and highlight intersections between graph items.

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.

Graph Editor

Shows the graph editing features of the graph component.

Valid Begin Cursors

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

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.

HTML Popup

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

Structure View

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

Rendering Order

Shows different rendering order settings.

Z-Order

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

Rotatable Nodes

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

Touch Interaction

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

Deep Zoom

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

Arrange Objects

Shows simple operations for aligning and distributing nodes.

Custom Styles

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

Template Styles

Shows SVG template styles for nodes, labels and ports.

String Template Node Style

Presents a versatile and customizable template node style.

React JSX Component Style

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

Vue Template Node Style

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

Lit Template Node Style

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

WebGL2 Styles

Shows the various graph element styles available in WebGL2 rendering.

WebGL2 Selection Styles

Shows the possible styling configurations for selections in WebGL2 rendering.

CSS Styling

Shows how to style indicators and other templates.

Theme Variants

Shows various interaction visualization themes simultaneously.

Isometric Bar Chart Node Style

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

d3 Chart Nodes

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

Editable Path Node Style

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

WebGL2 Icon Node

Shows how to render icon nodes with WebGL2.

Clickable Style Decorator

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

Composite Node Style

Shows how to combine node visualizations from several styles.

Level of Detail Style

Shows a node style that hides details when zooming out.

List Node

Shows a node which contains re-arrangeable rows.

Data Table

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

Bezier Edge Style

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

Directed Edge Label Style

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

Markup Label

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

Markdown Label

Use markdown to format the label text.

Rich Text Label

Edit markup labels with a WYSIWYG text editor.

Overview Styling

Shows several different rendering techniques and styles for the overview.

HTML Controls

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

HTML Label Style

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

Zoom-invariant Label Style

Shows label styles that are independent of the zoom level.

Simple Arrow Style

Shows how to create a simple custom arrow for edges.

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.

Edge Bundling

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

Chord Diagram

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

Non-ribbon Chord Diagram

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

Arc Diagram

Shows how to visualize a graph as an arc diagram.

Maze Routing

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

Component Drag and Drop

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

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.

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

Boundary Labeling

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

Height Profile

Shows how to configure organic layout to create height profile visualization

Metabolic Pathways

Shows how to configure organic layout for visualizing metabolic pathways.

Organic Substructures

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

Circular Substructures

Shows circular 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.

Node Alignment

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

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.

Tabular Groups

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

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.

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.

Bridges

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

Custom Edge Creation

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

Family Tree

Shows how to visualize genealogical graphs (family trees).

Edge To Edge

Shows edge-to-edge connections.

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.

Port-aware Graph Builder

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

Port-aware Adjacency Graph Builder

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

Port-aware Tree Builder

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

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.

File Operations

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

Events Viewer

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

WebGL2 Precompilation

Shows how to precompile the WebGL2 styles you want to use

Angular CLI

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

Angular Component Node Style

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

React

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

React Class Components

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

React Component Node Style

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

Preact

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

Vue

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

Vue Component Node Style

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

Svelte

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

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.

Next.js

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

SolidJS

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

Node.js

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

Web Components

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

AMD Loading

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

Basic Module Loading

A basic example of loading the yFiles library modules.

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

Shows how to integrate the yFiles library in a webpack project using ES 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.

Vite

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

Parcel

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

Web Dev Server

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

WebdriverIO

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

Cypress

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

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.

Vitest

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

Playwright

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

Selenium WebDriver

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

Clipboard

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

Deferred Cut Clipboard

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

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.

GraphML

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

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.

Drag From Component

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

Context Menu

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

Simple Drag And Drop

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

Drag and Drop

Shows drag and drop of nodes, groups and labels.

Graph Drag and Drop

Shows drag and drop of graphs consisting of multiple items.

Custom Drag and Drop

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

Edge Reconnection

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

Label Editing

Shows customizations of the interactive label editing.

Custom Handle Provider

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

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 Edge Editing Customization

Shows how to customize 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.

Restricted Editing

Shows how to restrict interactive editing with GraphEditorInputMode.

Lasso Selection

Shows how to configure a lasso tool for freeform selection.

Marquee Node Creation

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

Single Selection

Shows how to configure GraphEditorInputMode for single selection mode.

Size Constraint Provider

Shows how resizing of nodes can be restricted.

Button Input Mode

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

Layout Without View

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

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.

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.

Native Listeners

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

Orthogonal Edge Editing

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.

Subdivide Edges

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

Theming

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

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.

Overview Component

Shows how to add an overview component to the application.

Hierarchic Layout

Shows common configuration options for hierarchical layout.

Incremental Hierarchic Layout

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

Hierarchic Layout with PortCandidateSet

Shows how to use a PortCandidateSet with hierarchical layout.

Hierarchic Layout with Edge Grouping

Shows how to configure edge grouping for hierarchical layout.

Hierarchic Layout with Given Layering

Shows how to configure hierarchical layout with a given layering.

Hierarchic Layout with Constraints

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

Hierarchic Layout with Sequence Constraints

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

Hierarchic Layout with Layer Constraints

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

Hierarchic Layout with Node Alignment

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

Hierarchic Layout with Edge Labeling

Shows how to configure automatic label placement of hierarchical layout.

Compact Groups in Hierarchic Layout

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

Organic Layout

Shows common configuration options for organic layout.

Incremental Organic Layout

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

Organic Layout with Edge Labeling

Shows how to configure automatic label placement of organic layout.

Organic Layout with Substructures

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

Organic Layout with Constraints

Shows how to configure constraints for the organic layout algorithm.

Edge Router

Shows common configuration options for the edge routing algorithm.

Incremental Edge Router

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

Edge Router with Buses

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

Basic Tree Layout

Shows common configuration options for the tree layout.

Tree Layout with Node Placers

Shows how to use different node placers in tree layout.

Orthogonal Layout

Shows common configuration options for the orthogonal layout.

Recursive Group Layout

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

Cactus Group Layout

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

Compact Disk Groups

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

Compact Tabular Layout

Shows how to configure the tabular layout to create compact drawings

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

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

02 Create Nodes Sources

Shows how to retrieve nodes from different data sources.

03 Create Edges Sources

Shows how to retrieve edges from different data sources.

04 Group Nodes

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

05 Implicit Grouping

Shows how to create group nodes implicitly.

06 Configure Styles

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

07 Create Labels Sources

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

08 Configure Labels

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

09 Configure Tags

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

10 Configure Layout

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

11 Update Graph

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

12 Adjacency Graph Builder

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

13 Tree Builder

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

01 Create A Rectangle

Create a simple node style using SVG

02 Create A Custom Shape

Create a simple node style with a custom shape using SVG

03 Render Performance

Optimize rendering performance of an SVG node style

04 Making the Style Configurable

Make a custom node style configurable by adding properties

05 Data from Tag

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

06 Rendering Text

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

07 Hit-Testing

Customize which area of a node can be hovered and clicked

08 Edge Cropping

Customize where edges at the node are cropped

09 Item Visibility

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

10 Render Boundaries

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

11 Group Node Style

Create a basic group node style

12 Group Node Style Behavior

Adjust the group node style minimum size and size calculation

01 Rendering the Label Text

Visualize a label using a basic text element

02 Using Text Utilities

Use convenience functionality to place the text

03 Adding a Background Shape

Add a customized background to the label text

04 Preferred Label Size

Let the label style set the desired label size

05 Render Performance

Optimize the render performance of the label style

06 Text Alignment

Configure horizontal and vertical text alignment inside the label bounds

07 Line Wrapping

Add automatic line wrapping to the label style

08 Data From Tag

Use data from the label tag in the visualization

09 Hit-Testing

Configure which parts of the label visualization are clickable

10 Visibility

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

11 Bounds

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

01 Create a Polyline

Create a simple edge style using SVG

02 Crop the Polyline

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

03 Create Parallel Polylines

Create parallel polylines for edge visualization.

04 Render Performance

Optimize rendering performance of an SVG edge style

05 Making the Style Configurable

Make a custom edge style configurable by adding properties

06 Data from Tag

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

07 Hit-Testing

Customize which area of a edge can be hovered and clicked

08 Item Visibility

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

09 Render Boundaries

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

10 Bridge Support

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

11 Adding Arrows

Add arrows to indicate the edge’s direction

12 Custom Arrow

Create a custom arrow that matches our edge style

01 Rendering the Port

Visualize a port as a basic circle shape

02 Port Size

Configuring the port size in the style

03 Render Performance

Optimize rendering performance of an SVG port style

04 Conditional Port Coloring

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

05 Hit-Testing

Customize which area of a port can be hovered and clicked

06 Edge Cropping

Crop the edge at the port outline

Why, how, what? —
Just ask the diagramming experts!

Our team is happy to advise you – no strings attached. Let's talk about your project and find the perfect solution for your needs!

E-mail: hello@yworks.com

The data you enter will only be used to contact you regarding your request.
Learn more in our privacy policy.