yFiles is a powerful programming library for visualizing any kind of diagram, graph, or network. Using yFiles you can display data from many diverse data sources., and easily enable interactive creation, viewing, and editing of graphs. Automatic diagram layout and analysis algorithms help users understand even the most complex graph structures.
Throughout this page, you will find various interactive Playgrounds that allow you to test and experience the extensive feature set of yFiles right here on the page. Whenever you see the Playground symbol, you can click and try out the examples directly. This hands-on approach helps you understand the capabilities and potential of yFiles in an engaging and practical way.
Enjoy exploring!
Want to explore yFiles before diving into the full evaluation?
Check out the yFiles Playground.
yFiles provides rich visualizations for nodes, edges, labels, and ports along with options for styling selection and highlighting. If the desired visualization is not covered by the default ones, you can easily create completely custom visualizations.
The yFiles library and accompanying demos provide visualizations for many different use cases out of the box, such as:
Each implementation has its own set of attributes, allowing complete control over its appearance.
yFiles provides several predefined edge visualizations that allow for further customization.
All edge styles support arrowheads on both ends, as well as strokes with settings for thickness, color, dashing and linecaps.
Predefined styles support drawing edges as an arc or polyline.
In addition, each style has its own unique settings, like rounded corners or arc height.
yFiles also provides animations to smoothly transition a graph from one state to another, such as when layouts are recalculated.
Visualizations can be tied to custom business data attached to graph items. For example, a node style for an employee in an organization chart can easily display the employee's name, position and other details directly from the associated data.
yFiles provides decorations that are displayed when graph items are selected, focused, or highlighted. They can be disabled individually, or changed e.g. to a different color or replaced by something completely custom if needed.
Improve diagram comprehension by displaying only recognizable elements at specific zoom levels. Level-of-detail rendering hides unreadable or unnecessary visuals, making room for a clearer overall picture.
Easily wrap existing styles in a fully controllable level-of-detail rendering and drastically improve diagram comprehension (and performance), even for large data models.
Easily add text labels to nodes and edges to display additional information. Various placement options, such as inside or outside a node or on an edge near the source or target, ensure labels stay correctly positioned, even when items are moved.
Labels are not limited to short text phrases, they can hold multi-line text and show icons.
yFiles offers extensive formatting options, e.g. font, line spacing, and decorations, word wrapping and alignment.
Crossing edges can make complex diagrams harder to read. Bridges clarify the paths taken by those edges.
yFiles provides multiple bridging styles and crossing policies that determine how lines should bridge or cross each other.
The canvas isn't limited to nodes, edges, ports, and labels alone. You can add arbitrary visualizations either in the background or on top of other graph items. Adding custom backgrounds, brand logos, legends, rulers or even dynamic helpers like snap lines help make a yFiles-powered application stand out.
The drawing of diagram elements relative to each other can easily be changed. For example, changing edges to appear above nodes instead of below can be arranged simply by changing their order.
These step-by-step tutorials guide you through the implementation of custom styles for nodes, edges, labels, and ports.
In addition to the primary visualization, each tutorial covers related topics like hit testing, performance optimization, animation, business data integration and edge bridging support.
All diagrams consist of nodes and edges, of course. yFiles adds a number of unique features that help working with them, especially when they're getting larger. Grouping and folding lets you collapse and expand parts of the diagram. Swimlanes visually group parts of a diagram into rows and columns. Filtering can temporarily hide elements that are not important in the current view. A variety of import and export features make it easy to get your data into and out of graphs.
yFiles supports grouping of nodes into other nodes. Edges can still connect freely to any of them, including connections between a group and its children or between children of different groups.
Collapsing a group node hides the child elements of that group, they will be restored when the group is expanded again.
Custom actions are possible when groups are collapsed or expanded, such as running an incremental layout algorithm, or fetching data to create child nodes in the expanded group node.
Increase readability of large and complex diagrams by hiding less important parts. This is a similar concept to folding above, but not tied to having explicit parent-child relationships between nodes.
Possible uses include exploring large diagrams without having to show the whole diagram at once, or incremental search and filtering capabilities to quickly focus on relevant elements.
Diagram types like BPMN use swimlanes to visually associate activities to a role. yFiles supports swimlanes and general tabular structures in which diagram items can be placed. They are supported by automatic layouts as well.
Easily and quickly build diagrams from any structured data source like CSV, JSON, XML, databases, and others.
Loading and saving diagrams using the standard graph exchange format GraphML is natively supported, including the information for styles, grouping, folding, and all the other yFiles features.
yFiles enables you to export diagrams to popular image and graphic formats, as well as print them. Note that not all formats are supported by every variant of yFiles.
Export diagrams to common bitmap image formats such as PNG, JPEG, BMP, and GIF.
Create vector graphics such as PDF, SVG, EMF, and XPS from yFiles diagrams.
Export graphs to the VSDX format with the VSDX Export for yFiles for HTML add-on. VSDX is a file format for diagrams used by Microsoft Visio®.
Apart from displaying diagrams, yFiles also offers versatile interaction possibilities. With convenient default interaction modes, allowing the user to navigate through a diagram via panning and zooming. Or you can set up a complete diagram editor for creating and editing graphs, with just a single line of code. Of course, everything about the interaction can be extensively customized to your requirements, and if the built-in gestures don't suffice, it's easy to add custom interactions.
Zooming, panning, and scrolling are built-in features and work just as well with touch as with a mouse. All of those features can be customized to fit your application perfectly. For instance, you can change whether or how those gestures are invoked, and you can also limit the zoom level or viewable area.
yFiles includes an interaction mode designed for intuitive and customizable diagram creation, adaptable to various specific domains.
For instance, edge creation can be restricted to only connect compatible entities. Label editing can be disabled for items that should not be labeled. Keep the aspect ratio when resizing certain nodes (e.g. those showing an image should not be distorted) or group items together. The customization possibilities are almost limitless.
All those features work with touch as well as with a mouse, customizable keyboard shortcuts also exist for many common operations.
Select items with a single click or use marquee (rubber-band) selection to select multiple items with a single gesture. Selected items can be manipulated and moved as one.
The selection process is highly customizable, allowing for the addition of custom business rules to determine which items can be selected and under what conditions.
yFiles provides fine-grained events for everything related to interaction. This includes low-level events like key presses and mouse movements, but also high-level events, for example when an edge creation gesture starts or ends or when items are selected.
Listen to any event and trigger custom actions either as a lightweight way to customize the experience or to keep the diagram in sync with an underlying business model.
Create drag and drop palettes from which users can drop new elements into the diagram. Dropping diagram items is fully supported by yFiles; the only thing needed is a palette with the desired items.
Dropping a node into a group node will also automatically create the new node as a child of the group. Snap lines during the gesture that help align the new items are supported as well.
Manually aligning nodes and edges can be cumbersome and time-consuming and even then it won't be pixel-perfect. Snapping shows visual guides during gestures near other elements to ease alignment. Ensuring that a node has the same height as other nodes in the diagram is just as easy as aligning a node in the exact center of two other nodes or creating edges that are orthogonal.
Another type of snapping is snapping to a grid, which helps align nodes and edges in a regular grid. The grid size and which elements should snap to the grid can be customized.
If all that is not enough, then custom snapping options can be added as well, for instance to implement guidelines.
While snapping helps to create edges with only 90° bends, that property is lost when moving the nodes at either end, and snapping also doesn't guarantee that an edge is always orthogonal. Orthogonal edge editing ensures that no matter how the diagram is edited, edges that are orthogonal will stay that way.
Edge segments can also be moved without disrupting their orientation.
yFiles offers comprehensive support for undoing and redoing diagram modifications. Everything that can be changed in a diagram can also be undone.
Modifications can be single changes, like adding a node or composite changes where many items change at once, e.g. moving multiple items.
There is no limit to how many operations can be undone, except available memory.
yFiles supports context menus on arbitrary diagram items that can be dynamically populated. That way every item can have a context menu specific to that item.
A clipboard is available out of the box supporting all common clipboard operations, like cut, copy, paste and duplicate. The clipboard can also handle a number of advanced scenarios, such as copying a label to a different item or copying edges between copied nodes automatically.
All aspects of the clipboard can be customized and it's even possible to add custom actions when certain items are copied or pasted.
Easily add tooltips to diagram items that show when hovering the mouse pointer over the respective item. Tooltips can be generated dynamically based on business data tied to an item and don't have to be static.
Usually edges in graphs only connect nodes to other nodes. However, yFiles also supports connecting edges to other edges. This is directly supported by the yFiles diagram model, ensuring that connection points adjust accordingly when edges are modified or moved.
This sandbox allows you to interact with a dynamically generated graph using yFiles. You can create and modify nodes and edges, and observe how the graph layout automatically updates. Toggle features such as automatic layout and snapping to see how they affect the organization and alignment of your diagram. Experiment with different interactions to understand the powerful capabilities of yFiles for creating and managing complex graph structures effortlessly.
graphComponent.fitGraphBounds()
// Create a random graph with 20 nodes and 19 edges
playground.createRandomGraph(graphComponent.graph, 20, 19);
// Create a new GraphEditorInputMode with snap and orthogonal edge editing contexts
const graphEditorInputMode = new GraphEditorInputMode({
snapContext: new GraphSnapContext(),
orthogonalEdgeEditingContext: new OrthogonalEdgeEditingContext(),
});
// Set the input mode for the graph component
graphComponent.inputMode = graphEditorInputMode;
// #region Configure automatic re-arrangement after interactive editing
// Add listeners to apply layout on various user interactions
graphEditorInputMode.addDeletedSelectionListener(applyLayout);
graphEditorInputMode.createEdgeInputMode.addEdgeCreatedListener(applyLayout);
graphEditorInputMode.handleInputMode.addDragFinishedListener(applyLayout);
graphEditorInputMode.moveInputMode.addDragFinishedListener(applyLayout);
// Function to apply the layout
function applyLayout(
sender?:
| HandleInputMode
| MoveInputMode
| GraphEditorInputMode
| CreateEdgeInputMode,
) {
const graphEditorInputMode = graphComponent.inputMode as GraphEditorInputMode;
const hierarchic = new HierarchicLayout();
hierarchic.orthogonalRouting =
graphEditorInputMode.orthogonalEdgeEditingContext.enabled; // Use orthogonal routing if enabled
const layoutData = new HierarchicLayoutData();
if (sender && "affectedItems" in sender) {
layoutData.incrementalHints.incrementalLayeringNodes =
sender.affectedItems.ofType(INode.$class); // Apply incremental layout if there are affected items
hierarchic.layoutMode = "incremental";
}
// Apply the layout with a morphing animation
graphComponent.morphLayout({
layout: hierarchic,
morphDuration: ".5s",
portAdjustmentPolicy: "always",
});
}
// #endregion
// Apply layout initially
await applyLayout();
/* Snap line styles */
.yfiles-snap-line {
stroke: #ff00d8;
stroke-width: 0.175%;
stroke-dasharray: none;
}yFiles features efficient and highly customizable algorithms for automatic layouts. The different layout styles are responsible for determining the locations of all diagram elements based on different optimization criteria. A variety of layout styles are included: Hierarchic, organic (force-directed), tree, orthogonal, circular, radial and series-parallel. Diagram element labels can often be placed directly through the selected layout algorithm or a specific labeling algorithm that's independent of the layout algorithm. All layout algorithms can be applied to a diagram in an animated fashion. Almost all aspects of each layout algorithm can be customized to fit a specific domain and use case.
The hierarchic layout style arranges nodes in layers so that most edges point in the main layout direction. This layout effectively highlights dependencies and relationships between nodes within a diagram. Consequently, it is well-suited for workflow visualization, process visualization, call-graph visualization, entity-relationship diagrams, biochemical pathways, network management, and swimlane diagrams.
The organic layout style uses a force-directed approach to distribute nodes in a natural way. This layout uncovers clusters and symmetries in the diagram. It works well for large networks in bioinformatics, enterprise networking, social network graphs, mesh visualization or system management.
yFiles supports different layout styles for diagrams that have a tree structure. This can be either an organic-looking style that organizes the tree in a star structure around the root node. Or a highly flexible layout style that arranges a tree in layers.
The layouts are able to reveal possible hierarchic relations within the diagram. They're used to visualize relational data, dataflow analysis, software engineering, bioinformatics and business administration.
The algorithm produces a compact layout with orthogonal edges and no inherent direction. This enables a clear representation of complex networks. Orthogonal drawings are used in software engineering, database schema representation, system management, knowledge representation, VLSI circuits and floor planning applications.
Nodes are arranged in circle and star structures to emphasize group and tree structures in a diagram. Circular layouts are used in many areas, such as social networking, network management, WWW visualization, e-commerce and telecommunications.
The radial layout style arranges nodes in concentric circles. Each child node is placed on a larger circle than its parent node. This layout style is well suited for diagrams with many parent-child relationships. If the graph grows, the circles grow larger as well. It can be applied to visualize social networks, data clustering and in bioinformatics.
This layout style arranges certain diagrams into serial and parallel substructures. The compact layout highlights the main direction within directed diagrams. It works well for visualizing electrical circuits, call trees or flowcharts.
Automatic graph layouts make organizing your diagrams effortless. Try out different layout algorithms like hierarchic, orthogonal, or radial to see how they automatically arrange nodes and edges for optimal clarity and aesthetics.
graphComponent.fitGraphBounds()
// Current layout
let currentLayout;
// Create a random graph with 90 nodes and 89 edges and generate current layout
function generateNewGraph() {
graphComponent.graph.clear();
playground.createRandomGraph(graphComponent.graph, 90, 89);
currentLayout();
}
// Function to apply a orthogonal layout to the graph
function applyOrthogonalLayout() {
currentLayout = applyOrthogonalLayout;
const orthogonal = new OrthogonalLayout();
orthogonal.layoutOrientation = "left-to-right"; // Set the orientation of the layout
graphComponent.morphLayout(orthogonal, ".5s"); // Apply the layout with a transition duration of 0.5 seconds
}
// Function to apply a radial layout to the graph
function applyRadialLayout() {
currentLayout = applyRadialLayout;
const radial = new RadialLayout();
radial.edgeBundling.bundlingStrength = 1; // Set the edge bundling strength to maximum
graphComponent.morphLayout(radial, ".5s"); // Apply the layout with a transition duration of 0.5 seconds
}
// Add a button to the toolbar to apply the radial layout
playground.addToolbarButton("Radial", applyRadialLayout);
// Add a button to the toolbar to apply the orthogonal layout
playground.addToolbarButton("Orthogonal", applyOrthogonalLayout);
// Add a button to the toolbar to generate a new graph
playground.addToolbarButton("Generate a new graph", generateNewGraph);
// Create a random graph with 90 nodes and 89 edges and generate radial layout initially
playground.createRandomGraph(graphComponent.graph, 90, 89);
await applyRadialLayout();Edge routing algorithms compute suitable paths for edges without moving the nodes at all. In general, the goal is to find the best routes for edges so they do not cross any nodes, if possible. yFiles supports different routing styles such as orthogonal or polyline, orthogonal bus-like and organic.
The algorithm calculates new paths for some or all edges in an existing layout. These paths consist of horizontal and vertical segments with as few crossings and bends as possible. The routing is suitable for electric circuit design, floor planning and navigation maps.
The algorithm bundles edges in very dense diagrams into buses. The paths are calculated so they share as many parts as possible. The result clears up the diagram and makes it easier to follow the edges.
This force-directed algorithm routes edges curved around fixed nodes. It can be applied as a post-processing for layout algorithms that produce straight-line edges where edges cross nodes.
Each of the layout algorithms mentioned above is highly configurable individually, but they also share several common features. They can calculate layouts for diagrams containing group nodes or swimlanes and allow for edges to be restricted to enter or exit on specific sides of a node. Incremental layout preserves the user's mental map of the diagram by minimizing changes when elements are added or removed, ensuring the diagram remains as consistent as possible.
Keep the mental map of a diagram when inserting new nodes and edges. Certain layout algorithms provide an incremental mode which keeps most of the existing layout the same and inserts other nodes appropriately into this pre-existing layout.
Partial Layout offers a flexible method to maintain specific parts of a diagram in place while recalculating the layout for selected items and integrating them into the overall diagram. It also allows for applying different layout styles to these fixed parts.
Configure the layout algorithms to meet your specific requirements. Each algorithm offers extensive configuration options to accommodate even the most complex layout needs.
Calculate a new layout and apply the results with animation. Easily transition between different layouts by animating the changes in the diagram.
Restrict the time for layout calculation. Layout algorithms can be stopped after a certain amount of time. They may either complete with a valid but potentially lower-quality layout or abort without producing a result.
Restrict the direction or even the exact location in which each edge is allowed to connect to a node. Such restrictions can also be easily combined to specify a set of valid port locations that can be chosen by the layout algorithm.
Edges that connect to the same source or target node can be bundled into an edge group. Edge groups share the first or last few segments, this reduces visual clutter and makes it easier to follow the paths of edges.
In some diagrams there can be many edges, especially in closely-packed structures. Edge bundling results in organic-looking edge paths where edges with similar routes are pulled closer together. This approach is commonly used in bioinformatics, social network analysis, telecommunications and fraud detection.
Most layout algorithms can accommodate labels on nodes and edges, reserving space to place them near their corresponding elements without causing overlaps. If that approach is not possible, a generic labeling algorithm can be used. Similar to edge routing, which only changes edge paths without modifying anything else, labels are then placed according to the provided settings in a separate step without changing node locations or edge paths.
When the diagram contains group nodes, then those should not overlap and their contents should be placed closely together so that they still appear visually grouped. Most layout algorithms support placing group nodes according to those criteria. It is even possible to use different layout styles for the contents of each group.
Sometimes processes are best visualized in tables or swimlanes. The Hierarchic Layout, especially, supports the assignment of nodes to a grid-like structure. Node orders are constrained and complicated edge paths through the rows and columns are avoided.
yFiles allows you not only to create, edit, display, and arrange graphs. There are also a number of analysis algorithms to determine common structural traits (such as connectivity, cycles, whether a graph is a tree and much more), pathfinding and reachability, clustering and centrality measures, graph traversals and many others.
Check graphs for common traits, like determining whether a graph is cyclic or acyclic, connected, planar, or bipartite. You can also determine if a graph exhibits a tree or series-parallel structure, among other analyses.
yFiles offers a variety of algorithms to find paths in graphs, whether it's the shortest path, paths between any two nodes or chains within directed or undirected graphs. Pathfinding problems often occur in geographical applications, such as finding routes on a map.
Centrality measures show the importance of each node within a graph. This can then be used for instance to align nodes differently, or mark their importance via their size or color. Centrality can be applied in social network analysis, e.g. to find the most influential persons or other kinds of networks, e.g. to find key infrastructure nodes on the internet.
yFiles includes algorithms to find connected components in a graph or determine whether a node is reachable from another via an edge path. Such algorithms can be applied in network analysis.
Discover structures in a graph where certain nodes form a close relationship by applying clustering algorithms. This can be an interesting measure in social network graphs and many other domains.
Compute the transitive closure and reduction to receive direct reachability information for directed acyclic graphs.
yFiles allows you to easily calculate a subgraph with the smallest set of edges needed to reach all nodes while also minimizing costs. These trees are used in the design of computer networks, telecommunication networks, and electrical grids.
Solve classic network flow problems like maximum flow, minimum cost and maximum flow/minimum cut in networks in which edges have certain capacities and a flow moves via edges from source to sink nodes. Flow algorithms can be applied to many problems that involve networks, such as water supply, electricity, internet, or shipping, to improve the efficiency of the network.
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
